是否有任何模仿amazon.com菜单布局的jquery插件

Question

我希望创建一个菜单布局类似于amazon.com的网页,我可以在其中嵌套菜单并在每个菜单项下面包含小的描述文本.

在我开始从头开始创建之前,我想看看是否有一个模仿这种布局和功能的jquery插件

Answer 1

这是一个完全相似的 http://jsfiddle.net/blackpla9ue/KHLgm/8/

一个快速的CSS解决方案我设法在几分钟内完成.将鼠标悬停在下拉列表的第二个菜单项上.

它非常简单明了,如果您需要任何修改,请告诉我.

Answer 2

有maaaaany jQuery插件已经做到了,但这里有一个小插件,我已经包装了10分钟:

(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)

您的菜单项由一组对象组成(如果您使用服务中的数据动态生成菜单,则非常有用):

[
    {
        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 :(('
    }
]; 

这是一个演示:http://jsfiddle.net/gion_13/6QXZt/.
它是可定制的,所以它可以调整到完全像亚马逊上的那个.

PS:必须记住,在这种情况下,css角色大于jquery/javascript角色.

Answer 3

Ben Kamen实施了一个像原版一样好的版本.在这里查看Github的代码.他在博客中写了一篇关于这个主题的有趣帖子.