Fly－out Menu飞出式菜单

问题

当导航空间有限的情况下，用户可以方便的访问二级导航。

解决方案

当用户将鼠标悬停（hover）在主菜单项时，将水平导航与飞出式二级菜单结合使用。

何时用

对于那些想快速进入菜单项的有经验用户，通常有一个主页，所有的可点击项被分组在一个标签下。菜单项本身不链接页面。导航的空间有限，如果不考虑其他导航系统，如：目录导航（Directory Navigation)。菜单项应该在同一页面被找到，鼠标点击次数应该尽量小，也没有重新载入页面。

如何用

当鼠标悬停时显示二级菜单。在不覆盖其他菜单项的情况下向下或向右展开（从不向左）。飞出式菜单应该快速响应，否侧用户无法快速切换。结合面包屑（Breadcrumbs）使用更佳。飞出式菜单可以是横向的也可以是纵向的。

飞出式菜单的问题

*如果你离开菜单区很难选择，响应范围扩大使移鼠标移动在菜单之外的几个像素时也不会消失。

*飞出式子菜单不是一个好想法，很难选择（Fitts law)

*你必须使它看起来像菜单，如在标签上增加一个向下的小三角。

*确保它们在没有像Javascript这样影响可访问性的情况下正常工作。否则不能索引你的网站,搜索引擎的可访问性也受到损害。

*在隐藏飞出式菜单前使用延迟，如：250ms

*只有在使用水平菜单和垂直飞出菜单时，垂直区域鼠标指针需要移动的区域很小，通常是12-14px，也使得菜单在不需要时迅速被掩藏。

为什么

飞出式菜单是一把双刃剑，实际操作是其成功的关键。一方面，飞出式菜单节省了页面空间可以使内容区得到更好的展现。但是另一方面，因其隐藏导航，不能使用户一眼看到，可以称之为“肉之谜导航”（网络中的肉之谜导航描述了用户想确定链接在哪里极其困难的设计）。如果上述提及的几点执行的好的话，它可以在不破环屏幕空间的情况下快速进入导航。特别是当用户理解之后会对它们更有帮助。但另一方面，这种一次性的交互方式可能带来可用性问题。

更多案例

微软也在它们的支持网站中广泛使用。