1.Converse

Converse是一个在线售卖最新衣物、鞋子和旅行装备的时尚网站。它的首页选用了点击可触发的下拉菜单式导航设计。整个下拉菜单，最大的特色就是添加了非常丰富的鼠标悬浮特效，以帮助用户快速聚焦各个选项。 两栏的布局设计，直观易读，也方便用户快速查看和选择。

2.Santa Cruz

Santa Cruz 是一个网上的自行车商店。它的下拉菜单导航，利用大量“图片+文字”的卡片设计，直接清晰地展示了网站的各类商品。如此，用户通过导航菜单，就能提前对各个商品有所了解，并快速选择。省略掉用户需要逐一点开、查看详情并最后才能做出选择的复杂过程，非常实用。适合各类在线商店学习和借鉴。 

3.Helias Oils 

Helias Oils 是一个在线精油网站。它的首页也选用了点击可触发的下拉菜单式导航。除了丰富的悬浮特效，设计师还添加了炫酷的波浪式转场动效，吸引用户停留的同时，也快速引导用户做出选择。

4.Whirling CSS3 Drop Down Menu

Whirling CSS3 Drop Down Menu 是一款视觉效果极佳的CSS导航下拉菜单模板设计。它最有趣的地方就是添加了十分新颖的扭转展开式动效。适合各类暗黑风网页设计使用。感兴趣的设计师，可以点击“返回教程”查看制作详情。 

5.Lion Burger

Lion Burger 是一个使用按钮式下拉菜单导航的网站。它最值得关注的就是下拉菜单所选用的配色。红色选项搭配白色文案的设计，清晰展示菜单选项内容的同时，也与主页黑色背景形成鲜明对比，让用户不自觉的将关注点放在导航上。 

6.CSS3 Slide Drop Down Box Menu

CSS3 Slide Drop Down Box Menu 是另一款精美的下拉菜单式导航设计。鼠标指向主菜单选项时， 相应的模块图片和菜单列表也会随即展示。菜单选项向左、向右自动滑出的动效设计，也极赋创意。感兴趣的小伙伴，可以下载看看。 

7.Responsive Drop Down Navigation Menu

Responsive drop down navigation menu 是一款为专为Bootstrap网页模板而特制的下拉菜单导航。整个导航分为四栏，前三栏通过纯文本设计，依次罗列了商品不同分类下的各个选项，而最后一栏则通过商品图片轮播设计，引导用户选择， 结构分明，布局清晰，任何用户都能快速熟悉并按需选择。适合具有类似清晰产品分类的网页或App借鉴。 

8.Drop Down Menu Bryan

Drop Down Menu Bryan 是一款三级下拉菜单导航设计。用户点击左上角的导航按钮，各级菜单就会随即一步步展示，轻松引导用户快速找到所需选项。适合具有复杂导航系统的网站借鉴和使用。

9.PopSockets

PopSockets 是一款色彩丰富的概念性下拉菜单导航设计。整个导航设计除了高效直观的四栏布局，还添加了多彩的产品绘画进行点缀，精美实用。

10.Minimal Drop Down Menu Exploration

Minimal Drop Down Menu Exploration 是一款典型的极简风下拉菜单导航设计。整个网页的主菜单导航栏，直接简化成了细小的色彩条。鼠标悬浮，相关菜单选项才会随即展开。鼠标离开后，又立即收起。反应灵敏，简洁高效。各类极简风网页不妨学习一下。 

11.Creative Drop Down Menu with Icons 

Creative Drop Down Menu with Icons 是一个结构分明的下拉菜单导航。蓝色背景搭配白色选项，美观时尚。镂空的图标点缀，也有力突出了每个选项，让整个菜单结构布局更加清晰。

12.Zenith Arena De Lille Drop Down Menu

Zenith Arena De Lille Drop Down Menu 是一个专为室内竞技场网站而打造的下拉菜单导航。不同于一般网页通过添加蒙版或新窗口的方式，展示下拉菜单，该款设计直接将菜单融合在界面主页上，点击触发，整个页面也会随之展开或隐藏，操作展示更便捷。对类似菜单展示方式感兴趣的设计师，可以了解一下。 

13.SkySmile Drop Down Menu

SkySmile Drop Down Menu 最值得学习的地方就是选用了渐变色菜单背景。这样的设计，不仅成功突出了下拉菜单内容，还轻松与网站的主体配色相呼应，确保了网页整体设计风格的一致性。 

14.Minimal Drop Down Menu Interaction

Minimal Drop Down Menu Interaction 是一款专为简约风悬浮导航按钮而打造的下拉菜单设计。整个菜单和选项都由简单的图标构成， 适用于各类简约风App设计。 

15.Mobile App Drop Down Menu

Mobile App Drop Down Menu 是另一个简约风App可参考的导航按钮设计。除了极简的图标导航菜单，此款设计还添加了横向滑出动效，更加生动地展示低一级的菜单选项，吸引用户关注。 

