#components 相关 - [[导航设计 Navigation Design]] ## 概念 还有一个别名叫做：[Fly-out Menus | w3c.org](<[Fly-out Menus | Web Accessibility Initiative (WAI) | W3C](https://www.w3.org/WAI/tutorials/menus/flyout/)>) 下拉菜单一般是功能的合集，容易与[[选择框 Select]] 混淆（select 用于表单中的信息输入）。Mac 顶部的那些就是应用下拉菜单([Application Menu](<[Application Menu Example & Code | Web Accessibility Initiative (WAI) | W3C](https://www.w3.org/WAI/tutorials/menus/application-menus-code/)>))，他可以是新建或者撤销等等，也可以是一个链接（例如帮助，跳转到网站）。 - [[Ant Design]] - 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。 - [[Atlassian Design System]] - A dropdown menu displays a list of actions or options to a user. - [[Carbon Design System#^72b1d2]] - Dropdowns present a list of options from which a user can select one option, or several. A selected option can represent a value in a form, or can be used as an action to filter or sort existing content. ### 与 Select 的区别 [[Carbon Design System#^917274]] ## 最佳实践 ### 何时不用？ - 如果有两个选项可供选择，最好不要使用下拉菜单。在这种情况下，使用[[单选 Radio]] 组代替。 - 不要嵌套下拉框或用它们来显示过于复杂的信息。保持选项选择尽可能直接。 ### 巨型下拉框 #### Don't - 避免将重要的、经常使用的项目放在靠近巨型下拉式导航的地方（例如搜索栏、CTA、购物车图标）（如果悬停）。 - 避免在巨型下拉式导航中的多个子导航出现在彼此之后，并出现延迟（如果悬停）。 - 避免用多种功能使类别标题过载。 - 在类别标题下划线，以确定它们是通往该类别页面的链接 - 如果可以，在每个子类别内添加一个 "主页 "链接或 "浏览全部 "按钮，而不是直接链接到类别。 - 避免水平叠加，考虑用垂直手风琴和分割菜单来取代它们。 - 添加一个图标，以表明一个类别的标题在点击后会触发一个巨大的下拉菜单（例如，下拉按钮），并始终使其足够大，以便舒适地敲击（例如，50×50px）。 - 在以下情况下避免长的淡入/淡出过渡避免在巨型下拉菜单出现/消失时出现长时间的淡入/淡出过渡（最多 300ms）。 - 考虑测试一个结构化的指南或导航查询（"I-want-to "导航模式）来代替或补充巨型下拉。 - 如果可能的话，避免巨型下拉式的悬停菜单。 ## 资源 - [Frustrating Design Patterns: Mega-Dropdown Hover Menus — Smashing Magazine](https://www.smashingmagazine.com/2021/05/frustrating-design-patterns-mega-dropdown-hover-menus/) 一篇文章很详细的说了网站上 Mega-Dropdown 各种不好的体验