DropDown-Menü - CSS oder JavaScript? Frage DropDown-Menü - CSS oder JavaScript? zu Favoriten hinzufügen

Daumen hoch 2 Daumen runter

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


Diese Antwort als GUT bewerten 2 Diese Antwort als SCHLECHT bewerten

definitiv CSS!! zumindest die "Ansteuerung" der Elemente....

Warum? Darum: http://mizine.de/suchmaschinenoptimierung-internet/css-div-hide-mega-flyout-menu-ranking/

Diese Antwort als GUT bewerten 1 Diese Antwort als SCHLECHT bewerten

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.

 

Schöne Anleitung, danke Tilo.

timo_m am 16.02.2012
Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

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.

Diese Antwort als GUT bewerten 0 Diese Antwort als SCHLECHT bewerten

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.

Oh, der modernizr sieht sehr interessant aus ... Danke Kili

timo_m am 21.02.2012

Deine Antwort

Registrierter User Bereits registriert? Bitte logge dich vor dem Antworten ein.

Deine Daten