（翻译）水平下拉菜单（Horizontal Dropdown Menu）

问题概述

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

示例

用途

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

解决方案

  在一垂直带状区域内显示一组功能项，用户将鼠标移动到或者点击某一项时，会显示一组子功能项（一般显示在该功能项的旁边和下方）。这时，用户可以在水平延伸出来的子功能项列表中选择感兴趣的子功能项。[2]
  通常来讲，当用户将鼠标移出下拉列表菜单区域时，应用系统随即隐藏该下拉菜单，但这种做法不可取。
  用户无法一直完美地照着应用系统期望的方式执行操作。为了应对用户出错的情况，并指导用户照着应用系统期望的方式操作，可以实施以下策略：

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

其它注意事项

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

说明

  下拉菜单通过组织和隐藏信息的方式来节省网页空间，但下拉菜单不是一门增加用户可用性的技术，通常它比较难用。
  弹出式菜单仅固定显示网页上的顶层菜单，当鼠标移动到菜单上时才会显示更深层次的子菜单。[3]

原文地址：http://ui-patterns.com/patterns/HorizontalDropdownMenu
[1]原文：Use when your functionality resembles one of a desktop application. Imitate the metaphor.
[2]原文：A list of main sections are displayed as links in a single vertical strip. When a user hovers their cursor over a list item or clicks a list item, a sub list is displayed (usually adjacent and below). The user can then follow the now horizontally extended list item down, and select the subsection they are interested in.
[3]原文：Flyout menus allow for only showing top levels of the page’s hierarchy permanently, while still giving the option to show deeper levels on mouse over.

本文与垂直下拉菜单的原文大部分内容相同，因此翻译的时候相同的部分都直接使用的垂直下拉菜单一文中的翻译，仅对不同的部分做了局部修改。