【发布时间】：2012-03-09 15:44:18
【问题描述】：
我希望创建一个菜单布局类似于 amazon.com 的网页，我可以在其中嵌套菜单并在每个菜单项下方包含小描述文本。
在我开始从头开始创建它之前，我想看看是否有一个 jquery 插件可以模仿这种布局和功能
【问题讨论】：
-
您希望支持哪些浏览器？这可以很容易地单独使用 CSS 完成。
【发布时间】：2012-03-09 15:44:18
【问题描述】：
【讨论】：
-
特别是哪一个..我在该页面上没有看到任何与该功能匹配的内容
-
嗨，Leora，我有一个满足您要求的解决方案。我如何将代码发送给您，它太大了，我无法粘贴到 cmets 或答案中。
关于你想要什么，我想你可以先创建一个下拉菜单，然后再添加描述，稍微看一下这个例子，它很基础： 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>
只需先做一个下拉菜单，然后添加你想要的描述！
【讨论】：
已经有 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 角色。
【讨论】：
这是一个漂亮的 - 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); })。
【讨论】：
这是一个一模一样的 http://jsfiddle.net/blackpla9ue/KHLgm/8/
我设法在几分钟内完成了一个仅使用 CSS 的快速解决方案。将鼠标悬停在下拉菜单的第二个菜单项上。
它非常简单明了，如果您需要添加任何修改，请告诉我。
【讨论】：
-
不错，它看起来就像亚马逊上的那个，但它不是插件。
-
很高兴你喜欢它。它不是一个插件，但你所要做的就是包含 css 部分并将 css 类调用到你的
ul
别听这些小丑的。您想要一个在许多网站上测试并调试并且是跨浏览器的。这些“看着我”菜单中有多少处理菜单后面的 flash 或 select 元素？有多少具有流畅的动画和打开悬停而不是鼠标悬停？您可以在另一个项目中轻松切换到水平而不学习更多的 css 类名和新的 API？
无论如何，答案是超级鱼：
http://users.tpg.com.au/j_birch/plugins/superfish/#examples（垂直样式）
【讨论】：
Ben Kamen 实现了一个与原版类似的好方法。请参阅 Github here 的代码。他就这个话题写了interesting post in his blog。
【讨论】：