Dropdown-Menüs auf Site-Seiten werden verwendet, um Platz zu sparen und eine logische Darstellung der Struktur einer Webressource bereitzustellen. Es gibt viele Möglichkeiten, dieses Element zu implementieren, eine der einfachsten ist unten aufgeführt.
Es ist notwendig
Grundkenntnisse in HTML- und CSS-Sprachen
Anleitung
Schritt 1
Der HTML-Code des Menüs verwendet verschachtelte Listenelemente (UL und LI), in denen Links zu Seiten platziert werden. Es enthält keine komplexen Strukturen. Die Dynamik wird mittels CSS realisiert, dessen Beschreibungsblock direkt im Quellcode der Seite platziert wird. Daran ist auch nichts besonderes, außerdem enthält der Text einige Erklärungen zum Zweck bestimmter Stilblöcke.
Schritt 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // DE"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Dropdown-Menü * {
Schriftfamilie: Verdana;
Schriftgröße: 14px;
} ul, li, ein {
Polsterung: 0;
Bildschirmsperre;
Rand: 0;
Rand: 0;
} ul {
Rahmen: 1px solide #AAA;
Breite: 150px;
Listenstil: keine;
Hintergrund: #FFF;
} li {
Hintergrundfarbe: #AAA;
Position: relativ;
z-Index: 9;
Polsterung: 1px;
}
li. Ordner {Hintergrundfarbe: #AAA;}
li.ordner ul {
Position: absolut;
oben: 5px;
links: 111px; / * für IE-Browser * /
}
li.folder> ul {left: 140px;} / * für andere Browser * / a {
Polsterung: 2px;
Rahmen: 1px fest #FFF;
Textdekoration: keine;
Breite: 100 %; / * für IE-Browser * /
Farbe: # 000;
Schriftdicke: fett;
}
li> a {width: auto;} / * für andere Browser * / li a {
Breite: 140px;
Bildschirmsperre;
} li a.submenu {
Hintergrundfarbe: gelb;
} / * Links * /
a: schweben {
Randfarbe: grau;
Hintergrundfarbe: # FF0000;
Farbe: Schwarz;
}
li. Ordner a: schweben {
Hintergrundfarbe: # FF0000;
} / * Ordner * /
ul ul, li: hover ul ul {Anzeige: keine;}
li. Ordner: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Seite
-
2. Ordner
- 2.1 Seite
-
2.2 Ordner
- 2.2.1 Seite
- 2.2.2 Seite
- 2.2.3 Seite
- 2.3 Seite
-
3. Ordner
- 3.1 Seite
- 3.2 Seite
- 3.3 Seite
- 4. Seite
Schritt 3
Sie können diesem Code Unterstützung für ältere Versionen von Internet Explorer-Browsern hinzufügen - er wird mit JavaScript (von Peter Nederlof) implementiert. Sie müssen die Datei mit dem erforderlichen Code beispielsweise von diesem Link herunterladen - https://peterned.home.xs4all.nl/htc/csshover3.htc. Sie muss im selben Ordner wie die Hauptseite abgelegt werden. Und fügen Sie in der Beschreibung der Stile der Hauptseite einen Link hinzu - er kann direkt nach dem öffnenden Stil-Tag platziert werden: / * für alte IE-Browser *
body {Verhalten: url ("csshover3.htc");}
