UI设计环境总是随着新趋势和新技术的变化而变化。响应导航趋势但在这篇文章中，我想特别关注一个有争议的趋势：汉堡包菜单。

你可能会意识到这是一个带有三栏图标的滑出菜单，它看起来像一个很小的数字汉堡包。在过去的几年里，它在UI和用户界面的各个方面都得到了迅速的应用。但是它在网页设计中有多好呢？

我将深入研究汉堡包菜单的历史——研究它来自何处，它是如何移动到网络上的，以及它将来可能走向何方。

汉堡包的历史

原来的三杆图标从来没有被称为汉堡包图标，但它的工作原理和今天一样。这个图标的历史可以追溯到Xerox Star从1981开始，它是由Norm Cox创造的，只在施乐8010上运行。

你可以看到这个图标几次这段旧影片在施乐公司推出后不久，该图标就消失了几十年，到了21世纪后期，随着智能手机市场的蓬勃发展，它再次出现。

Norm Cox分享了他的想法。简短访谈小商业趋势讨论图标和它是如何发生的。Cox说：“我不得不咯咯地笑，”汉堡包“象征性的最近”的所有关注，并分享他对图标最近复苏的想法。

它始终是一个非常简单的图标，具有明显的视觉提示。它以列表格式表示文本行。这对于垂直导航菜单来说是有意义的，它当然适合智能手机屏幕。

大约在智能手机淘金热的同时，我们也跌跌撞撞进入了世界。响应设计.Ethan Marcotte wrote a迷人的一块回到2010五月讨论如何响应设计工作，以及它如何改变网络。

网站很快就被设计成更小的屏幕，他们也开始采用汉堡包菜单。随着时间的推移，这个小图标变成了任何隐藏菜单的自然解决方案，并从此变成了我们今天看到的庞然大物。

现代汉堡包菜单

如今，设计界对汉堡包图标菜单有着不同的感受。虽然这些图标能很好地保持页面上的链接，但它们可以导致可发现性问题 .

然而，越来越多的人正在学习这个图标的含义，所以越来越难与之抗争。不可否认的是汉堡包图标越来越受欢迎，他们在这里待了一段时间。

但我认为每个东莞网络公司设计师都需要考虑这个图标的价值，并选择它是否适合每个项目。

让我们看看一些利弊，看看它们是如何堆积起来的。

赞成的意见：

• 在小屏幕上处理大型菜单的最简单方法
• 年复一年变得越来越容易辨认
• 最适合博客，其中Nav链接并不重要

欺骗：

• 普通游客更难找到菜单
• 汉堡图标对每个人都不清楚。
• 菜单访问总是需要额外点击。

我将这一切归结为汉堡包菜单没有完全被识别为可能导致混乱的非页面菜单这一事实，甚至那些识别图标的人可能不想每次点击访问菜单链接，这可能会导致更高的弹跳率。

我个人喜欢汉堡包菜单，但只有在适当的上下文中使用。它在所有网站上都不太好，它可能不是每一个Web项目的最佳解决方案。

但它确实起作用。越来越多的人开始熟悉这个符号所代表的东西。

如果你想对汉堡包滑动菜单的UX生存能力有不同的意见，那么查看这些文章：

• 汉堡菜单在网页设计中的有效性分析

• 为什么使用汉堡包图标完全可以

• 汉堡包图标的天才和潜在危险

汉堡包菜单设计趋势

很容易讨论汉堡包菜单应该如何运作，或者为什么它会以某种方式工作。但是当你看一些例子的时候，你就可以真正看到这个图标是如何在现实世界中运作的。

以…为例喜剧中心他们的全导航菜单是超级容易使用的，当它在全景中，它跨越整个页面宽度。

但是当尺寸变小时，菜单消失，隐藏在一个小的三巴汉堡包图标后面。当你点击它时，它仍然在幻灯片菜单中提供相同的链接，但是如果你以前从未使用过这个菜单，那么它们可能很难访问。

我在网上看到了很多这些幻灯片菜单，喜剧中心的执行是最好的。它有很高的对比度，使用多层次的链接，并在所有设备和屏幕大小上工作。

一个伟大的设计的目标是理想地取悦每个人。不幸的是，这是一个幻想，从来没有发生过，所以接下来最好的事情是尽可能多的用户用他们所理解的菜单。

另一个例子可以在卡通酿造这个博客的链接比喜剧中心少，所以导航栏会下降到页面，而不是从屏幕上滑动。

但是因为它很简单，而且混合得很好，我认为用户体验非常适合。很多用户甚至懒得浏览导航，所以这个菜单也没有那么直接的价值。

从另一面看菜单杠铃服装电子商务网站必须仔细考虑导航，因为这些链接与简单的博客导航相比是必不可少的。

我喜欢这个设计是在汉堡包图标旁边加上“菜单”这个词，这有助于指导那些不认识这个符号的访问者，而且不会占用额外的空间。

如果你担心一些用户不会识别图标，那么试着用“菜单”来替换它。这样做也很好，它仍然使用相同的技术来获得NVC链接，以放置主要内容的前部和中心。

最佳免费资源

让我们总结一下一些最好的汉堡包/滑动抽屉插件，你可以使用它来进行Web项目。这些都是免费的和开源的，所以你可以重新使用并编辑它们。

加上新的插件得到释放，所以如果你不喜欢任何这些都可以自由地打击谷歌寻找另一种选择。

jQuery mmenu

这可能是最古老的滑动菜单插件之一，它也提供了一些最大的支持。jQuery mmenu插件带有一个纯粹的jQuery解决方案，甚至还有一个WordPress插件来启动。

当你到达一个特定的视口时，它会把你的导航转换成一个滑动的导航，你可以自定义很多的特性。完整文档在插件网站上

SlickNav

一个鲜为人知的解决方案是SlickNav它使用一个与汉堡包图标绑定的下拉功能。通过这个插件，你可以添加隐藏在页面顶部的隐藏菜单。

它确实有jQuery支持，但是你也可以在纯JavaScript上运行它。它是非常通用的，甚至支持下拉菜单的多层次导航链接。

jPanelMenu

我已经用过jPanelMenu有几次，它总是超级容易实现。它是建立在jQuery之上的，它使滑动汉堡包菜单疯狂简单。

我个人认为这个插件对于移动Web应用程序更好，而不是完整的网站。它使用自定义滚动条，它更适合WebApp设计美学，但是它可以在任何大型网站上运行，适用于任何大小的导航菜单。

WordPress响应菜单

WordPress是最常用的CMS，有很好的理由。它有成千上万个免费的主题/插件，其中之一是响应菜单插件这是一个幻灯片菜单，并且总是为WordPress的当前版本更新。

你可以在下面找到生动的例子和更多的信息。官方网站随着文档自定义菜单

包扎

东莞网络公司在我的经验中，汉堡包菜单什么也没做，只是成长和接管反应设计世界。我看不出这种趋势很快消散，直到有一个更好的解决方案密集响应型导航，我不希望看到任何主要的网站转移到另一个趋势。