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

Question

I am looking to create a web page with a menu layout similar to amazon.com where I could have nested menus and include the small description text below each menu item.

Before I start to create this from scratch, I wanted to see if there a jquery plugin that mimics this layout and functionality

Answer 1

Here is an exact look-alike http://jsfiddle.net/blackpla9ue/KHLgm/8/

A quick CSS only solution I managed to get done in a few minutes. Hover on the 2nd menu item for the dropdown.

Its pretty simple and straightforward and If you need any modifications added to that just let me know.

Answer 2

There are maaaaany jQuery plugins that already do that, but here's a little plugin I've 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)

Your menu items consist of a collection of objects (useful if you generate the menu dynamically 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's a demo : http://jsfiddle.net/gion_13/6QXZt/ .
It is customizable, so it can be adjusted to look exactly like the one on amazon.

P.S. : Must have in mind that the css role is greater than the jquery/javascript one in this case.

Answer 3

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

Answer 4

Here is a slick one - http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/.

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

I don't think there are many basic (like amazon) vertical menu plugins with 'flyout' floating around cause they are fairly easy to create just with html/css alone. The amazon menu could probably be done without any javascript at all.

Once you've built a nice css menu (bonus points for accessibility), you could easily convert a css hover action

e.g. li:hover > ul {display:block}

into some jquery

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