
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 anzeigen Dateien 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.
Sehr cool, Chris.
Bei dieser Art von jQuery-Menüs, müssen wir uns Sorgen machen, wenn der Benutzer JavaScript deaktiviert hat? Was passiert dann?
Funktioniert super, Chris – danke für die Infos!
Ich denke, ich werde für die Version ohne hoverIntent stimmen. Das träge Gefühl mindert das Menü meiner Meinung nach. Ich schätze, es hängt aber von der Mausgeschwindigkeit der Benutzer ab! Danke, ich werde das wahrscheinlich in Zukunft verwenden.
Gute Arbeit, ich weiß, dass dies ein „einfaches“ Dropdown-Menü ist, aber mein einziger Punkt, den ich bedenken möchte, ist:
Einige Menüpunkte gehen 3 Ebenen tief, z.B.: „Game-practice Equiptment >> Soccer >> Soccer Goals“. Dies befindet sich praktischerweise in der Mitte des Bildschirms. Jedoch – wenn der LETZTE <li>-Punkt (books-videos) 3 Ebenen tief geht, dehnt sich das Menü nach links aus und verursacht horizontales Scrollen :-( (selbst bei 1024×768).
Ich bin mir nicht sicher, wie schwierig es wäre, die Dropdowns nach links (statt nach rechts) ausfahren zu lassen, wenn das Menü horizontales Scrollen verursacht?
Wären nach links ausfahrende Menüs nicht das Gegenteil von dem, was der Benutzer erwarten würde, wenn er sie benutzt? Ich weiß, dass es mich stören würde, da es sich wie Lesen von rechts nach links anfühlt (oder umgekehrt für Sprachen, die tatsächlich von rechts nach links lesen ;-)).
Könnte man diesen letzten Abschnitt des Menüs nicht einfach nicht verschachtelt lassen oder besser noch, das Hauptmenü nicht so weit nach rechts ragen lassen? Ich habe diese Funktionalität auch bemerkt, als ich unter meinem Mac das Browserfenster geändert habe, während ich diesen Code getestet habe... aber alles hat seine Grenzen.
Tolles Menü, Chris! Haben Sie schon WordPress-Plugins geschrieben, die jQuery verwenden?
Danke!
Genau das, was ich brauchte, aber wenn Sie früher veröffentlicht hätten, hätte ich viele Stunden gespart xD
Danke, danke, danke! Das ist großartig! Der Code ist so viel einfacher als bei vielen anderen.
Superfish ist spitze!
Gute Arbeit.
Ich habe vor einem Monat nach einer solchen Lösung gesucht und es ist verrückt, aber wahr, dass man keine einfachen Dropdowns finden kann.
Ausgezeichnete Arbeit! Danke fürs Teilen.
Gute Arbeit, schön gemacht : )
Ich denke, Suckerfish ist der führende Standard für Dropdown-UL-Menüs. Aber Sie haben es gerade perfektioniert, indem Sie Kinderelemente von Kinderelementen hinzugefügt haben.
(Sind es Kinder oder Kindern in CSS? :p)
Ich habe in IE6 eine horizontale Scrollleiste erhalten.
Chris, das ist wie alles andere, was ich von Ihnen gesehen habe, ausgezeichnet. Ich möchte Ihnen auch für die Podcasts danken, hervorragender Inhalt zum Lernen.
Wow, 65 KB unnötiges JavaScript, wenn dies leicht mit CSS erreicht werden kann http://www.cssplay.co.uk/menus/dd_valid.html
Sie behaupten, nur CSS zu verwenden, und doch scheint es, dass Sie XHTML verwenden müssen. Was ist der logische Unterschied zwischen der Verwendung von XHTML oder jQuery zur Unterstützung von CSS? Dieses Menü ist elegant in seiner Einfachheit. Aber der Autor hier hat Manieren und „markiert“ nicht auf Ihrer Webseite.
Sie machen doch Witze, oder? Wie sonst wollen Sie eine Website oder ein Dropdown-Menü erstellen, ohne xhtml? Wenn etwas als reine CSS-Lösung bezeichnet wird, bedeutet das nicht wörtlich, dass es nur CSS ist, xhtml ist die grundlegende Struktur jeder Website. Die Tatsache, dass Sie den Vorteil einer reinen CSS-Lösung gegenüber der Einbindung von 65 KB aufgeblähtem JavaScript nicht erkennen, beängstigt mich und lässt mich denken, dass Sie keine Ahnung haben, wovon Sie sprechen.
Chris, du bist der Beste!
Ich mag es, gute Arbeit, aber persönlich habe ich genug von Dropdown-Menüs. Ich bevorzuge eine schöne große Fußzeile, die all diese „zusätzlichen“ Inhalte enthält. Es gibt KEINE Browser-/Barrierefreiheitsprobleme und es sieht moderner aus. Stimmen Sie (oder jemand anderes) zu?
Ich habe an etwas sehr Ähnlichem gearbeitet, aber einige Probleme mit jQuery hover() und Firefox (sowohl 2 als auch 3) festgestellt, bei denen, wenn man mit der Maus über das Menü fährt und es Textfelder oder Textbereiche überdeckt und dann das Menü über einem dieser Elemente verlässt, das Menü nicht verschwindet. Es bleibt bestehen.
Kleines Video: http://screencast.com/t/TH2D2cdx81
Ticket für jQuery: http://dev.jquery.com/ticket/3730
Ich habe festgestellt, dass ich, um das zu umgehen, im Grunde zusätzliche CSS geschrieben habe, um die :hover-Pseudo-Klasse für diese Objekte zu verwenden, und dann mein JS aktualisieren musste, um eine Browser-Erkennung durchzuführen. Diese Option gefällt mir nicht, aber wir verwenden viele Formularelemente und es ist wirklich ärgerlich, wenn die Menüs nicht verschwinden!
Ich sehe das gleiche Problem mit Ihrem Code, wenn ich ihn herunterlade und einige Textfelder darunter hinzufüge.
Dropdown-Menüs sind auf manchen Seiten in Ordnung, aber ich glaube nicht, dass sie für alle geeignet sind...
Sehr schön, danke!!
Toller Beitrag, Chris, danke. Ihre Tutorials sind für uns, die noch lernen, von unschätzbarem Wert.
Es geht auch mit reinem CSS.
Ich hasse Dropdown-Menüs auf Websites immer, aber schönes Tutorial, danke :)
Jeden Tag eine neue Überraschung…
Danke, Chris…
Schade, dass grundlegende Barrierefreiheit fehlt (wie die Navigation mit der Tab-Taste in Untermenüs), aber es ist ein tolles Menü, einfach für jede Website einzurichten.
Hallo Chris,
Kann dem Artikel nicht zustimmen.
Das ist CSS-Tricks, keine jQuery-Überschreibungen.
Seien wir ehrlich, es gibt bessere rein CSS-basierte Dropdown-Methoden, wenn auch weniger einfach, und JavaScript wird benötigt, um IEv6 vollständig konform zu machen.
Aus Sicht der Barrierefreiheit sollte der Artikel einen Hinweis darauf enthalten, dass alle Hauptnavigationslinks auf eine Seite verweisen, auf der die erweiterten (Dropdown-)Links vollständig und ohne JavaScript-Anforderung aufgelistet sind.
Ich werde Ihnen vergeben, wenn Sie auch die reine CSS-Version bereitstellen.
Ich bin froh, dass Sie einen solchen Beitrag geschrieben haben. Es gibt viele Dropdown-Beispiele, aber nicht alle sind gut. Auch wenn dieses einige Probleme hat, glaube ich, dass es mit Fehlerbehebungen bald perfekt sein wird. Ich werde es sofort testen :)
Für die zusätzlichen Zeilenumbrüche in IE6 kann dies behoben werden, indem Sie den Whitespace in Ihrem Markup entfernen.
Zum Beispiel,
<li></li>
<li></li>
kann geschrieben werden als
<li></li
><li></li
>
und es entfernt den Zeilenumbruch. Es sieht komisch aus, ist aber gültig und funktioniert.
Wirklich nützlich, vielen Dank!
jQuery hilft sehr, wenn man erstaunliche Dinge mit unseren Websites machen muss…
Hallo!
Ich habe ein Problem damit, dass mein ul-Menü der Ebene 2 UNTER MEINEM Inhalt erscheint.
Ein Screenshot: http://i43.tinypic.com/23sg4zk.gif
Wie löse ich das?
Ich habe das gleiche Problem.
http://i40.tinypic.com/2epu0wn.gif
Chris Dornfeld schreibt
Die Lösung ist die Hinzufügung dieser CSS-Regel
Ohne den z-index werden andere Ebenen auf der Seite, die Positionierung verwenden
über den Menüs erscheinen.
Dieses Menü ist fantastisch
Ich erlebe seltsame Dinge, vielleicht hat jemand eine Antwort darauf. Bei diesem Menü erscheint das Untermenü über einem Flash-.swf. Es ist kein Problem mit Transparenz, da ich die wmode bereits auf transparent gesetzt habe. Aber wenn man das Menü auf einem Mac (nur) in Safari v.3 und 4 sowie FF v.4 betrachtet, verhält sich das Menü sehr seltsam, Teile verschwinden beim Überfahren und so weiter. Keine Probleme mit Browsern auf einem PC.
Hier ist der Link, irgendwelche Ideen?
http://geigercomputers.com/pm/projects/pbgroup/wood-pivot-window.html
Das ist eine sehr elegante Lösung, die dennoch das CSS vereinfacht. Gut gemacht und danke, Chris.
Danke für die schönen Menüs! Ich verwende jQuery in all meinen Projekten, daher ist diese Quelle wirklich gut zu wissen! *Danke!*
Ich stecke in der Bibliothek fest... Ich sehe Ihr neues Design in IE6 und es sieht immer noch großartig aus... gute Arbeit.
Hallo Chris, danke für deinen Artikel. Ich brauche deine Hilfe. Ich möchte, dass mein Untermenü eine Hintergrundbreite von 100 % hat, aber ich möchte nicht, dass es die „page-wrap“-Breite von 800 Pixel überschreitet.
http://www.surplus-inventaire.com/mel/SimplejQueryDropdowns/index-hoverIntent.html
Ich brauche mein Untermenü zu 100 %, aber innerhalb der Breite in einem blauen Rahmen.
Entschuldigung für mein Englisch.
Hallo!
Das ist absolut großartig und wird gut auf einer neuen Website funktionieren, die ich gerade entwerfe.
Allerdings habe ich ein Problem, das mich WIRKLICH frustriert!
Können Sie mir sagen, wie ich das Dropdown-Menü in eine Tabelle einfüge und wie ich es in der Mitte der Seite zentriere? Jedes Mal, wenn ich es unter einem Bild platziere, das sich in einer Tabelle befindet und zentriert ist, verschiebt sich das Dropdown-Menü auf die linke Seite der Seite. Ich vermute, es ist etwas in der CSS, das ich ändern muss... aber was?
Jede Hilfe wäre dankbar.
Danke!
Tolle Arbeit, dass Sie das gemacht haben. Schade, dass Sie sich nicht die Mühe gemacht haben, eine Readme einzufügen oder Ihren Code richtig zu kommentieren.
Es ist wirklich tolle Arbeit. Ich benutze es in meiner Anwendung. Das einzige Problem, auf das ich gestoßen bin, war, dass, wenn ich position:relative nach Belieben einstelle, die Dropdown-Elemente hinter dem Datenbereich und der Seitenleiste versteckt werden. Und wenn ich position:absolute einstelle, habe ich Platzierungsprobleme (Menü), da alle meine anderen Elemente relativ sind.
Gibt es dafür eine Lösung? Bitte lassen Sie es mich wissen!
Vielen Dank für Ihre Hilfe.
Es scheint, dass Ihre Demo mit deaktiviertem JavaScript funktioniert, aber wenn ich sie auf einer lokalen Testseite verwende und JavaScript deaktiviere, funktioniert sie nicht. Was könnte ich falsch machen?