Geek Answers Handbook

Is there any jquery plugin that mimics amazon.com menu layout

I am looking to create a webpage with a menu layout similar to amazon.com, where I could have submenus and include a small description text under each menu item.

Before I start creating this from scratch, I wanted to see if there is a jquery plugin that mimics this layout and functionality enter image description here

+7
source share
8 answers

Here is the exact appearance of http://jsfiddle.net/blackpla9ue/KHLgm/8/

A quick CSS-only solution that I managed to make in a few minutes. Hover over the second menu item for the dropdown menu.

Its quite simple and simple, and if you need any changes added to this, just let me know.

+16
source

There are maaaaany jQuery plugins that already do this, but here is a small plugin that I wrapped in 10 minutes:

(function($,window,undefined){ var o; $.fn.amazonLikeMenu = function(data,options){ o = $.extend({},options,$.fn.amazonLikeMenu.defaultOptions); return this.each(function(){ createMenu($(this).addClass(o.classPrefix + '_container'),data); }); }; $.fn.amazonLikeMenu.defaultOptions = { classPrefix : "menu", eventPrefix : "menu" }; function createMenu(container,data,options){ container.data('initial_data',data); var ul = $('<ul />').addClass(o.classPrefix + '_ul').appendTo(container), liTemplate = $('<li />').addClass(o.classPrefix + '_li'), descTemplate = $('<span />').addClass(o.classPrefix + '_desc'), linkTemplate = $('<a href="#"/>').addClass(o.classPrefix + '_link'), hTemplate = $('<h3 />').addClass(o.classPrefix + '_link'); $.each(data,function(i,el){ var li = liTemplate.clone().appendTo(ul); if(el.title && el.link) if(typeof el.link === 'string') linkTemplate .clone() .text(el.title) .attr('href',el.link) .appendTo(li); else { createMenu(li.addClass(o.classPrefix + '_has_submenu').append(hTemplate.clone().text(el.title)),el.link,o); } if(el.desc) descTemplate .clone() .text(el.desc) .appendTo(li); }); }; })(jQuery,window)

Elements of your menu consist of a set of objects (useful if you dynamically generate a menu with data from a service):

 [ { title : 'link 1', link : '#page1' }, { title : 'link 2', link : '#page2', desc : 'this is an awesome link' }, { title : 'link 3', link : [ { title : "submenu link1", desc : "sample description", link : "#submenu_link_1" }, { title : "submenu link2", link : "#submenu_link_2" }, { title : "submenu link3", desc : "sample description", link : "#submenu_link_3" } ], desc : 'I have a submenu' }, { title : 'link 3', link : '#page3', desc : 'I dont have a submenu :((' } ];

Here is a demo: http://jsfiddle.net/gion_13/6QXZt/ .
It is customizable, so it can be customized to look exactly the same as on Amazon.

PS: It should be borne in mind that the role of css is greater than jquery / javascript in this case.

+5
source

Ben Kamen realized a good one that works like the original. See the code on Github here . He wrote an interesting blog post about this topic.

+5
source

Here's the spot - http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/ .

Or for something simple - http://qrayg.com/experiment/cssmenus .

I don’t think that there are many basic (for example, amazon) vertical menu plugins with pop-up floating around, because they are quite easy to create using html / css only. Amazon's menu could have been done without any javascript.

Once you have created a good css menu (accessibility bonus points), you can easily convert the css hover action

eg. li:hover > ul {display:block}

into some jquery

$('li').hover(function(){ $(this).children('ul').show(200); }) .

+2
source

Do not listen to these clowns. You want it to be tested on many sites and debugged and be a cross browser . How many of these menus “look at me” process flash elements or select behind the menu? How many of them have smooth animation and open-on- hover not onmouseover? How much can you easily switch from horizontal to another project without learning even more css class names and a new API?

Anyway, the answer is superwives:

http://users.tpg.com.au/j_birch/plugins/superfish/#examples (vertical style)

+1
source

about what you want, I think you can first create a drop-down menu and add a description later, just take a look at this example, it's very simple: http://webdesignerwall.com/tutorials/css3-dropdown-menu or here: http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html

I tested the item on amazon and I found that they do the same thing, they just add a class with a style for it:

 <div class="navSaTagLine tiny">Vibrant color, movies, apps, and more</div>

Just select the drop-down menu and add the description you want!

0
source

More articles:


All Articles