Experimente mit Menüs
Standard Menü
Die meisten Webseiten, meine eingeschlossen, verwenden für ein senkrecht angeordnetes Menü normale Links, die jeweils durch einen Zeilenumbruch <br /> untereinander zu stehen kommen.
<div id="standardmenue"> <a href="#">Seite 1</a><br /> <a href="#">Seite 2</a><br /> <a href="#">Seite 3</a><br /> <a href="#">Seite 4</a> </div>
Menü mit block-formatierten Links
Etwas eleganter und mit dem Vorteil, dass sich der Mouseover-Effekt auf die gesamte Zeile auswirkt, ist es, die Links mit display: block zu formatieren. Dadurch werden sie automatisch unter einander angeordnet.
<div id="blockmenue"> <a href="#">Seite 1</a> <a href="#">Seite 2</a> <a href="#">Seite 3</a> <a href="#">Seite 4</a> </div>
Dazu das Stylesheet, ohne die Formatierung des umgebenden Kastens. Die width-Angabe des display-Blocks ist für den Internet Explorer notwendig.
#blockmenue a {
display: block;
width: 99%;
}
Menü als Liste von Links
Noch eleganter und auch im Sinne eines semantisch korrekten Markups ist es, die
Navigation als das zu kennzeichnen, was sie ist: als eine Liste von Links.
Die standardmäßigen typischen runden
Listen-Markierungen
kann man mit "list-style-type:none" unterbinden oder bei Bedarf durch ein
beliebiges Bild ersetzen.
<ul id="listenmenue"> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> <li><a href="#">Seite 4</a></li> </ul>
Das dazu gehörende Stylesheet sieht dann so aus:
#listenmenue {
list-style-type: none;
}
#listenmenue a {
display: block;
width: 99%;
}
Horizontales Listen-Menü
Auf diese Weise kann man dann auch, ohne den HTML-Code zu verändern, das Menü horizontal anordnen. Das geschieht, indem man die Listen-Items mit display: inline neben einander stellt.
<ul id="horizmenue"> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> <li><a href="#">Seite 4</a></li> </ul>
Die neue Anordnung geschieht ausschließlich im Stylesheet. Um die typischen Listen-Markierungen braucht man sich nicht zu kümmern, sie erscheinen in inline deklarierten Listen nicht.
#horizmenue {
width: 360px;
}
#horizmenue li {
display: inline;
padding: 0px 10px;
}
#horizmenue a {
padding: 2px 8px 5px;
}
Horizontales Menü mit Karteireitern
Jetzt sind es nur noch einige CSS-Angaben, um daraus ein Tab-Menü zu erstellen.
<ul id="tabmenue"> <li><a id="aktuell" href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> <li><a href="#">Seite 4</a></li> </ul>
Das Stylesheet dazu sieht ohne die Farbangaben folgendermaßen aus:
#tabmenue {
padding: 3px;
border-bottom: 1px solid #222;
}
#tabmenue li {
display: inline;
}
#tabmenue li a {
padding: 3px 1em;
margin-left: 3px;
border: 1px solid #777;
border-bottom: 0;
text-decoration: none;
}
#tabmenue li a#aktuell {
padding-bottom: 4px;
border-bottom: 1px solid #fc0;
}
Weitere Beispiele
Listamatic - One List, many Options
shows the power of CSS when applied to one simple list using samples from Eric Meyer,
ProjectSeven, SimpleBits, Jeffrey Zeldman and others.
List-o-matic - accessify.com
A Tool that helps you create CSS-styled Navigation based on List Items.
Simplified CSS Tabs - Dan Cederholm
Eine Browser übergreifende Lösung um die untere Linie im aktiven Tab verschwinden
zu lassen.
Workshop Menue-Variationen - P@ng
Beispiele für Menüs, viel schöner gestaltet als meine, die ja aber auch nur
das Prinzip darstellen sollen.
Uckermark erleben
Eine schöne Website mit Tabreitern als Hauptnavigation und senkrechtem Zweitmenü.
So lassen sich umfangreiche Websites übersichtlich navigieren.
Accessible Image-Tab Rollovers - Dan Cederholm
Tabs mit Grafiken statt Text, die sich beim Überfahren mit der Maus ändern,
haben normalerweise den Nachteil, dass die Bilder beim Hovern erst geladen werden
müssen, der Effekt sich also entsprechend verzögert. Eine raffinierte Methode
das zu umgehen hat Dan Cederholm nach einem Trick von
Pixy realisiert.
Völlig ohne JavaScript und auch für reine Textbrowser geeignet.
