Simple jQuery Dropdowns

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Es gibt bereits viele Dropdown-Menüs. Ich versuche hier nicht, das Rad neu zu erfinden, aber ich wollte versuchen, etwas leicht anderes zu machen, indem ich sie so einfach wie möglich halte. Sehr abgespeckter Code und minimales Styling, aber trotzdem alle typischerweise benötigten Funktionen. Hier sind die Features:

  • Browserübergreifend kompatibel (sogar IE 6)
  • Mehrstufig und behält den „Pfad“ bei
  • Sehr minimales Styling (einfach anzupassen)
  • Sehr minimales JavaScript (kurzes Stück jQuery)

 

Demo anzeigenDateien herunterladen

 

Ich denke, es ist ganz gut gelungen. Alle meine Tests zeigen, dass sie recht gut funktionieren. Bitte lassen Sie mich wissen, wenn Sie Probleme feststellen, und wir können versuchen, diese zu beheben. Es war eigentlich nur eine CSS-Anpassung für IE nötig, nämlich die Verwendung von inline-block für die Listenelemente des Untermenüs, um den seltsamen Abstand durch eine Pseudo-Zeilenumbrüche zu verhindern, den IE gerne macht.

Jede „Ebene“ ist in der CSS-Datei klar gekennzeichnet, sodass es ziemlich einfach sein sollte, zu identifizieren, was was ist, und Ihr eigenes benutzerdefiniertes Styling anzuwenden.

hoverIntent

Die Demo und der Download werden mit zwei „Versionen“ geliefert, eine mit hoverIntent und eine ohne. Ich konnte mich nicht entscheiden, welche mir besser gefiel, also habe ich beide drin gelassen. Einerseits ist hoverIntent gut, weil es verhindert, dass sich die Menüs öffnen, wenn man nur schnell mit der Maus darüberfährt (als ob die Maus sie gerade gestreift hätte, man aber offensichtlich nicht die Absicht hatte, das Menü zu benutzen). Andererseits fühlt sich das Menü dadurch etwas träge an.