Hierarchische Menüs mit CSS erstellen
Eines der wichtigsten Elemente eines Webauftritts ist das Menü. Das Menü hilft dem Nutzer dabei, sich in komplizierten Seitenstrukturen zurechtzufinden und um schnell an jeden gewünschten Punkt in dieser Hierarchie springen zu können.
Auf vielen Seiten werden immer noch Navigationsmenüs verwendet, welche vollständig auf JavaScript aufbauen und bei ausgeschaltetem JavaScript nicht mehr funktionieren. Solche Seiten sind dann für Nutzer mit Behinderungen meistens nicht mehr bedienbar.
Das barrierefreie CSS Menü
In diesem Beitrag möchte ich euch zeigen, dass man Menüs auch auf behindertengerechte und barrierefreie Weise erstellen kann. Ziel ist es ein Menü zu bauen, dass nur auf aktuellen Standards wie HTML und
So sieht das fertige Menü aus
Hier könnt Ihr schon einmal sehen, wie das Menü aussehen wird. (Wird im IE6 als vertikales Menü angezeigt, während es alle modernen Browser als Drop Down Menü angezeigen.)
Dieses Beispiel hat insgesamt vier Ebenden, wobei jede einzelne Ebene auch noch unterschiedlich per
Der HTML Code
Der Aufbau dieses Menüs per HTML erfolgt über verschachtelte unsortierte Listen <ul>. Zur besseren Veranschaulichung könnt Ihr hier den HTML Code betrachten:
Wie man sehen kann, gibt es keine besonderen Tricks. Es handelt sich einfach um ganz normalen standardkonformen HTML Code. Auch ohne CSS kann man dieses Menü bedienen und alle einzelnen Links aufrufen.
Um das Menü aber etwas ansprechender zu gestalten, wird es durch die folgenden CSS Anweisungen in die richtige Form gebracht.
Der CSS Code
Ich werde jetzt nicht ins Detail gehen, wie genau die einzelnen Anweisungen sich auf die Darstellung des Menüs auswirken. Zum besseren Verständnis habe ich ein paar Kommentare in den CSS Code mit aufgenommen. Anmerken möchte ich jedoch, dass ich den letzten Teil nur mit aufnehmen musste, weil sich der IE 6 hier etwas quer stellt und sich nur durch spezielle CSS Anweisungen dazu bringen lässt, das Menü ebenfalls richtig darzustellen. (Wer möchte, kann den IE 6 speziellen Teil natürlich weglassen.)
ul.cssmenu {
position: relative;
display: block;
margin: 0px;
padding: 0px;
}
ul.cssmenu ul {
position: relative;
display: none;
}
ul.cssmenu li {
position: relative;
display: inline;
float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 20px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 20px;
}
ul.cssmenu li:hover > a {
background-color: #666666;
color: #FFFFFF;
font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
position: absolute;
top: 20px;
left: -40px;
display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
top: 0px;
left: 110px;
}
ul.cssmenu li li a {
width: 150px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
color: #000000;
background-color: #e4e4e4;
}
ul.cssmenu ul a {
background-color: #d4d4d4;
}
ul.cssmenu ul ul a{
background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
background-color: #b4b4b4;
}
/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
_text-indent: 10px;
}
ul.cssmenu ul {
_display: inline;
_margin-left: 0px;
_text-indent: 20px;
}
ul.cssmenu ul ul {
_text-indent: 30px;
}
ul.cssmenu ul ul ul {
_text-indent: 40px;
}
ul.cssmenu li {
_float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
_text-align: left;
_width: 150px;
}
ul.cssmenu a:hover {
_font-weight: bold;
_background-color: #666666;
}
Fazit
Wie Ihr sehen könnt ist es gar nicht so schwer auch ohne JavaScript ein ansprechendes Menü zu gestalten. Das hier gezeigte Beispiel lässt sich natürlich leicht durch andere Farben oder Hintergrundgrafiken per CSS noch weiter verschönern und an die eigenen Bedürfnisse anpassen. Alle modernen Browser sollten damit zurecht kommen - selbstverständlich auch Googles neuer Chrome Browser.