Websites und Anwendungen werden mit verschiedenen interaktiven Elementen entwickelt, um die Benutzerfreundlichkeit zu gewährleisten. Ein solches Element ist ein Dropdown-Menü, das zusätzliche Optionen oder Kategorien durch Klicken oder Schweben anzeigt.
Das Erstellen eines Dropdown-Menüs mag eine entmutigende Aufgabe sein, aber es ist tatsächlich ziemlich einfach mit HTML, CSS und Javascript. In diesem Artikel werden wir detailliert untersuchen, wie ein Klick-Dropdown-Menü auf reinem HTML, CSS und Javascript erstellt wird.
Zunächst benötigen wir den HTML-Code, um die Struktur unseres Dropdown-Menüs zu erstellen. Wir werden zuerst einen Hauptblock erstellen, in dem die Menüelemente platziert werden. Fügen Sie dann eine Schaltfläche oder einen Link hinzu, auf den der Benutzer klickt, um das Menü zu öffnen. Schließlich fügen wir die Menüelemente im Hauptblock hinzu.
Anmerkung: der Einfachheit halber werden wir keine Stile oder Frameworks verwenden, aber Sie können sie zu Ihrem Projekt hinzufügen, um ein attraktiveres Aussehen zu erhalten.
Erstellen einer grundlegenden HTML-Struktur für ein Dropdown-Menü
Um ein Dropdown-Menü in HTML, CSS und JS zu erstellen, müssen Sie zuerst eine entsprechende HTML-Codestruktur erstellen.
Es wird angenommen, dass ein Dropdown-Menü mehrere Elemente enthält, die im Hauptmenü angezeigt werden, sowie Untermenüs, die angezeigt werden, wenn Sie auf jedes Menüelement klicken oder darauf klicken.
Um zu beginnen, erstellen wir eine Hauptmenüschale:
In diesem Beispiel haben wir einen Hauptmenüblock mit der Klasse "menu" erstellt. Darin wurde eine ungeordnete Liste (UL) mit der Klasse "menu-list" platziert, die mehrere Menüpunkte (LI) mit der Klasse "menu-item" enthält. Jeder Menüpunkt ist ein Link (A) mit der Klasse "menu-link".
Auf diese Weise ist die HTML-Struktur fertig und es ist jetzt möglich, CSS-Stile und JS-Skripte zu erstellen, um ein Dropdown-Menü zu implementieren.
Definieren des Aussehens und der Stile für Menüs
Um ein stilisiertes Dropdown-Menü in HTML, CSS und JavaScript zu erstellen, müssen Sie das Erscheinungsbild und die Stile für das Menü definieren. Auf diese Weise können Sie Farben, Schriftarten, Einrückungen und andere Optionen festlegen, damit das Menü ansprechend aussieht und dem Gesamtdesign der Website entspricht.
In CSS können Sie Selektoren verwenden, um Stile für Menüelemente zu definieren. Zum Beispiel können Sie mit dem #menu-Selektor Stile für den Hauptmenüblock definieren, und mit dem #menu li-Selektor können Sie Stile für Listenelemente definieren.
Bei der Definition des Erscheinungsbildes eines Menüs werden Größen, Farben, Schriftarten und andere Eigenschaften festgelegt. Sie können beispielsweise die Eigenschaft width verwenden, um die Größe eines Menüblocks festzulegen, und Sie können die Eigenschaft background-color verwenden, um die Hintergrundfarbe festzulegen.
Sie können den Menüelementen Stile mithilfe von Klassen oder ID hinzufügen. Beispielsweise können Sie einem Listenelement eine Klasse oder eine ID hinzufügen, um bestimmte Stile auf dieses Element anzuwenden.
Sie können auch Stile für verschiedene Zustände von Menüelementen festlegen, z. B. wenn Sie den Mauszeiger bewegen oder einen Link aktivieren. Dazu können Sie Pseudoklassen wie :hover oder :active verwenden.
Dadurch können Sie das Erscheinungsbild und die Stile eines Menüs definieren, indem Sie in einer Webanwendung oder auf einer Website ein attraktives und funktionelles Dropdown-Menü erstellen.
Hinzufügen von Funktionalität mit JavaScript
Um ein Dropdown-Menü mit HTML und CSS zu erstellen, können wir JavaScript verwenden, um Funktionalität hinzuzufügen. Wie folgt können wir ein JavaScript-Skript schreiben, um ein Dropdown-Menü zu erstellen:
| var dropdown = document.getElementsByClassName("dropdown-btn"); |
| var i; |
| for (i = 0; i < dropdown.length; i++) |
| dropdown[i].addEventListener("click", function() |
| this.classList.toggle("active"); |
| var dropdownContent = this.nextElementSibling; |
| if (dropdownContent.style.display === "block") |
| dropdownContent.style.display = "none"; |
| > else |
| dropdownContent.style.display = "block"; |
| > >); |
In diesem Beispiel verwenden wir die Methode getElementsByClassName("dropdown-btn"), um alle Elemente mit der Klasse "dropdown-btn" abzurufen. Dann fügen wir für jedes Element einen Klick-Ereignishandler hinzu, damit beim Klicken auf das Element die Active-Klasse geändert und der Anzeigestil des nächsten Elements geändert wird. Wenn der Anzeigestil "block" ist, ändert er sich in "none" und umgekehrt.
Erstellen von Animationen und Effekten für Menüs
Wenn Sie ein Dropdown-Menü in HTML, CSS und JavaScript erstellen, können Sie verschiedene Animationen und Effekte verwenden, um es für Benutzer interaktiver und ansprechender zu gestalten. Hier sind einige Ideen, die Sie anwenden können:
- Animation des Erscheinens - wenn Sie das Menü öffnen, können Sie ein glattes Aussehen hinzufügen, um es auf dem Bildschirm reibungslos und ansprechend erscheinen zu lassen.
- Animation zum Schließen - wenn Sie das Menü schließen, können Sie Animationen hinzufügen, die die Größe des Menüs stufenlos reduzieren oder verblassen, um einen reibungslosen Ausblendungseffekt zu erzeugen.
- Uebergang - sie können verschiedene Übergangseffekte hinzufügen, wenn Sie schweben oder einen bestimmten Menüpunkt auswählen. Wenn Sie beispielsweise über einen Menüpunkt schweben, können Sie ihn hervorheben oder seine Farbe ändern.
- Vergrößerungseffekte - wenn Sie auf einen Menüpunkt klicken, können Sie einen Vergrößerungseffekt hinzufügen, um ihn sichtbarer und aktiver zu machen.
- Sanftes Scrollen - wenn Ihr Menü eine große Anzahl von Elementen enthält, können Sie einen sanften Bildlauf hinzufügen, um die Navigation zu verbessern.
Diese Animationen und Effekte können mit CSS-Animationen, Transformationen und Übergängen implementiert werden. Sie können JavaScript auch verwenden, um zusätzliche Logik und Kontrolle über Animationen hinzuzufügen. Es ist wichtig sich daran zu erinnern, dass Effekte und Animationen nicht übermäßig sein sollten und den Benutzer daran hindern sollten, das Menü bequem und schnell zu verwenden.
