Ein nettes Dropdown-Menü kann nicht nur in JavaScript erstellt werden, sondern auch mit Standard-HTML-Tags. Diese Methode zum Erstellen eines Dropdown-Menüs ist nützlich für diejenigen, die gerade mit den ersten Schritten beim Erstellen von Websites beginnen und die Arbeit beim Erstellen von Menüs auf Seiten vereinfachen möchten.
Anleitung
Schritt 1
Im HTML-Code ist ein solches Menü eine ungeordnete Liste mit darin verschachtelten Listen. Erstellen Sie zunächst eine Datei style.css und kopieren Sie den folgenden CSS-Code dorthin, um das Menü zu stylen und zu formatieren:
#nav, #nav ul {
Listenstil: keine;
Rand: 0;
Polsterung: 0;
Rahmen: 1px solid # 000;
Hintergrund: # 515151;
Schwimmer: links;
Breite: 100 %;
}
#navli {
Schwimmer: links;
Position: relativ;
Hintergrundfarbe: # 003366;
zurück / Boden: keine;
}
#nav li ul {
Anzeige: keine;
Position: absolut;
Hintergrundfarbe: # 003366;
Polsterung: 8px 0;
Breite: 138px;
}
Schritt 2
Jetzt müssen wir den Menüpunkten etwas Dekoration hinzufügen. Definieren Sie Breite und Höhe dafür, entfernen Sie die Unterstreichungslinien, legen Sie für jeden Link eine freie Breite fest und legen Sie die gewünschten Hintergrundfarben fest.
Schritt 3
Für all diese Änderungen fügen Sie der Datei den folgenden Code hinzu:
#nav a {
Farbe: #fff;
Textdekoration: keine;
Bildschirmsperre;
Breite: 120px;
Polsterung: 4px 10px;
Hintergrundfarbe: # 003366 Repeat-y rechts;
}
#nav a: schweben {
Farbe: # 000;
Hintergrundfarbe: # 0033FF;
}
#nav li: schweben {
Hintergrundfarbe: # 333333;
}
Fügen Sie dann den folgenden Codeabschnitt hinzu, um das Menü abzuschließen:
#nav li: hover li ul {
Anzeige: keine;
Breite: 138px;
oben: -9px;
links: 133px;
}
#nav li: schweben li: schweben ul {
Bildschirmsperre;
}
Schritt 4
In der HTML-Version sieht die allgemeine ungeordnete Menüliste so aus - auf ihrer Grundlage wird das Menü erstellt, das im Artikel erwähnt wurde.
- Zuhause
-
Katalog
-
Alle Produkte
- Nach Datum
- Hersteller
- Andere
-
