Ich möchte eine Webseite mit einem Menü-Layout ähnlich wie bei amazon.com erstellen, wo ich verschachtelte Menüs haben könnte und den kleinen Beschreibungstext unter jedem Menüpunkt einfügen könnte.
Bevor ich anfange, das von Grund auf neu zu erstellen, wollte ich sehen, ob es ein jquery-Plugin gibt, das dieses Layout und diese Funktionalität nachahmt
Hier ist ein genaues Doppelgänger Ссылка
Eine schnelle CSS-Lösung, die ich in wenigen Minuten geschafft habe. Bewegen Sie den Mauszeiger über den zweiten Menüeintrag für das Dropdown-Menü.
Es ist ziemlich einfach und geradlinig und Wenn Sie irgendwelche Änderungen hinzugefügt haben, lassen Sie es mich wissen.
Es gibt maaaaany jQuery-Plugins, die das schon machen, aber hier ist ein kleines Plugin, das ich in 10 Minuten eingepackt habe:
%Vor%Ihre Menüelemente bestehen aus einer Sammlung von Objekten (nützlich, wenn Sie das Menü dynamisch mit Daten von einem Service generieren):
%Vor% Hier ist eine Demo: Ссылка .
Es ist anpassbar und kann so angepasst werden, dass es genau wie das auf Amazon aussieht.
P.S. : Ich muss daran denken, dass die css-Rolle in diesem Fall größer ist als die jquery / javascript.
Ben Kamen hat eine gute umgesetzt, die wie das Original funktioniert. Sehen Sie den Code bei Github hier . Er schrieb einen interessanten Beitrag in seinem Blog zu diesem Thema.
Hier ist eine glatte - Ссылка .
Oder für etwas Einfaches - Ссылка .
Ich glaube nicht, dass es viele grundlegende (wie Amazon) vertikale Menü-Plugins mit 'Flyout' gibt, die herumschweben, weil sie ziemlich einfach nur mit html / css zu erstellen sind. Die Amazonas-Speisekarte könnte wahrscheinlich ohne Javascript überhaupt gemacht werden.
Sobald Sie ein nettes CSS-Menü erstellt haben (Bonuspunkte für die Barrierefreiheit), können Sie einfach eine CSS-Hover-Aktion konvertieren
z.B. li:hover > ul {display:block}
in einige jquery
$('li').hover(function(){ $(this).children('ul').show(200); })
.
Höre nicht auf diese Clowns. Sie möchten eine, die auf vielen Websites getestet und debuggt und cross-browser ist. Wie viele dieser Menüs "Betrachte mich" behandeln flash oder Elemente hinter dem Menü? Wie viele haben glatte Animation und open-on- Hover nicht auf Mausklick? Wie viele können Sie problemlos in einem anderen Projekt auf umstellen, ohne noch mehr CSS Klassennamen und eine neue API zu lernen?
Wie auch immer, die Antwort ist superfish:
Ссылка (vertikaler Stil)
über was Sie wollen, ich denke, Sie können zuerst ein Dropdown-Menü erstellen und die Beschreibung später hinzufügen, nur ein wenig Blick auf dieses Beispiel, es ist sehr einfach: Ссылка oder hier: Ссылка
Ich habe ein Element auf Amazon untersucht und festgestellt, dass sie dasselbe tun. Sie fügen einfach eine Klasse mit einem Stil hinzu:
%Vor%Machen Sie zuerst ein Dropdown-Menü und fügen Sie die gewünschte Beschreibung hinzu!