Dynamische Menü ohne Javascript mit CSS
Viele möchten sicher ein dynamisches ausklappendes Menü erstellen. Dafür gibt es mehrere Möglichkeiten: Javascript, Flash, Java, ...
Nichts davon ist barrierefrei. Hier möchte ich zeigen, wie man ein aufklappendes dynamisches Menü ohne Javascript erstellen kann.
<html>
<head>
<style type="text/css"><!--
/* Linkgestaltung */
a {
color:#003C9D;
Text-Decoration:underline;
}
a:hover {
color:#F60;
}
/* Menü */
.menu1 {
background: beige;
border: 1px solid #000;
width: 120px;
padding: 2px;
}
.anchor {
position: relative;
display: inline;
}
.m1 {
display: none;
position: absolute;
z-index: 10;
margin-top: -15px;
width: 165px;
}
.m1 li {
background: beige;
padding: 2px;
display: block;
width: 165px;
border: 1px solid #000;
}
.menu1:hover .m1 {
display: block;
}
--></style>
</head>
<body>
<div class="menu1" onclick='void(0)'>
<a>See -></a>
<div class="anchor">
<ul class="m1">
<li><a href='?l=bsp1'>Beispiel 1</a></li>
<li><a href='?l=bsp2'>Beispiel 2</a></li>
</ul>
</div>
</div>
</body>
</html>
Im Bereich "Linkgestaltung" wird das allgemeine Aussehen eines Links definiert.
.menu1 definiert den Kasten um einen Hauptmenüpunkt.
.anchor wird zu einem Positionierungspunkt. Da hier ein position-Befehl verwendet wird, bezieht sich das nachfolgende absolute Element auf diesen Punkt.
.m1 ist dieses absolute Element. Es ist generell unsichtbar und durch die absolute Positionierung und den hohe z-index steht es in der Luft im Vordergrund. Es ist außerdem der Container für die Links des Untermenüs.
.m1 li entspricht der Definition von .menu1.
.menu1:hover .m1 ist der Trick: beim Berühren mit der Maus wird die sonst unsichtbare Box sichtbar. Ein dynamisches Menü ist entstanden. Und das völlig barrierefrei.
