HTML ist eine Auszeichnungssprache, mit der Sie Webseiten erstellen können. Eines der Hauptelemente von Webseiten ist das Menü. Sie können das Dropdown-Menü verwenden, um ein übersichtliches und funktionales Menü zu erstellen. In diesem Artikel werden wir uns eine schrittweise Anleitung zum Erstellen eines Dropdown-Menüs in HTML ansehen, mit dem Sie die Benutzerfreundlichkeit auf Ihrer Website verbessern können.
Ansatz - erstellen Sie eine grundlegende Menüstruktur. Dazu wird eine nummerierte Liste verwendet, in der die gewünschten Menüelemente Listenelemente darstellen. Jedem Eintrag in der Liste muss eine Klasse oder eine ID zugewiesen werden, um die CSS-Formatierung später anwenden zu können.
Zweiter Schritt - hinzufügen von Stilen zum Dropdown-Menü. Sie müssen CSS verwenden, um Stile zu erstellen, die festlegen, wie das Menü bei der Interaktion mit dem Benutzer aussehen und sich verhalten soll. Mit einer Pseudoklasse :hover Sie können Stile festlegen, die auf Menüpunkte angewendet werden, wenn Sie mit der Maus über sie zeigen. Sie können auch CSS verwenden, um Animationen und Übergänge beim Öffnen und Schließen eines Dropdown-Menüs zu steuern.
Nachdem Sie nun die grundlegenden Schritte kennen, um ein Dropdown-Menü in HTML zu erstellen und es mit CSS zu stylen, können Sie mit dem Erstellen Ihres eigenen Menüs beginnen. Denken Sie daran, dass ein gutes Menü nicht nur die Navigation auf Ihrer Website verbessert, sondern auch Benutzerfreundlichkeit schafft, was ein wichtiger Aspekt für eine erfolgreiche Online-Präsenz ist.
Erstellen einer grundlegenden Dropdown-Menüstruktur
Um ein Dropdown-Menü in HTML zu erstellen, verwenden wir Tags und . Sie ermöglichen es uns, geordnete und ungeordnete Listen zu erstellen, die für unsere Menüs verwendet werden.
Zuerst erstellen wir die Grundstruktur unseres Menüs:
Wir haben eine Hauptmenüliste erstellt, die aus vier Elementen besteht. Jeder Menüpunkt ist ein Listenelement und der Linktext ist ein Element . Attribut href="#" gibt den Pfad zur Zielseite an. In diesem Fall ist es leer, da wir noch keine zusätzlichen Seiten erstellt haben.
Um Unterpunkte zu unserem Menü hinzuzufügen, müssen Sie einfach eine weitere Liste in das Element einfügen. Zum Beispiel:
In diesem Beispiel haben wir Unterabsätze für "Über uns" hinzugefügt. Wir haben eine zweite Liste mit der Klasse "submenu" erstellt, die ein Untermenü für den Punkt "Über uns" ist.
Erstellen einer Liste von Menüelementen
Dazu wird ein Tag verwendet
- - eine geordnete Liste. Jedes Listenelement wird mit einem Tag angegeben
- . Beispiel für das Erstellen einer ungeordneten Liste:
Nachdem Sie eine Liste mit Menüelementen erstellt haben, können Sie mit dem Erstellen von Stilen beginnen, um sie anzuzeigen, und mit JavaScript oder CSS Interaktivität hinzufügen.
Anwenden von Stilen auf Menüelemente
Stile ermöglichen es Ihnen, das Menü für Benutzer attraktiver und lesbarer zu machen. Sie können verschiedene Stile auf verschiedene Menüelemente anwenden, um ihre Bedeutung und ihre Navigation zu unterstreichen. Um zu beginnen, können Sie das Tag verwenden strong um die Hauptmenüelemente hervorzuheben, z. B. die Titel von Abschnitten oder Elementen. Zum Beispiel:
Dieser Code erzeugt fetthaltigen Text für das Startmenüelement, damit der Benutzer leichter navigieren kann. Sie können auch ein Tag verwenden em um wichtige Unterabschnitte oder Menüpunkte hervorzuheben. Zum Beispiel:
Der obige Code hebt den Text "Über uns" kursiv hervor, um dem Benutzer zu helfen, die benötigten Informationen schneller zu finden. Sie können verschiedene Stile wie Hintergrundfarbe, Schriftgröße oder Rahmen kombinieren, um das gewünschte Erscheinungsbild der Menüelemente zu erreichen. Verwenden Sie CSS, um Stile auf Menüelemente anzuwenden. Zum Beispiel:
ul li a a:hover strong em
Dies ist ein Beispiel für CSS-Stile, die Sie auf Menüs anwenden können. Hier legen Sie Einrückungen, Farben, Schriftstile und andere Einstellungen fest. Wenden Sie diese Stile auf Ihr Menü an und passen Sie sie an Ihre Bedürfnisse und Ihren Geschmack an.
Hinzufügen von Funktionalität zu einem Dropdown-Menü
- Verwenden Sie CSS, um die Liste der Dropdown-Unterpunkte auszublenden:
const submenuToggle = document.querySelectorAll('.menu-item-has-children > a');for (let i = 0; i < submenuToggle.length; i++) );>
.show
Jetzt funktioniert Ihr Dropdown-Menü und ermöglicht es Benutzern, Unterpunkte zu sehen, wenn Sie auf die Hauptmenüpunkte klicken.
Schreiben eines Skripts zum Ein- und Ausblenden der Dropdown-Liste
Um ein Dropdown-Menü in HTML zu erstellen, müssen Sie JavaScript verwenden. Im Folgenden finden Sie eine schrittweise Anleitung zum Schreiben eines Skripts zum Ein- und Ausblenden der Dropdown-Liste:
- Erstellen Sie ein HTML-Element, das als Schaltfläche oder Link zum Öffnen und Schließen der Liste dient.
- Erstellen Sie ein HTML-Element, das die Liste selbst darstellt. Geben Sie ihm eine eindeutige ID.
- Erstellen Sie eine JavaScript-Funktion, die ausgeführt wird, wenn Sie auf eine Schaltfläche oder einen Link klicken.
- Verwenden Sie innerhalb dieser Funktion die getElementById-Methode, um einen Verweis auf das HTML-Listenelement abzurufen.
- Verwenden Sie die bedingte if-else-Anweisung, um den aktuellen Status der Liste zu überprüfen (geöffnet oder geschlossen) und die entsprechenden Aktionen auszuführen.
- Wenn die Liste geöffnet ist, blenden Sie sie mit der CSS-Eigenschaft display: none aus, andernfalls zeigen Sie die Liste mit der CSS-Eigenschaft display: block an.
Ein Beispielskript zum Ein- und Ausblenden einer Dropdown-Liste könnte folgendermaßen aussehen:
Dieses Skript fügt eine Schaltfläche "Liste öffnen/Schließen" und eine Liste mit der ID "myList" hinzu. Wenn Sie auf die Schaltfläche klicken, überprüft das Skript den aktuellen Status der Liste und ändert die Sichtbarkeit der Liste. Wenn die Liste bereits geöffnet ist, wird sie ausgeblendet, und wenn sie geschlossen ist, wird sie angezeigt.