16.Notification Drop Down Box Design

Notification Drop Down Box Design 是一个消息提示类下拉菜单设计。用户指向顶部的消息提示图标，菜单随即展开，清晰呈现相关涉及人员、发送时间以及消息内容等信息，实用性极强。

17.Notification Drop Down Menu

Notification Drop Down Menu 是另一款专为消息提示设计打造的下拉菜单。不同于上一个案例，布满图片和文字，此款设计外观上更加简约美观。可爱的卡通猫绘画，也无形中引导用户快速聚焦于当前的选中项，帮助他们快速做出选择。

18.HTML Drop Down Menu Animation

HTML Drop Down Menu Animation 也是一个极简的导航按钮下拉菜单设计，提供免费的HTML、CSS以及JS源代码资源。它最值得效仿的地方，就是为下拉菜单添加了逐一展开各个选项的动效设计，个性而独特。

19.About Us Drop Down Menu Animation

About Us Drop Down Menu Animation 是一个专为网页“关于我们”的导航模块而设计的下拉菜单。整个设计最亮眼的地方就是添加了菜单弹出动效，灵动而富有活力。单个选项"图标+文案"的组合设计，也极大方便用户清晰查看各个选项。 

20.Interactive Drop Down Menus 

Interactive Drop Down Menus 是一款专为搜索过滤器而打造的交互式下拉菜单设计。用户展开菜单，即可根据需要选择筛选条件。整个下拉菜单，组件丰富，结构分明，值得借鉴。

更多创意下拉菜单设计实例：

21.Shop Drop Down Menu

Shop Drop Down Menu 是一款仅由图标按钮打造的下拉菜单导航设计。 

22.Mini Cooper 

Mini Cooper 是宝马旗下Mini Cooper汽车的官方网站。它的下拉菜单导航，结构清晰，选择多样，特效丰富，引导力极强。 

23.Board Star

Board Star 是一个在线的滑雪用品售卖店。它的导航栏也选用了下拉菜单式设计。卡片式布局，直观易用。复古风外观，也让用户轻松记住该网站或品牌。 

24.Porsche 

Porsche 是德国宝时捷汽车的官方网站。它的导航采用联动式下拉菜单设计，以引导用户快速查看和选择所需车型。

25.Audi 

Audi 是德国奥迪汽车的官方网站。它的网站也选用了联动式下拉菜单导航设计。但相较于Porsche， 它则选用了完全不同的布局方式。感兴趣的设计师，可以对比两款设计，寻求设计灵感。  

26.Sony Play Station

Sony Play Station 采用了横向展开的图标菜单导航，简单的文字介绍，也加深了用户对各个选项的理解。 

27.Mr Clean 

Mr Clean 直接通过产品图片展示下拉菜单的各个选项，清晰易用，方便选择。 

28.KFC 

KFC 采用了竖式下拉菜单设计。它的菜单展示动画也十分新颖。

29.Taco Bell

Taco Bell 是一个在线的美食查找网站。侧边导航栏搭配竖式下拉菜单的设计，也是很有创意了。

30.Bern Tourism 

Bern Tourism 也选用了下拉菜单式导航设计。为更好的引导用户，下拉菜单内还加入了更为高效的标签导航栏，以方便用户根据需要点击查看不同标签下的各个选项。 

使用下拉菜单的形式似乎已是司空见惯：它不占用太多空间的界面，它自动验证输入，所有浏览器和平台都支持它，实现下拉菜单非常的方便且容易，用户对他们也习以为常了。

与此同时，根据Luke Wroblewski和被多人提及的原则：“下拉菜单应该是最后的选择”的说法，那么下拉菜单却是最经常被误用的。

让我们看一看下拉菜单的局限性和令人担忧的地方：

• 下拉菜单控件的可用是选项不可见的，直到你点击或点击打开它。同时， 在第一眼看到列表时，列表的长度是隐藏的，即用户无法预测一个下拉菜单是包含2个还是50个元素。
• 从下拉列表中选择一个选项，（尤其是在移动设备上）是一个多步骤的过程：你必须点击下拉菜单打开选项列表，然后滚动和浏览项目并选择一个，然后关闭下拉。
• 下拉菜单可以让设计师懒惰：设计师很容易就把所有可能的选项不分任何优先级一起放到下拉列表里（这很类似于汉堡菜单的做法）。
• 像国家地区选择这种很长的下拉菜单，用眼睛扫描起来简直是噩梦，尤其是在键盘搜索通常是不可用的移动端。
• 在可见、可滚动但面积很小的屏幕上滚动去选择想要的选项是一件非常痛苦的事情。

在IOS系统上，第一眼可见的选项少的惊人。

但是好消息是这里有大量的很棒的可替代下拉菜单控件的选择，能为你在不同的情况下所用到。

