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

Posted 2023-03-06

【中文标题】是否有任何模仿 amazon.com 菜单布局的 jquery 插件

【英文标题】：Is there any jquery plugin that mimics the amazon.com menu layout

【发布时间】：2012-03-09 15:44:18

【问题描述】：

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

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

【问题讨论】：

您希望支持哪些浏览器？这可以很容易地单独使用 CSS 完成。

【参考方案1】：

看到这个

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

【讨论】：

特别是哪一个..我在该页面上没有看到任何与该功能匹配的内容

嗨，Leora，我有一个满足您要求的解决方案。我如何将代码发送给您，它太大了，我无法粘贴到 cmets 或答案中。

【参考方案2】：

关于你想要什么，我想你可以先创建一个下拉菜单，然后再添加描述，稍微看一下这个例子，它很基础： 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>

只需先做一个下拉菜单，然后添加你想要的描述！

【参考方案3】：

已经有 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/。 它是可定制的，因此可以对其进行调整，使其看起来与亚马逊上的完全一样。

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

【参考方案4】：

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

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

我认为没有很多基本的（如亚马逊）垂直菜单插件带有“flyout”浮动，因为它们很容易仅使用 html/css 来创建。亚马逊菜单可能完全不需要任何 javascript。

一旦你构建了一个漂亮的 CSS 菜单（可访问性的奖励积分），你就可以轻松地转换一个 CSS 悬停动作

例如li:hover > ul display:block

进入一些 jquery

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

【参考方案5】：

这是一个一模一样的 http://jsfiddle.net/blackpla9ue/KHLgm/8/

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

它非常简单明了，如果您需要添加任何修改，请告诉我。

【讨论】：

不错，它看起来就像亚马逊上的那个，但它不是插件。

很高兴你喜欢它。它不是一个插件，但你所要做的就是包含 css 部分并将 css 类调用到你的 ul

【参考方案6】：

别听这些小丑的。您想要一个在许多网站上测试并调试并且是跨浏览器的。这些“看着我”菜单中有多少处理菜单后面的 flash 或 select 元素？有多少具有流畅的动画和打开悬停而不是鼠标悬停？您可以在另一个项目中轻松切换到水平而不学习更多的 css 类名和新的 API？

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

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

【参考方案7】：

看看这些：

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

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

【参考方案8】：

Ben Kamen 实现了一个与原版类似的好方法。请参阅 Github here 的代码。他就这个话题写了interesting post in his blog。