DropDown-Menü - CSS oder JavaScript?

15.02.2012 11:47 Uhr

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!

4 Antworten

#1

15.02.2012 12:30 Uhr

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

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

#2

15.02.2012 18:26 Uhr

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.

#3

16.02.2012 12:47 Uhr

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.

 

#4

21.02.2012 11:23 Uhr

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.

Ähnliche Fragen



Datenschutzerklärung · Impressum