Is there any jquery plugin that mimics the amazon.

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

Take a look at these:

http://deluxe-menu.com/data-templates/amazon-template-sample.html http://www.sothink.com/product/dhtmlmenu/samples/newamazonmenu/newamazonmenu.htm

Not sure if that's what you're for.

Answer 2

See this

http://speckyboy.com/2011/07/04/15-fresh-jquery-menu-plugins-and-tutorials/

Answer 3

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 4

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 5

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 6

Don't listen to these clowns. You want one that is tested on many sites and debugged and is cross-browser. How many of these "look at me" menus handle flash or select elements behind the menu? How many have smooth animation and open-on-hover not onmouseover? How many can you easily switch to horizontal on another project without learning even more css class names and a new API?

Anyway, the answer is superfish:

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