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.
beitrag is genial,
allerding mit IE 7 hackelt es gewaltig,
erst wenn man die IE6 anmerkungen wegnimmt
stellt der IE7 die erste Zeile komplett richtig dar, die submenüs kan er dann noch immer nicht, werde versuchen mir das morgen / heute einmal anzusehen
vielleicht ist ja jemand schneller
scheint ein bekanntes problem mit dem IE7 zu sein
lg
stefan
Das ist komisch, denn bei mir sieht es im IE7 richtig aus.
Ich verwende allerdings eine Standalone Version von IE7. Möglicherweise rendert diese die Seiten anders?
schöner beitrag, matze. bei solch hierarchischen menüs gibt es ab und zu ärger mit externen dienstleistern, die z.b. per iframe module in corporate websites einbinden (z.b. maps-applikationen per iframe). diese schönen menüs können dann eine menge ärger bereiten – da sie auf seiten mit „externen“ iframes im normalfall nicht mehr über dem iframe erscheinen und somit nicht mehr bedienbar sind (nur hauptlevel). ein guter rat ist von daher immer eine vertikale navi für ebene 2 und 3 im contentbereich vorzusehen und die hierarchische navigation somit zu unterstützen. dies gilt jedoch nur für grössere webprojekte, die auf externe applikationen zugreifen werden.
dies nur als kleine randnotiz.
cheerio
chris
brüchte genau so was nur als vertikales menü
und das bei frames
naja noch ein bisscehn suchen
wer mir helfen will bitte an redwolfhome@arcor.de
Genial! Leider versteh‘ ich von CSS herzlich wenig bis auf das wenige, das ich mir selbst beigebracht habe. Kannst du mir sagen, WIE ich die beiden verbinde???
Danke,
Tada^^
Hi Super Beitrag.
Hab endlich das mit dem Menu schreiben auf eine einfache Art gecheckt. War mir eine riesen hlfe. Danke.
Nach einigen Anpassungen im CSS läuft es jetzt auch wunderbar in allen gängigen Browsern
Danke man echt leicht!(Website entsteht)
Danke
Hi Matze!
Wirklich eine Klasse Anleitung. Sie hat mir schon mal sehr geholfen bei einem Projekt. Jetzt habe ich allerdings versucht erneut ein Projekt damit auszustatten und irgendwie will es nicht gelingen … :-/
Könnte ich Dir mal einen Ausschnitt aus meinem Quelltext schicken?
Hi Wilhelm, kannst du gerne machen.