Question

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

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

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/ 它是可定制的，所以它可以调整到完全像亚马逊上的那个。

P.S。：必须记住，在这种情况下，css角色大于jquery / javascript角色。

Answer 3

这是一个光滑的 - http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/。

或者简单的事情 - http://qrayg.com/experiment/cssmenus。

我不认为有很多基本的（如亚马逊）垂直菜单插件，其中'flyout'漂浮在周围因为它们很容易用html / css单独创建。亚马逊菜单可能在没有任何JavaScript的情况下完成。

一旦你建立了一个不错的css菜单（可访问性的奖励积分），你就可以轻松转换css悬停动作

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

进入一些jquery

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

Answer 4

见这个

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

Answer 5

不要听这些小丑。您希望在许多网站上已测试并且已调试且跨浏览器。这些“看我”菜单中有多少处理菜单后面的 flash 或选择元素？有多少人有光滑的动画和开放式悬停而不是onmouseover？在没有学习更多css 类名和新API的情况下，您可以在另一个项目中轻松切换到水平多少？

无论如何，答案是超级鱼：

http://users.tpg.com.au/j_birch/plugins/superfish/#examples（垂直样式）

Answer 6

关于你想要什么，我认为你可以先创建一个下拉菜单并稍后添加描述，只需看看这个例子，它是非常基本的： http://webdesignerwall.com/tutorials/css3-dropdown-menu 或者在这里： http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html

我在亚马逊上检查了元素，我发现他们也是这样做的，他们只是添加了一个风格的类：

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

首先制作一个下拉菜单并添加您想要的说明！

Answer 7

看看这些：

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

不确定这是不是你的目的。

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

7 个答案: