CSS Navigationsleiste
Horizontale Navigation mit Rollover-Effekt ohne Javascript
Die Navigation gehört zu den wichtigsten Bestandteilen einer Website und sollte sorgfällig geplant werden. Natürlich sollte sie sich optimal ins Layout einfügen. Ungeordnete Listen <ul> eignen sich sehr gut für diesen Zweck. Die Listenpunkte sind besonders gut dafür geeignet die Anchor-Tags aufzunehmen und diese durch Css zu formatieren. Durch Untergeordnete Listen lassen sich sehr einfach Unterebenen einrichten, die ohne weitere Formatierungen sofort optisch erkennbar sind. Durch Css-Formatierungen lassen sich auch sehr anspruchsvolle Layouts umsetzen, hinter denen keine Html-Liste vermutet wird. Sogar Bilder lassen sich als background-images integrieren ohne die Barrierefreiheit einzuschränken oder die Suchmaschinen am crawlen zu hindern.
Eine flache Ebenenstruktur ist anzustreben. Nicht immer ist dies jedoch möglich. Umfangreiche Webpräsentationen können drei und mehr Ebenen umfassen. Es ist jedoch kein Problem mehr als 30 Unterseiten in Menüs auf der Startseite zu verteilen. So dass nicht mehr als eine Ebene nach der Startseite benötigt wird. Es ist also hilfreich vorab zu klären wieviele Unterseiten erstellt werden, ob die Seitenzahl längere Zeit bestehen bleiben wird oder ob sich die Anzahl der Seiten sehr oft ändern wird. Lesen Sie auch diese Navigationstipps.
Navigationsmenü - Hauptmenü - eine Ebene
Im folgenden Beispiel stellen wir Ihnen ein sehr einfach zu realisierendes Navigationsmenü vor, welches gut als Hauptmenü eingesetzt werden kann. Es kommt ohne Javascript und Images aus und erzeugt trotzdem einen Rollover-Effekt und den Eindruck von Navigationsbuttons. Dieses Menü ist barrierefrei und suchmaschinenfreundlich. Es ist darüber hinaus sehr einfach an die meisten Layouts anzupassen. Dem Border, der die Liste umschließt, haben wir eine feste Breite von 44em (704px) zugewiesen. Dadurch werden bei zu kleinem Browserfenster Scrollbars eingeblendet. Wenn Sie die Breite weg lassen, kann das Menü je nach Größe des Browserfensters umbrechen. Die Listenpunkte haben ebenfalls eine feste Breite erhalten. Ohne diese Angabe richtet sich die Breite nach der jeweiligen Textlänge der Buttonbeschriftung.
Binden Sie die Navigation per Php-include in Ihre Seiten ein, kann es sinnvoll sein die Style-Anweisungen nicht in ein separates Stylesheet auszulagern. In diesem Fall vergessen Sie bitte nicht den einleitenden und abschließenden style-tag (<style type="text/css"></style>) zu notieren. Sie sollten diese Anweisungen dann im <head> der Seiten unterbringen.
Werden in unserem Beispiel weitere Listenpunkte mit Verweisen eingefügt bricht die Navigation in eine neue Zeile um.
div#border {
width:44em; padding:0.5em;
margin-left:auto; margin-right:auto;
text-align:center; /* Zentrierung IE6 */
border:1px solid black;
background-color:#90201C;
}
* html div#border {
width:45.6em; /* Breite MS-Boxmodell IE 5.x */
w\idth:44em; /* Breite IE 6 standardkonformer Modus */
}
ul#nav-menue {
margin:0; padding:0; text-align:center;
}
div#border div {
clear:left;
}
ul#nav-menue li {
list-style:none; float:left;
width:6em; padding:0.13em;
}
* html ul#nav-menue li {
width:6.26em; /* Breite MS-Boxmodell IE 5.x */
w\idth:6em; /* Breite IE 6 standardkonformer Modus */
}
ul#nav-menue a{
display:block; text-decoration:none;
padding:0.3em 0.2em; height:2em;
font-weight:bold; font-size:0.875em; color:#FFC;
background-color:#90201C; text-align:center;
border: 1px solid #000;
border-left-color: #ffc; border-top-color: #ffc;
}
ul#nav-menue a:visited {
color:#ffc; background-color:#600;
}
ul#nav-menue a:hover {
color:#ffc; background-color:#600;
border-color:#ffc;
border-left-color:#000; border-top-color:#000;
}
/* Die folgende ungeordnete Liste im Body, dort wo die Navigation erscheinen soll notieren. */
<div id="border">
<ul id="nav-menue">
<li><a href="#">Thema 1</a></li>
<li><a href="#">Thema 2</a></li>
<li><a href="#">Thema 3</a></li>
<li><a href="#">Thema 4</a></li>
<li><a href="#">Thema 5</a></li>
<li><a href="#">Thema 6</a></li>
<li><a href="#">Thema 7</a></li>
</ul>
<div></div></div>