…

一、问题总结

用户需要在网站的各个模块间导航，但是网页中显示导航信息的空间有限。

二、截图示例

三、参考用法

• 用于当网站包含2~9个模块，需要分级导航结构时。
• 当网站功能设计与桌面应用程序类似时，菜单结构也可与桌面应用程序类似。
• 如果需要标识当前模块在网站中的位置，不要使用本模式，可以采用导航标签模式。

四、解决方案

在一垂直带状区域内显示一组功能项，用户将鼠标移动到或者点击某一项时，会显示一组子功能项（一般显示在该功能项的旁边和下方）。这时，用户可以在水平延伸出来的子功能项列表中选择感兴趣的子功能项。

通常来讲，当用户将鼠标移出下拉列表菜单区域时，应用系统随即隐藏该下拉菜单，但这种做法不可取。

用户无法一直完美地照着应用系统期望的方式执行操作。为了应对用户出错的情况，并指导用户照着应用系统期望的方式操作，可以实施以下策略：

• 触发鼠标移出事件时（用户将鼠标移出下拉列表区域），延时隐藏下拉列表框（通常延迟200到300毫秒）。
• 将每个菜单项的区域宽度设置为稍宽于菜单项的文本内容宽度，这样便于用户将鼠标移动到菜单项上。
• 用户鼠标移动到某一功能项上时改变鼠标形状。

:::info 其它注意事项：
存在多种类型的下拉菜单。有些下拉菜单纯粹使用JavaScript实现的，该类菜单无法与搜索引擎良好合作。为了能让搜索引擎对网页进行索引，应在网页的加载阶段初期创建HTML格式的下拉菜单，这比在网页加载完毕后使用JavaScript创建下拉菜单要好的多。 :::

五、基本原理

下拉菜单通过组织和隐藏信息的方式来节省网页空间，但下拉菜单不是一门增加用户可用性的技术，通常它比较难用。

弹出式菜单仅固定显示网页上的顶层菜单，当鼠标移动到菜单上时才会显示更深层次的子菜单。

附录

原文地址