07.08.2009
Vertikales, seitlich ausklappbares Menü
In diesem Kapitel hatten wir uns recht mühsam ein horizontales Drop-Down-Menü erarbeitet. Viele Seiten verwenden jedoch eine vertikale Navigation. Natürlich lässt sich auch ein solches Menü seitlich nach links oder rechts aufklappen, so dass die Links zu weiteren Unterthemen erscheinen.
Da der Mensch von Natur aus faul ist, ersparen wir uns doppelte Arbeit, denn wir können weitgehend auf den HTML- und CSS-Code der horizontalen Klapp-Navi zurückgreifen. Es bedarf nur weniger Änderungen um die horizontale Navigation zur vertikalen umzuwandeln.
1. Ausgangsbasis der vertikalen Ausklapp-Navigation
Kopiert euch zunächst den grau hinterlegten Quelltext dieser Seite und speichert ihn als HTML-Datei ab. Texte und Kommentierungen mit "Drop-Down" sollte man durch "Ausklapp" ersetzen, damit es zu keinen Verwechslungen kommt.
Ändert noch die Überschrift, z.B. in "Basis für vertikale Ausklapp-Navigation". Das Ganze sollte dann wie in Demo 1 aussehen.
2. Formatierung der Menüleiste
Da der HTML-Teil lediglich für die Semantik zuständig ist, brauchen wir daran nichts zu ändern, sondern können uns auf die formatierenden CSS-Styleangaben beschränken.
Die Menüleiste soll sich nun nicht mehr über die gesamte Seitenbreite erstrecken. Wir begrenzen somit ihre Breite, hier auf 140px.
Unsere Themenblöcke sollen sich nun untereinander und nicht nebeneinander anordnen. Also müssen wir bei #menu ul die Float-Angabe löschen.
Damit ergibt sich bei den betroffenen Selektoren folgender geänderter CSS-Code:
/*--formatiert die Menüleiste--*/
#menu {
width: 140px;
padding: 0 20px;
background: #003366;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
width: 140px;
list-style-type: none;
}
Das Ergebnis zeigt Demo 2.
3. Ausklapp-Effekt nach rechts
Nun müssen wir lediglich noch dafür sorgen, dass die Links nicht nach unten, sondern nach rechts ausklappen. Dieser Effekt wird durch absolute Positionsangaben bei #menu ul ul erzielt. Als top-Wert setzen wir "0" und als "left-Wert" 140px entsprechend der definierten Linkbreite. Damit ergibt sich:
#menu ul ul {
position: absolute;
top: 0;
left: 140px;
z-index: 2;
display: none;
}
Das war's dann auch schon: Fertig ist unsere vertikal, seitlich ausklappende Navigation wie Demo 3 zeigt. Den kompletten Quelltext habe ich nochmals hier dargestellt.
4. Ausklapp-Effekt nach links
Wer seine Navi lieber rechts platziert und die Links nach links ausklappen will, muss lediglich #menu rechts statt links floaten und bei #menu ul ul den left-Wert negativ angeben. Diese Variante ist nochmals in Demo 4 dargestellt.
Achtet zum Schluss noch auf folgendes:
Diese Navis sind entweder links oder rechts gefloatet. Das Nachbarelement, z.B. der "Content" der Seite benötigt dementsprechend einen linken oder rechten margin-Wert, der mindestens der Gesamtbreite der Navi einschließlich padding- und border-Werten entspricht. Hierauf sei verwiesen. Schließlich müsst ihr dann an geeigneter Stelle (je nach konkreter Situation) noch clearen.