jQuery für Suckerfish Dropdowns
Ein gutes CSS-Dropdown-Menü ist eine feine Sache. Umso mehr, wenn es barrierearm daher kommt und in standardkonformen Browsern kein JavaScript benötigt.
Die Suckerfish Dropdowns von Patrick Griffiths und Dan Webb gehören zu dieser Gruppe erfreulich durchdachter CSS-Navigationen. Ein Artikel bei A List Apart erklärt den Aufbau ausführlich, so dass ich mich hier den unwichtigen Details zuwenden kann. ;-)
JavaScript-Extrawurst für den IE6
Ganz ohne JavaScript kommen auch die Suckerfish Dropdowns nicht aus. Internet Explorer 6 ist bekanntlich so beschränkt wie verbreitet und dadurch Ziel mancher Sonderbehandlung.
Das Ausklappen der Untermenüs, das überall sonst mit reinem CSS funktioniert (li:hover ul{ display: block; }), muss für den IE6 mit JavaScript bewerkstelligt werden. Da er die CSS Pseudoklasse :hover nicht voll unterstützt, wird eine inhaltlich identische CSS-Klasse .over beim JavaScript-Event onmouseover zugewiesen.
Griffiths und Webb verwenden dazu folgendes Script:
… und noch einmal mit jQuery
Wie regelmäßige Leser wissen, arbeite ich sehr gerne mit jQuery.
Bei Websites, die jQuery aus anderen Gründen bereits verwenden, erscheint mir das original Suckerfish-Skript ein wenig plump. Eleganter geht es so:
Damit lässt sich der IE6-Fix für die Suckerfish Dropdowns genauso verwenden wie jede andere jQuery-Methode:
Update: Ein Suckerfish-Menü mit mehr Komfort und netten Effekten kann man mit dem jQuery-Plugin “Superfish” sehr einfach realisieren. Die vielen Einstellungsmöglichkeiten machen richtig Spaß!
Weitere Beiträge, die dich interessieren könnten:
Kommentare
Noch keine Kommentare.
Kommentieren