Gibt es ein jquery-Plugin, das das Menü-Layout von amazon.com nachahmt?

7

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

    
leora 18.02.2012, 14:03
quelle

8 Antworten

16

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.

    
blackpla9ue 03.03.2012, 18:54
quelle
5

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.

    
gion_13 02.03.2012 09:18
quelle
5

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.

    
Beachwalker 10.03.2013 09:47
quelle
2

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); }) .

    
brains911 03.03.2012 05:01
quelle
1

Siehe dies

Ссылка

    
Prabhavith 18.02.2012 14:11
quelle
1

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)

    
Neil McGuigan 04.03.2012 00:03
quelle
0

ü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!

    
Tho Vo 02.03.2012 06:50
quelle
0

Sehen Sie sich diese an:

Ссылка Ссылка

Ich bin mir nicht sicher, ob du das willst.

    
Noman A. Khan 04.03.2012 00:16
quelle

Tags und Links