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.