Wie mache ich ein Dropdown-Menü beim Hover

Dropdown-Menüs sind ein wichtiges Element des Webdesigns, mit dem Sie die Navigation auf der Website benutzerfreundlicher und intuitiver gestalten können. Wenn Sie ein solches Menü zu Ihrer Website hinzufügen möchten, sollten Sie sich keine Sorgen machen - es ist einfach, es mit HTML, CSS und JavaScript zu implementieren.

Um zu beginnen, müssen Sie eine Menüstruktur mit HTML-Tags erstellen. Normalerweise besteht ein Dropdown-Menü aus einer Hauptliste von Menüelementen und Untermenüs, die angezeigt werden, wenn Sie über einen bestimmten Menüpunkt schweben.

Verwenden Sie dann CSS, um die Stile für das Hauptmenü und die Untermenüs festzulegen. Sie können den Hintergrund, die Schriftfarbe, die Einrückung und andere Attribute anpassen, um das Menü ansprechend und leicht lesbar zu machen. Alternativ können Sie CSS-Pseudoklassen wie :hover verwenden, um Effekte hinzuzufügen, wenn Sie über Menüpunkte schweben.

Was ist ein Dropdown-Menü

Die Hauptidee hinter dem Dropdown-Menü besteht darin, die ausgeblendeten Navigationselemente nur auf Wunsch des Benutzers anzuzeigen. Standardmäßig blendet das Dropdown-Menü seinen Inhalt aus und zeigt nur den Titel oder das Symbol an. Wenn der Benutzer den Mauszeiger über den Titel bewegt oder auf ein Symbol klickt, wird das Menü geöffnet, um Zugriff auf seine Unterpunkte zu erhalten.

Dropdown-Menüs sind effektiv, da sie einfach zu bedienen sind und Sie Inhalte verbergen können, die den Benutzer vom Hauptinhalt der Seite ablenken können. Sie erhöhen auch die Benutzerfreundlichkeit, da sie es dem Benutzer ermöglichen, mit minimalem Aufwand schnell zur gewünschten Partition zu navigieren.

Durch die Kombination von HTML, CSS und JavaScript können Sie verschiedene Stile und Effekte für Dropdown-Menüs erstellen. Frameworks wie Bootstrap bieten auch vorgefertigte Komponenten zum Erstellen stilvoller und anpassungsfähiger Dropdown-Menüs.

Erstellen eines Basismenüs

In diesem Abschnitt betrachten wir die grundlegende Struktur und die Elemente, die zum Erstellen eines Dropdown-Menüs erforderlich sind.

Sie müssen CSS und JavaScript verwenden, um die Stile und Funktionen des Dropdown-Menüs hinzuzufügen. In diesem Abschnitt beschränken wir uns jedoch nur auf das HTML-Markup und die grundlegende Strukturansicht des Menüs.

HTML-Markup

Um ein Dropdown-Menü in HTML zu erstellen, müssen Sie spezielle Tags und Attribute verwenden.

und sind Container-Tags, die eine Liste von Elementen definieren. Der Unterschied zwischen den beiden ist, dass das Tag
erstellt eine Aufzählungsliste (mit einem Aufzählungszeichen) und ein Tag - nummerierte Liste (mit Zahlen).

Beispiel für die Verwendung von Tags zum Erstellen eines Dropdown-Menüs:

Dieser Code erstellt eine Aufzählungsliste mit vier Menüpunkten.

und innerhalb eines anderen Listenpunkts:

