Drop-Down-Menü mit CSS und ohne JavaScript
Früher waren sie voll »in« – Drop-Down-Menüs, realisiert mit viel JavaScript und drumherum. Dass es auch ohne viel Tamtam und nur mit CSS und HTML funktioniert, zeigt ein Artikel auf pixelspread.
Die Idee ist schnell erklärt: Eine Liste wird erstellt, dessen Punkte per display: none; beim Aufrufen der Website versteckt sind. Sobald die Liste mit der Maus »berührt« wird, werden die Unterpunkte eingeblendet. Und zwar per #menu ul:hover .item{ display: block; }.
Scheint in gängigen Browsern gut zu funktionieren und ist mal eine schöne und leichte Alternative, wenn ein Drop-Down-Menü zum Einsatz kommen soll.
Artikel: »CSS Drop Down Menu«
Demo: »css drop down demo«
Leider funktioniert dieses nicht im IE (6)
Gruss Fred
Korsti: Der Suckerfish sagt Dir nix? Das ist doch eher DIE Referenz für so ein Aufklappmenü.
Fred: Es gibt auch Lösungen für den IE6: http://www.cssplay.co.uk/menus/final_drop.html
Die Arbeitsweise gefällt mir zwar nicht (aufgeblähter Code&Co), für den IE würde ich dann das Javascript (beim Suckerfish dabei) bevorzugen.
Sorry, für mein Geschluder mit den Links, habe vergessen den ersten zu schliessen ^^
@mike: Der Suckerfish sagt mir schon was, hab ich schonmal gelesen. Allerdings mag ich Drop-Down-Menüs eigentlich nicht so, von daher habe ich mich nicht näher damit beschäftigt.
Bin nur auf den verlinkten Artikel gestoßen und wollte die Methode hier »sharen«.
Ich kann auch cssplay.co.uk weiterempfehlen! Dir dort gezeigten Menüs lassen sich sehr sehr gut erweitern oder abändern. Hab damit schon einige Kundenseiten in der Agentur realisiert…
Und den aufgeblähten Code kann man mit ein wenig Know How verkleinern ;) deinen Link (@Marcel) schau ich mir aber trotzdem an
Ah! Cool, das kannte ich ausnahmsweise noch nicht ;-)