是否有任何模仿amazon.com菜单布局的jquery插件
我希望创建一个菜单布局类似于amazon.com的网页，我可以在其中嵌套菜单，并在每个菜单项下面包含小的描述文本。
在我开始从头开始创建之前，我想看看是否有一个模仿这种布局和function的jquery插件 
这是一个完全相似的 http://jsfiddle.net/blackpla9ue/KHLgm/8/
一个快速的CSS解决方案我设法在几分钟内完成。 将鼠标hover在下拉列表的第二个菜单项上。
它非常简单明了，如果您需要任何修改，请告诉我。
有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 = $('
').addClass(o.classPrefix + '_ul').appendTo(container), liTemplate = $('').addClass(o.classPrefix + '_li'), descTemplate = $('').addClass(o.classPrefix + '_desc'), linkTemplate = $('').addClass(o.classPrefix + '_link'), hTemplate = $('').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角色。
Ben Kamen实施了一个像原版一样好的版本。 在这里查看Github的代码。 他在博客中写了一篇关于这个主题的有趣post 。
这是一个光滑的 – http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/ 。
或者简单的事情 – http://qrayg.com/experiment/cssmenus 。
我不认为有很多基本的（如亚马逊）垂直菜单插件有’flyout’浮动周围因为它们很容易用html / css单独创建。 亚马逊菜单可能没有任何javascript完成。
一旦你建立了一个很好的CSS菜单（可访问性的奖励积分），你就可以轻松转换csshover动作
例如li:hover > ul {display:block}
进入一些jquery
$('li').hover(function(){ $(this).children('ul').show(200); }) 。
不要听这些小丑。 您想要在许多站点上进行测试并进行调试并且是跨浏览器的 。 这些“看我”菜单中有多少处理菜单后面的闪光灯或选择元素？ 有多少人有平滑的动画和开放式hover而不是onmouseover？ 在不学习更多css类名和新API的情况下，您可以轻松地在另一个项目上切换到水平多少？
无论如何，答案是超级鱼：
http://users.tpg.com.au/j_birch/plugins/superfish/#examples （垂直样式）
关于你想要什么，我想你可以先创建一个下拉菜单并稍后添加说明，只需看看这个例子，它是非常基本的： http ： //webdesignerwall.com/tutorials/css3-dropdown-menu或者在这里： http ： //woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html
我在亚马逊上检查了元素，我发现他们也是这样做的，他们只是添加了一个带有样式的类：
只需先制作一个下拉菜单，然后添加您想要的描述！