CSS-Pulldown auch für Internet Explorer
Bis heute ist der Artikel “Pulldown Menues” der am meisten gelesene Artikel auf diesem Blog. Im Schnitt wird er etwa 2000 Mal im Monat gelesen. Das Interesse spiegelt sich auch an der hohen Google-Treffer-Quote wieder. Das einzige Problem war bisher die Unterstützung für den Internet Explorer.
Da der IE den :hover-Selektor nur für link-Elemente kennt, konnte das CSS-Pulldown damit nicht funktionieren. Ich hatte als Ausweg ein Script vorgeschlagen, das nur für den IE einen klassischen Javascript-Hover-Effekt vollzieht. Damit funktioniert das theoretisch auch, allerdings tauchten damit einige Probleme mit dem Eventhandling onmouseout auf. Das Ereignis wurde nur unregelmässig vom IE wahrgenommen und führte dazu, dass die Menüs offen blieben.
Weiterer Nachteil: Opera kann eigentlich die CSS-Angaben ordentlich interpretieren, hat aber ein Problem dadurch, dass es im Script als IE erkannt wird..
Lösung
Nun habe ich das Menü so umgebaut, dass es auch im Internet Explorer (<6.0) funktional ist. Den entscheidenden Tip bekam ich von der Seite cssplay (über wer-weiss-was). Dabei geht es darum, jedes Untermenü mit dem Titel in ein Link-Element einzuschliessen. Zwar darf in validem HTML ein Link-Element nicht Kind von einem anderen Link-Element sein, allerdings spricht der Internet Explorer nur das niedrigste DOM-Link-Element an, wenn es zu einem Klick kommt. Damit der Quelltext trotzdem valide bleibt, wird der IE-Zusatz als spezieller Kommentar-Hack ausgeführt:
<li><a href=".." class="iehide">Technik</a>
<!–[if lte IE 6]>
<a href=”..”>Technik
<table><tr><td>
<![endif]–>
Menü-Liste
<!–[if lte IE 6]>
</td></tr></table>
</a>
<![endif]–>
Nun muss der eigentliche Menü-Kopf versteckt werden (da sonst doppelt) und die Pulldown-Funktionalität für den IE erstellt werden. Cssplay schlägt vor, eine eigene stylesheet-Datei für den IE zu erstellen und den link dahin wieder in einem IE-Kommentar einzuschliessen. Es reicht aber auch schon in der normalen stylesheet-Datei folgendes einzutragen (s. Star-HTML-Hack):
* html .menu .iehide, * html .menu ul li a:visited.iehide {display:none;}
* html .menu a:hover ul li a.hide {display:none;}
* html .menu table, .menu tr, .menu td {
margin:0px;
padding:0px;
border:0px;
border-collapse:collapse;
}
* html .menu a table {
display:none;
}
* html .menu a:hover {background:transparent;}
* html .menu a:hover ul,* html .menu a:hover table {display:block;}
* html .menu a:hover ul li a.sub {}
* html .menu a:hover ul li a {display:block;}
* html .menu a:hover ul li a ul {visibility:hidden;}
* html .menu a:hover ul li a:hover {}
* html .menu a:hover ul li a:hover ul {visibility:visible; }
* html .menu a:hover ul li a:hover ul.left {left:-105px;}
Einige Anmerkungen
- Im stylesheet sind bereits Unteruntermenüs vorgesehen, die seitwärts aufklappen. Diese werden derzeit aber nicht auf der Seite verwendet.
- Für
a:hovermuss ein Hintergrund gesetzt werden, sonst funktioniert das Aufklappen aus irgendeinem Grund nicht! - Theoretisch sollte es auch ganz ohne Tabelle funktionieren, tut es aber nicht!
Verwandte Beiträge
Comments
Other Links to this Post
RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URI
By Christian, 14. Dezember 2006 @ 17:14
Das funktioniert (hier auf der Arbeit auch mit dem IE 7) sehr gut.
Leider bin ich selber ein CSS-junior. Gibt es vielleicht die Möglichkeit ein Muster (CSS-Vorlage und HTML-Source) hier einzustellen?
Ich lerne CSS gerade erst kennen und möchte ungern eine Zwischenlösung mit Java-Script erstellen, wenn es auch ohne geht.
Danke für Anregungen und Hilfen
By dennmantau..., 25. Oktober 2007 @ 09:21
Hallo,
möchte nur darauf hinweisen, dass das Pull-Down Menü im IE 7.0 nicht funktioniert. Es ist nicht mehr möglich die einzelnen Untergruppen aufzurufen, da zwischen den einzelnen Punkten eine Leerfläche auftaucht.
Schönen Tag