网站没有好布局 则信息无法合理传递(8)

8. 超大下拉菜单

导航不一定非得是几个简单的超链接组合。最近，导航设计有一个流行趋势：不仅仅提供“航向”选择，也提供网站内各“终点站”位置以及“终点站”之间 的从属关系。所谓“超大”下拉菜单常见于电子常务网站，用于展示他们庞杂的商品分类。这种样式正成为设计趋势，因为它能通过普通的翻转就提供大量分类信 息，而不需要用户额外的点击。

超大下拉菜单的实例

超大下拉菜单的一个经典例子是 Ruby On Rails Guide 的Guide Index。这个菜单提供了一个组织良好、样式精美的二级导航。注意，与一般的做法不同，激活二级菜单需要用户点击，Guide Index右边有“切换” 图标，并且有着与将要弹出的二级菜单相融合的背景色。弹出的二级菜单也有细微的投影。

译注：这站点在IE的Quirks模式下有显示异常……（话说显示不异常的页面还基本上没有……）

下面的截图里的投影，我也看不到……

带更多信息的多级菜单
Porsche 对于上面说到的技巧来说，简直是一个完美的例子。Porsche 的主页提供一个多级菜单，让用户不用一次点击就能快速了解他们生产的所有汽车。第三级菜单中，所选汽车的信息被直接提供：包括图片、许多链接、以及其他关 于本车的快读信息。当然，这个更大的区块就是一个巨大的可点击区域。所有细节和特别介绍都直接链到相应页面。要了解究竟是怎么回事，就点击下面的图片自己 去看看吧！

在下拉列表里显示搜索结果
最近还比较流行的一个技巧和上面谈到的有点类似：在下拉列表里显示搜索结果。 Media Temple Knowledge Base 就使用了这一技巧。他们没有使用一个新页面来显示用户的搜索结果，搜索结果在一个下拉列表里随着你的输入而实时变化。不过，请注意，完整搜索结果页的链接仍然存在，您若要在自己的设计中使用这种设计，还请不要忘记这一点。

在下拉区块中显示额外信息
Gateway.com 继续登场。你能看到他们在顶部菜单中使用了超大的下拉区块来展示产品。下拉区块中的产品排列组织得非常好，图片提供了强健的视觉支持。这个菜单还提供了诸 如价格和屏幕尺寸等额外信息，让顾客能够在查看具体页面之前就有所选择。因为很多人都很关心产品价格——至少对于很多有购买需求的人来说。

菜单脚本

• Animated Drop Down Menu with jQuery
• Superfish v1.4.8 - JQuery Drop Down Menu
• Make a Mega Drop-Down Menu with jQuery
• How to Make a Smooth Animated Menu with jQuery
• Designing the Digg Header: How To & Download
• Create a multilevel Dropdown menu with CSS and improve it via jQuery