• Menüpunkt 1
• Menüpunkt 2
  • Untergeordneter Punkt 1
  • Untergeordneter Punkt 2

  In diesem Beispiel enthält Menüpunkt 2 eine verschachtelte Liste mit zwei Elementen.

  Dies ist das grundlegende Markup zum Erstellen eines Dropdown-Menüs in HTML. Es werden jedoch zusätzliche Tags und Attribute verwendet, um einen Hover-Effekt zu erzielen und JavaScript zu verwenden, die in den folgenden Abschnitten erläutert werden.

  CSS-Styling

  In CSS (Cascading Style Sheets) werden alle visuellen Aspekte einer Webseite anhand von Styling-Regeln beschrieben. Stile werden für verschiedene HTML-Elemente festgelegt und mithilfe von Selektoren auf sie angewendet.

  CSS-Stile können sowohl in der HTML-Datei selbst als auch in der externen CSS-Datei festgelegt werden. Eine externe Datei wird bevorzugt, da Sie es einfacher und bequemer macht, Stile auf der gesamten Website zu verwalten.

  Das Festlegen eines Stils für ein Element erfolgt durch Angabe eines Elementselektors, gefolgt von geschweiften Klammern, die die Eigenschaften und ihre Werte beschreiben.

  In diesem Beispiel wird der Stil auf alle Elemente angewendet

  . Es gibt die Textfarbe auf Blau und die Schriftgröße auf 16 Pixel an.

  Es gibt verschiedene Arten von Selektoren in CSS, mit denen Sie Elemente aus verschiedenen Merkmalen auswählen können:

  • Selektoren nach Elementtyp: Wählen Sie alle Elemente des angegebenen Typs aus, z. B. p - alle Absätze.
  • Klassenselektoren: ermöglicht die Auswahl von Elementen, denen eine bestimmte Klasse zugewiesen ist, die über das class-Attribut definiert ist. Zum Beispiel,.important - alle Elemente mit der Klasse "important".
  • ID-Selektoren: Wählen Sie Elemente anhand der über das id-Attribut angegebenen ID aus. Zum Beispiel ist #header ein Element mit der ID "header".
  • Nachkommen-Selektoren: wählen Sie Elemente aus, die Nachkommen des angegebenen Elements sind. Zum Beispiel sind div p alle Absätze, die Nachkommen eines Elements sind .

  Dies sind nur einige der CSS-Funktionen. Mit Hilfe von CSS-Stilen können Sie schöne und moderne Webdesigns erstellen, die der Seite ein einzigartiges Aussehen und eine einzigartige Anziehungskraft verleihen.

  Hinzufügen von Funktionen mit JS

  Um ein Dropdown-Menü zu erstellen, das geöffnet wird, wenn wir über ein bestimmtes Element schweben, müssen wir JavaScript verwenden. Die gesamte Funktionalität basiert auf der Änderung der Elementstile, wenn bestimmte Aktionen ausgeführt werden.

  Zuerst müssen wir einen Ereignishandler erstellen, der darauf reagiert, dass der Cursor über das Menüelement schwebt. Dazu verwenden wir die addEventListener-Methode. Als Argumente übergeben wir den Ereignisnamen "mouseenter" und die Handlerfunktion.

  Innerhalb dieses Handlers können wir dem Listenelement, das wir beim Hover anzeigen möchten, eine Klasse hinzufügen. Dazu verwenden wir die classList-Eigenschaft des Elements und die add-Methode. In unserem Fall wird die Klasse zum Beispiel "active" genannt.

  Als nächstes können wir die Funktion zum Schließen des Menüs hinzufügen, wenn wir außerhalb seines Bereichs klicken. Dazu müssen wir dem gesamten Dokument einen "Click" -Ereignishandler hinzufügen. Innerhalb dieses Handlers überprüfen wir, ob das Zielelement (das Element, auf dem das Ereignis aufgetreten ist) ein untergeordnetes Element unseres Dropdown-Menüs ist. Wenn nicht, entfernen wir die Klasse "active" aus dem Listenelement.

  Um eine Klasse zu entfernen, verwenden wir die remove-Methode des classList-Objekts des Elements.

  Wenn Sie also über ein Menüelement schweben, wird ihm die Klasse "active" hinzugefügt und die Liste wird sichtbar. Wenn Sie außerhalb des Menübereichs klicken, wird die Klasse "active" gelöscht und die Liste wird ausgeblendet.

  Beispiel für die Implementierung dieser Funktionalität:

  • Menüpunkt 1
    • Punkt 1
    • Punkt 2
    • Punkt 3
    • Punkt 1
    • Punkt 2
    • Punkt 3
    • Punkt 1
    • Punkt 2
    • Punkt 3

    const dropdownMenus = document.querySelectorAll('ul[id^="dropdown-menu-"]');

    const menuItem = menu.parentNode;

    Erstellen eines Dropdown-Menüs beim Hover

    Um ein Dropdown-Menü beim Hover zu erstellen, können wir HTML, CSS und JavaScript verwenden. So können Sie dies tun:

    1. Erstellen Sie eine Liste mit Menüelementen mit einem Tag und
    2. . Jedes Menüelement stellt einen separaten Eintrag dar.
    3. Verwenden Sie CSS, um Menüelemente zu stylen. Sie können beispielsweise die Hintergrundfarbe, Schriftart und Textgröße anpassen.
    4. Fügen Sie eine CSS-Regel für Elemente hinzu, die beim Hover angezeigt werden sollen. Sie können beispielsweise die Pseudoklasse :hover verwenden, um den Stil eines Elements beim Hover zu ändern.
    5. Fügen Sie JavaScript hinzu, um das Hover-Ereignis über ein Menüelement zu behandeln. Sie können beispielsweise die addEventListener-Methode verwenden, um ein Hover-Ereignis hinzuzufügen.
    6. Im Ereignishandler können Sie eine CSS-Klasse hinzufügen oder entfernen, um das Dropdown-Menü ein- oder auszublenden. Zum Beispiel können Sie die classList-Methoden verwenden.add und classList.remove, um eine Klasse hinzuzufügen und zu entfernen.

    Wenn Sie also den Mauszeiger über ein Menüelement bewegen, wird ein Dropdown-Menü angezeigt, und wenn Sie es verlassen, wird es ausgeblendet.

    Hinzufügen von Schwebestilen

    Wenn Sie ein Dropdown-Menü mit HTML, CSS und JS erstellen, ist es auch wichtig, Stile hinzuzufügen, die aktiviert werden, wenn Sie den Mauszeiger über die Menüelemente bewegen.

    Dazu können Sie eine Pseudoklasse verwenden :hover in CSS. Wenn Sie beispielsweise die Hintergrundfarbe eines Menüelements beim Hover ändern möchten, können Sie den folgenden Code hinzufügen:

    .menu-item:hover

    In diesem Beispiel ist die Klasse menu-item wird auf das Menüelement und die Pseudoklasse angewendet :hover gibt an, dass Stile aktiviert werden, wenn Sie den Mauszeiger über dieses Element bewegen. Eigenschaft background-color ändert die Hintergrundfarbe in #f2f2f2.

    Sie können auch andere Eigenschaften von Menüelementen beim Schweben ändern, z. B. die Textfarbe, die Schriftgröße oder das Hinzufügen von Animationen.

    Mit einer Pseudoklasse :hover und wenn Sie es mit anderen CSS-Eigenschaften kombinieren, können Sie die Interaktivität und den visuellen Eindruck des Dropdown-Menüs verbessern.

    Animation beim Öffnen eines Menüs

    Um beim Öffnen des Dropdown-Menüs in HTML, CSS und JS eine spektakuläre Animation zu erstellen, können Sie verschiedene Methoden und Techniken verwenden.

    Eine beliebte Methode ist die Verwendung von CSS-Eigenschaften und Übergängen. Sie können beispielsweise eine flüssige Animation festlegen, wenn ein Menü angezeigt wird, indem Sie die Eigenschaften opacity und transition verwenden.

    #menu
    opacity: 0;
    transition: opacity 0.3s ease-in;
    >

    Wenn Sie das Menü öffnen, können Sie eine Klasse mit JavaScript hinzufügen, um die opacity-Eigenschaft in 1 zu ändern:

    document.getElementById('menu').classList.add('open');

    Sie können auch CSS-Animationen verwenden, die beim Öffnen eines Menüs komplexere und dynamischere Effekte festlegen. Dazu müssen Sie Keyframes und Animationseigenschaften über CSS festlegen:

    @keyframes openMenu

    0%

    100%

    >

    Und fügen Sie eine Klasse über JavaScript hinzu:

    document.getElementById('menu').classList.add('animateOpen');

    Sie können auch andere Effekte hinzufügen, z. B. Hintergrundfarben ändern, Einzelbildbewegungen usw.

    Als Ergebnis wird beim Öffnen des Menüs ein glattes Aussehen oder eine entsprechende Animation auftreten, die die Benutzererfahrung interessanter und attraktiver macht.

    Schließt das Menü, wenn Sie außerhalb des Bereichs klicken

    Um ein Dropdown-Menü in HTML, CSS und JS zu erstellen, können wir einen Standardansatz verwenden, bei dem das Menü angezeigt wird, wenn Sie über ein bestimmtes Element schweben. Nach dem Öffnen des Menüs möchten wir jedoch, dass es geschlossen wird, wenn der Benutzer außerhalb des Menübereichs klickt. Dazu benötigen wir einen JavaScript-Code.

    Hier ist ein Beispielskript, mit dem Sie das Dropdown-Menü schließen können, wenn Sie außerhalb des Bereichs klicken:

    // Получаем ссылку на элемент менюvar menu = document.getElementById("menu");// Получаем ссылку на элемент, который открывает менюvar menuTrigger = document.getElementById("menu-trigger");// Функция для проверки, является ли элемент потомком менюfunction isDescendant(parent, child) node = node.parentNode;>return false;>// Обрабатываем клик вне области менюdocument.addEventListener("click", function(event)  >);

    Dieses Skript fügt dem gesamten Dokument einen "Click" -Ereignishandler hinzu. Innerhalb des Handlers überprüfen wir, ob sich das angeklickte Element innerhalb des Menüs befindet oder ob es sich nicht um das Menü selbst oder um das Element handelt, das das Menü öffnet. Wenn das Element kein untergeordnetes Element oder das Menü selbst oder das Element ist, das das Menü öffnet, wird das Menü geschlossen.

    Es ist wichtig sich daran zu erinnern, dass im Beispielskript Elemente mit der ID "menu" und "menu-trigger" verwendet werden. Stellen Sie sicher, dass Sie die entsprechenden Elemente in Ihrem HTML-Code mit den entsprechenden ID-Nummern haben.

    Dies war ein Beispiel dafür, wie man ein Dropdown-Menü schließt, wenn man außerhalb seines Bereichs klickt. Sie können diesen Ansatz jetzt in Ihren Projekten verwenden und eine benutzerfreundlichere Benutzeroberfläche bereitstellen.