26.11.2009
Vertikale Listen-Navigation
Leider sieht man immer wieder und immer noch Navigationen, die in Form einer unübersichtlichen Tabelle oder einer wahren "Div-Suppe" aufgebaut sind. Dabei geht es in Form einer CSS-formatierten Liste doch viel einfacher und übersichtlicher.
Die nachfolgende Anleitung zeigt, wie man eine Navigation oder ein Menü semantisch korrekt erstellt sowie per CSS entsprechend formatiert und gestaltet. Dabei haben wir in Co-Produktion mit der PI-Fundgrube auch wieder ein paar grafische "Schmankerl" parat, mit denen ihr eure Navi recht ansprechend gestalten könnt.
1. Unformatierte Liste
Legen wir also los mit dem HTML-Grundgerüst, hier mit drei Links zur Demonstration. Natürlich könnt ihr diese Navi später um weitere Links erweitern und euren individuellen Bedürfnissen anpassen. Die "Rauten" # stehen als Platzhalter; ihr müsst sie mit euren individuellen Links zu den jeweiligen Zielseiten ersetzen.
Wir benutzen folgenden HTML-Quelltext und bedienen uns mit dem Element ul einer "unordered-list":
<ul id="navi">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
Unsere Ergebnisse sehen wir uns Schritt für Schritt an; zunächst die noch und völlig unformatierte Navigation in Demo 1. Das Menü ist zwar schon erkennbar, jedoch wirkt es noch nicht besonders ansprechend.
2. Einige Basisformatierungen
Als nächstes folgen einige Basisformatierungen für die als "navi" bezeichnete ul-Liste. Sie dienen dazu, dass die Abstände der Navi in allen Browsern gleich angezeigt werden und die üblichen Aufzählungspunkte einer Liste verschwinden.
Folgende CSS-Angaben sollten selbsterklärend sein; das Ergebnis zeigt Demo 2.
#navi {
margin: 0;
padding: 0;
list-style-type: none;
}
Natürlich könnt ihr diese Navigation mit entsprechenden float- und margin-Angaben dort hin positionieren, wo sie dann auf eurer Website ihren genauen Platz haben soll.
3. Standard-Linkformatierung
Wenden wir uns nun der Linkformatierung zu. Diese könnt ihr natürlich euren eigenen Bedürfnissen entsprechend recht individuell gestalten; das nachfolgende Beispiel stellt eben nur eines von vielen dar.
An dieser Stelle sei darauf hingewiesen, dass wir für das Element "a" alles definieren, was für die einzelnen Linkzustände einheitlich gilt. Abweichungen davon werden später den einzelnen Linkzuständen per Pseudoklasse zugewiesen.
Die nachfolgenden Angaben definieren eine Schriftart, -größe und -gewicht, entfernen den Link-Unterstrich und geben den Links eine einheitliche Breite und Höhe. Mit der Angabe display: block; verwandeln wir das standardmäßige Inlineelement "a" zum Blockelement. Dies bewirkt, dass sich der spätere Hover-Effekt nicht nur auf den Linktext, sondern auf den gesamten Linkbereich auswirkt.
Ebenso können wir dem Link noch eine Schrift- und Hintergrundfarbe zuweisen.
Eine horizontale Textzentrierung erreichen wir mit text-align: center; . Die vertikale Textzentrierung erfolgt mit einem line-height-Wert, welcher unserem Höhenwert entspricht.
Zur Abgrenzung der einzelnen Links soll ein unterer Rahmen dienen.
#navi a {
font-family: Verdana;
font-size: 14px;
font-weight: bold;
text-decoration: none;
width: 150px;
height: 25px;
display: block;
color: #fff;
background-color: #0000c4;
text-align: center;
line-height: 25px;
border-bottom: 1px solid #fff;
}
In Demo 3 sieht unsere Navi schon recht ansprechend aus.
4. Linkzustände "visited" und "hover"
Nun gilt es zu beachten, dass in der CSS-Reihenfolge zunächst die Angaben für die besuchten Links und danach für den Hover-Zustand erfolgen, sonst funktionieren diese Effekte nicht, siehe hier, Ziffer 7. Die Linkzustände können z.B. mit unterschiedlichen Hintergrundfarben symbolisiert werden, wer möchte, kann auch eine farblich abgestimmte Schriftfarbe nehmen.
#navi a:visited {
color: #dfdfdf;
}
#navi a:hover {
background-color: #33f;
}
Damit haben wir mit Demo 4 bereits ein Standardmenü für den "Hausgebrauch".
5. Menü mit neutralen Link-Buttons
Wer bei diesem Standardmenü vielleicht noch den richtigen Pepp vermisst, der kann seine Links noch mit Hintergrundgrafiken (Link-Buttons) verschönern und damit aufwerten. An dieser Stelle kommt nun wieder Garnets Part von unserer Grafikabteilung. Sie zeigt uns in ihrer PI-Fundgrube anhand zahlreicher Beispiele, wie man derartige Link-Buttons mit dem Grafikprogramm Ulead Photo Impact X3
Diese Buttons bauen wir jetzt in unsere Linkformatierung ein, und zwar an der Stelle, wo bisher die Hintergrundfarbe definiert war. Die Grafiken ersetzen damit die Hintergrundfarben. Beim visited-Zustand kommt die Grafik zusätzlich hinzu. Ändert daher eure CSS-Angaben wie folgt:
#navi a {
font-family: Verdana;
font-size: 14px;
font-weight: bold;
text-decoration: none;
width: 150px;
height: 25px;
display: block;
color: #fff;
background-image: url(button01.gif);
text-align: center;
line-height: 25px;
border-bottom: 1px solid #fff;
}
#navi a:visited {
color: #dfdfdf;
background-image: url(button03.gif);
}
#navi a:hover {
background-image: url(button02.gif);
}
Das Ergebnis in Demo 5 sieht bereits recht ansprechend aus, allerdings müsste hier noch die Schriftfarbe etwas besser an die Hintergrundgrafik angepasst werden, damit die Links besser lesbar werden. Dies solltet ihr individuell in Abhängigkeit der gewählten Farben beachten.
Experimentiert also ruhig noch etwas mit Garnets Anleitungen aus der PI-Fundgrube, bis ihr euren passenden Button-Style gefunden habt.
Damit wären wir bereits am Ende unseres vertikalen Basismenüs in Linstenform.
Sofern ihr die Linkbeschriftung nicht per Linktext, sondern ebenfalls per Buttongrafik vornehmt, dann müsst ihr jedem Link eine eigene CSS-Klasse zuweisen. Mit dieser Klasse definiert ihr dann je Link eine Hintergrundgrafik für den normal-, visited- und hover-Zustand. Wie dies funktioniert, findet ihr in dieser Anleitung unter Ziffer 2.
Im nächsten Kapitel wird gezeigt, wie man dieses vertikale Menü in wenigen Schritten zu einem horizontalen Menü verwandelt.