DropDown-Menü - CSS oder JavaScript? 
1
Hallo Webworker,
gerade bin ich mal wieder dabei ein DropDown-Menü umzusetzen.
Jedes Mal stelle ich mir dabei die Frage, ob ich das Ganze mit purem CSS oder als Mischform mit JavaScript, respektive jQuery, umsetze.
Fangen wir mal mit dem HTML an:
<ul class="navi"> <li><a href="#">Haupt 1</a> <ul class="subnavi"> <li><a href="#">Unter 1, 1</a></li> <li><a href="#">Unter 1, 2</a></li> </ul> </li> <li><a href="#">Haupt 2</a> <ul class="subnavi"> <li><a href="#">Unter 2, 1</a></li> <li><a href="#">Unter 2, 2</a></li> </ul> </li> </ul>
Was würdet ihr nun bevorzugen, die Steuerung des Hovers via CSS
ul.navi li ul.subnavi {
display: none;
}
ul.navi li:hover ul.subnavi {
display: block;
}
oder eher jQuery?
Mich würde da eure Präferenz interessieren und auch warum ihr einen bestimmten Weg bevorzugt.
Bin gespannt!
bearbeitet am 15.02.2012
Antworten
1
definitiv CSS!! zumindest die "Ansteuerung" der Elemente....
Warum? Darum: http://mizine.de/suchmaschinenoptimierung-internet/css-div-hide-mega-flyout-menu-ranking/
1
Ich habe es immer mit der Vorlage von Son of a Suckerfish Dropdown umgesetzt. Hat immer super funktioniert und ist meiner Meinung nach die populärste Lösung.
Diese Lösung kombiniert CSS mit ein wenig JavaScript.
0
Meiner Meinung nach kommt es ganz auf den Typ des Menüs an.
Sollen die Submenüs beim hovern oder klicken angezeigt werden; mit oder ohne Animation; mit oder ohne Verzögerung (beim hover); soll es auch auf Tablets/Smartphones funktionieren; ...
Für ein ganz einfaches Menü, das beim hovern "einfach nur" angezeigt werden soll, würde ich vermutlich CSS bevorzugen.
Bei Verzögerung bzw. Animationen setze ich eher auf JQuery. Zwar könnte man das auch mit Browserspezifischen CSS Eigenschaften (-<vendor>-transition) erreichen, aber das können eben nicht alle Browser. Mit JQuery kann man zusätzlich z.B. prüfen, ob noch genug Platz auf dem Bildschirm ist usw.
Generell bevorzuge ich es auch, die Submenüs absolut zu positionieren und mit
top: -9999px;
left: -9999px;zu "verstecken", anstatt mit
display: none;Soweit ich weiß, ist es für (einige) Screenreader schwierig mit display: none; umzugehen.
0
Mittlerweile bevorzuge ich die reine CSS-Variante. Dank den CSS-Transitions hat man auch eine schöne Palette von Animationseffekten zur Hand.
Falls nötig und vom Kunden gewüscht baue ich für ältere Browser einen Workaround (meist mit JS). Der modernizr nimmt mir da schon eininges an Arbeit ab.
Deine Antwort
Bereits registriert? Bitte logge dich vor dem Antworten ein.
Von Usern veröffentlichte Inhalte stehen unter der
Schöne Anleitung, danke Tilo.
– timo_m am 16.02.2012