Horizontale Navigationsmenüs
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Aus einer ungeordneten Linkliste soll ein horizontales "Karteireiter"-Navigationsmenü erzeugt werden. In der nächsten Abbildung sehen Sie die Standarddarstellung, in der übernächsten Abbildung das fertige Menü.
Abbildung: Die Standarddarstellung der Links.
Abbildung: Ein horizontales "Karteireiter"-Menü.
Lösung
Zu Beginn brauchen Sie eine korrekt angelegte ungeordnete Liste mit Links:
<div id="navsite">
<h5>Navigationsmenü:</h5>
<ul>
<li><a href="/">Startseite</a></li>
<li><a href="/about/">Über uns</a></li>
<li><a href="/archives/">Archive</a></li>
<li><a href="/writing/">Schreiben</a></li>
<li><a href="/speaking/" id="current">Sprechen</a></li>
<li><a href="/contact/">Kontakt</a></li>
</ul>
</div>Danach legen Sie die CSS-Regeln für das Navigationsmenü fest. Dabei sollte display für alle Listeneinträge den Wert inline haben:
#navsite h5 {
display: none;
}
#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navsite ul li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #dde;
text-decoration: none;
}
#navsite ul li a:link {
color: #448;
}
#navsite ul li a:visited {
color: #667;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #aae;
border-color: #227;
}
#navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
}Diskussion
Im ersten Teil der Lösung wird die Überschrift für CSS-fähige Browser verborgen, weil die visuelle Darstellung bereits verdeutlicht, dass es sich bei dem Design um Navigationslinks handelt:
#navsite h5 {
display: none;
}In der nächsten Regel werden die Innen- und Außenabstände für das ul-Element definiert. Die Linie unter dem Menü wird über die Eigenschaft border-bottom definiert (siehe nächste Abbildung):
#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #669;
font: bold 12px Verdana, Helvetica, Arial, sans-serif;
}
Abbildung: Die Linie an der Unterseite des Navigationsmenüs.
Damit die horizontale Navigation funktioniert, muss für die Listeneinträge die Regel display: inline verwendet werden:
#navsite ul li {
list-style: none;
margin: 0;
display: inline;
}Anstatt die Listeneinträge übereinander anzuordnen, wie es standardmäßig der Fall ist, werden die Einträge nun dargestellt, wie es sonst bei Text, Bildern und anderen Inline-Elementen der Fall ist (siehe folgende Abbildung).
Abbildung: Die horizontal angeordnete Liste.
Mit Hilfe der Eigenschaft border in der folgenden CSS-Regel erreichen wir die Darstellung der Links in Form von Karteireitern (siehe nächste Abbildung):
#navsite ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #669;
border-bottom: none;
background: #ccf;
text-decoration: none;
}
Abbildung: Die fertigen Karteireiter.
Bei der Eigenschaft border handelt es sich um eine Kurzschrift-Eigenschaft, die den einzelnen Link mit einem durchgehenden, einen Pixel breiten Rahmen umgibt. Direkt auf border folgt hier jedoch die Eigenschaft border-bottom, mit der festgelegt wird, dass die Unterseite des Rahmens nicht angezeigt werden soll. (Der Wert von border-bottom überschreibt aufgrund der Reihenfolge der Regeln den zuvor mit border festgelegten Wert.)
Nachdem der Rahmen definiert ist, widmen wir uns nun den Farben für die Links und den Rollover-Effekt:
#navsite ul li a:link {
color: #339;
}
#navsite ul li a:visited {
color: #666;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #aae;
border-color: #336;
}Zum Schluss definieren wir die Darstellung des Links, der auf die gegenwärtig ausgewählte Seite (current) verweist. Diese Stildefinitionen werden auf den Link angewandt, der auf die gerade vom Benutzer betrachtete Seite verweist (siehe nächste Abbildung):
Abbildung: Darstellung des Links für die gerade ausgewählte Seite.
#navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
}| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln