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

我正在寻找创建一个菜单布局类似于amazon.com的网页，我可以有嵌套的菜单，并包括每个菜单项下的小说明文本。是否有任何jquery插件模仿amazon.com菜单布局

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

来源

2012-02-18 leora

您希望支持哪些浏览器？这可以很容易地使用CSS来完成。 – 2012-03-03 21:00:34

这里是一个确切外观类似http://jsfiddle.net/blackpla9ue/KHLgm/8/

快速CSS唯一的解决办法我设法得到在几分钟内完成。悬停在下拉菜单的第二个项目上。

它非常简单和直接，如果你需要任何修改添加到只是让我知道。

来源

2012-03-03 18:54:22 blackpla9ue

不错，它看起来就像亚马逊上的那个，但它不是一个插件。 – 2012-03-04 08:29:39

很高兴你喜欢它。它不是一个插件，但所有你需要做的就是包含css部分并将css类调用到你的'ul'中 – blackpla9ue 2012-03-04 08:42:14

你想要什么见本

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

来源

2012-02-18 14:11:19 Prabhavith

哪一个特别..我没有看到任何与该功能匹配的页面 – leora 2012-02-18 15:58:31

嗨Leora，我有你的需求的解决方案。我怎么能发送你的代码它太大我不能粘贴在评论或答案。 – w3uiguru 2012-02-28 08:44:40

一下，我以为你可以先创建一个下拉菜单，稍后再添加描述，稍微看看这个例子，它是非常基本的： 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>

只是做一个下拉菜单第一和补充说明你要！

来源

2012-03-02 06:50:40

有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更大。

来源

2012-03-02 09:18:21