Navigationsmenü

Ziel

Aufbau eines Navigationsmenüs ohne den Einsatz von JavaScript und ohne Bilder vorauszuladen. Außerdem soll semantisch korrektes (X) HTML zum Einsatz kommen.

Ergebnis

Die Hauptnavigation wurde rein in HTML mit CSS erstellt. Sie kommt ohne den Einsatz von JavaScript aus. Wird der Mauszeiger über einen Navigationspunkt bewegt, wird der Style a:hover verwendet. Der Effekt dabei wird dadurch erreicht, dass das Hintergrundbild durch Positionsänderung verschoben wird. Die Idee dazu stammt von Petr Stanicek [1] und wurde von Marek Blaha weiter verbessert.

Für Leute mit wenig Zeit ist hier auf dieser Seite der komplette HTML-Code und CSS-Code abgebildet.

Das fertige Beispiel ist entweder links hier auf dieser Seite oder auf der Beispielseite ersichtlich.

Die einzelnen Bereiche werden in den folgenden Tagen nach und nach genauer beschrieben. Dabei wird auf das Vorgehen und den Sinn der Navigationsstruktur und des CSS-Codes eingegangen.

HTML Code

HTML-Sourcecode:

<div id="navigation">
<ul>
<li><a href="http://www.zehelein.de/">Startseite</a></li>
<li><a href="http://www.zehelein.de/">&Uuml;ber...</a></li>
<li id="activenav"><a href="http://www.zehelein.de/">Galerie</a>
<ul>
<li id="activesubnav" ><a href="http://www.zehelein.de/">(X)HTML &amp; CSS</a></li>
<li><a href="http://www.zehelein.de/">Fotos</a></li>
<li><a href="http://www.zehelein.de/">ASP.NET</a></li>
<li><a href="http://www.zehelein.de/">PHP</a></li>
</ul>
</li>
<li><a href="http://www.zehelein.de/">Favoriten</a></li>
<li><a href="http://www.zehelein.de/">Kontakt</a></li>
</ul>
</div>

CSS Code

CSS-Sourcecode:
#navigation ul
{
margin: 0;
padding: 0;
list-style: none;
line-height: 11px;
}
#navigation ul li
{
list-style: none;
border-bottom: 1px solid #a2cbf2;
}
#navigation ul li#activenav
{
border-bottom: 1px solid #fff; /* use background color */
}
#navigation ul li a
{
margin: 0;
display: block;
vertical-align : middle;
text-decoration: none;
padding: 13px 0 13px 5px;
color: #555;
font-weight: bold;
font-size: 82%;
background: #e1f0fe url(images/hovernav_lvl1.gif) repeat-x top left;
}
#navigation ul li#activenav a
{
color: #333;
}
#navigation ul li li#activesubnav a
{
color: #333;
font-weight: bold;
}
#navigation ul li a:hover
{
color: #888;
background-position: 0 -37px;
}
#navigation ul li li
{
border-bottom: 1px solid #f9ce79;
}
#navigation ul li li a
{
font-weight: normal;
background: #fceab9 url(images/hovernav_lvl2.gif) repeat-x top left;
}

Hintergrundbilder

Die zugehörigen Bilder sehen folgendermaßen aus (die obere Hälfte ist im Normalzustand sichtbar, die untere wenn man mit der Maus über den Navigationslink fährt):

Beispielseite

Auf der Beispielseite ist das komplette Beispiel mit allen benötigten Styles abgebildet:
Hovernavigaton

Verweise

[1] http://wellstyled.com/...-rollovers.html