考虑选项的数量

若只有两个选项（例如开/关），那么使用下拉菜单就是一个错误的选择。这里你需要用复选框(CheckBox)或者用切换开关（toggle switch）。

如果你的下拉菜单仅仅包含是/否、开/关这样的选项，那么就用开关控件来替代它

对于个数少且互斥的选项 ，建议使用单选按钮（radio buttons）或分段控件（segmented），使所有可用的选项第一眼可见，且无需打开列表。

分段控件(SEGMENTED CONTROLS)可以一次性展示出所有的可选项

可见选项的数量取决于屏幕宽度和选项标签的长度，但不要超过5项

当用户确切地知道他们在寻找什么时，对于大量确定的选项，考虑使用“请输入…”这样的解决方案，其中筛选选项列表在输入第一个或两个字母之后显示。

用让用户来输入文字来筛选选项的方式替代滑动下拉菜单

对于大型和多样的列表，尝试使用现有的用户数据来排列优先级，只列出几个用户常选的选项。这种方式有一个好处就是90%的用户会立即发现自己偏好的选择项，只有10%的人选择立即“其他”然后跳到指定的下一个问题。

虽然“其他”不适一个优雅的解决方案，但是优先级排序的方式能够提高大多用户的体验

考虑预填写

下拉列表的好处之一是用户不必输入很多内容。然而，如果预期的输入不是太长并且经常被问到（例如个人信息），通常用输入的方式是比较容易的，而不是从列表中选择：

在移动设备上输入生日的年份，使用数字键盘比滑动长列表要容易的多

通常，在移动设备上输入数值会比数字下拉列表效率高。

尽管数字下拉列表是清晰的，但是输入数值依然比滑动选择要方便。

如果验证用户输入的内容很重要，输入内容用于筛选可用选项时，“请输入……”这个方法可能是有用的。

在罗列出美国各洲的时候，只需输入一个字母就能大大简化原本很长的列表。

当列表元素的排序顺序不清晰时，在选项列表中搜索的能力特别有用。

不清楚货币代码排列顺序的用户，能确保他们能在名称和货币代码间进行搜索

同样的技术也应该应用于国家列表上面：使用让用户尽快开始键入并过滤结果来替代列出200多个条目的方案。

对于表示数量的非连续值（例如乘客数量或购物车中的商品数量），步进器（stepper）允许用户点击来快速增加或减少数值。

对于连续数值或在某个范围内的数值，请考虑使用滑块。

显示最大值和最小值的范围有助于用户理解

选择当下最近日期，使用多个选择菜单选择可能是一次非常痛苦的体验，因此我们选择使用日期选择器（date picker）。（但千万别用它输入出生日期）

设计更智能的下拉菜单

虽然本文一直在告诫你不要使用下拉菜单，但如果在某些场景下，你确实认为让用户在下拉菜单中选择是一种最合适的输入方式，也没关系，不过你要进来让下拉菜单更友好一些。

• 使用有意义的标签：当下拉菜单打开时，菜单标题和描述也需要保留且清晰可见。在“选择”菜单中使用一个描述性标签，告诉用户他们正在选择什么（即“选择类型”而不是“请选择”）。
• 按合理的方式排序条目：基于用户数据尝试将最流行的选项放在列表的顶部。甚至预先选择用户最常选的选项作为默认选项。
• 使用智能默认值：手机和浏览器知道用户的位置、日期等大量的信息。利用已知的数据预先为每个用户选择最有可能的选项。
• 减少用户需要填写的内容，让计算机分担一些工作：如果用户输入邮政编码，毫无疑问计算机已经能识别出这个邮政编码所属的国家和城市。如果用户输入信用卡号码，计算机也可以自动识别出这是Master信用卡 。不需要让用户自己填写。

• 考虑使用API：使用第三方的方式注册比填写注册表要容易。PayPal支付比输入你的信用卡信息更容易。

如果你想知道更多关于下拉菜单的设计，请看Golden Krishna 和 Eric Campbell 在 SXSW的分享.https://www.youtube.com/watch?v=hcYAHix-riY（请自备梯子）

原作者：ZOLTAN KOLLIN

原文地址：HTTPS://MEDIUM.COM/@KOLLINZ/DROPDOWN-ALTERNATIVES-FOR-BETTER-MOBILE-FORMS-53E40D641B53

译文地址：https://ddc.dianrong.com/?p=3419

对于如今热衷于网页设计的爱好者们来说，单调的网页效果已经远远不能满足他们新奇的心理了。本文就来介绍一种简单的下拉菜单的制作。只要你懂得一点点HTML的知识，就可以。即使什么也不懂，照葫芦画瓢也行，呵呵。

第一步，定义下拉菜单JS代码

第二步，在适当的位置插入目录菜单

第三步，插入隐藏层的定义.

到这里，你就可以看到一个完整的下拉菜单的网页特效了。