汉堡包按钮是什么?它是如何工作的?

它可能听起来很美味，但上面的汉堡按钮并不包含任何值得吃的东西。相反，这三行符号保持菜单选项，帮助网站布局更干净，更容易导航。

现在在世界各地的网站上都有一个常见的功能，关于这个类似汉堡的按钮的好处和潜在的缺点一直有争论。

在本指南中，我们将深入了解细节，并将汉堡按钮放在烤架下:汉堡包按钮到底是什么?为什么要用这种圆面包按钮样式，你怎么用CSS做一个呢?有什么选择可以提升你做汉堡的魔力?

汉堡按钮历史

汉堡按钮它始于1981年当时设计师诺姆·考克斯为施乐的个人工作站工作。他尝试了其他的迭代-包括向下的箭头，星号，和加号符号-但没有提供相同的易用性作为这个简单的汉堡包助手。

用户很快就知道了这个概念:点击按钮就会得到一个导航下拉菜单或功能链接。然而，除了最初在施乐的运行，设计师们并没有真正为这个汉堡费心——直到2008年Twitter开始使用它。一年后，它出现在iOS上，如今它已成为网页设计的主要内容，经常出现在网页的左上角或右上角，提供了一个容易存储大菜单的地方，而不会造成有价值的网页空间混乱。

汉堡纽扣面包的好处和缺点

并非所有人都认同网站上“汉堡按钮”(也称“汉堡菜单”)的作用。批评者说这个面包做得太过了，他们关注的问题有:

• 缺乏普遍性尽管大家都很熟悉汉堡按钮，但并不是每个用户都知道汉堡按钮是什么，或者它是做什么的，所以他们不太可能点击它去看其他的网站选项。
• 低接触带有清晰菜单图标的导航栏很容易看到、识别和使用。汉堡按钮并不突出，也无法从用户那里获得同等程度的用户粘性。
• 缺乏重要性-关于汉堡的长篇大论表明，汉堡背后的任何东西都不像你网站上的其他东西那么重要，否则它就会出现在首页上。

但是在你的站点上部署基于面包的菜单也有好处，包括:

• 看起来干净,汉堡按钮几乎不占用任何空间，使它很容易放置在你的页面上的任何地方，而不会分散其他关键元素的注意力。用户知道它是什么样子的，这意味着你可以在其他设计元素上投入更多的时间和精力。
• 一致的功能,这个三行菜单做了一件事，而且做得非常好。这使得它对于网站设计的一致性来说是一个很好的补充——虽然它可能不华丽，但它提供了坚实的功能。
• 明确的目的,不是所有的东西都应该放在网站的首页上。汉堡包菜单为导航元素提供了一个预定义的位置，这些元素不是优先级最高的，但仍然值得随时使用。

如何在CSS中制作一个汉堡包按钮

准备好动手做汉堡了吗?值得庆幸的是，在CSS中创建一个汉堡包按钮并不复杂。

如果你喜欢在一个独立的编辑器中创建CSS代码，可以尝试以下选项RapidCSS或Stylizer。RapidCSS快速、轻量级，非常适合具有一些CSS经验的用户。Stylizer提供了一种更加gui友好的格式，并提供了即时预览选项，以确保您编写的代码能够交付您想要的结果。

如果你更喜欢在平台中编写代码，最简单的选择之一就是WordPress。首先，登录你的帐户，在左边栏找到“外观”，然后点击“定制”。

图片来源

到左边新菜单的底部，选择“附加CSS”。

图片来源

最后，您将看到一个CSS编辑器页面，在将CSS代码推到您的站点之前，您可以通过该页面输入和测试CSS代码。

图片来源

现在是时候做汉堡了。假设您想要构建一个静态图标。根据W3Schools，最好从HTML开始:

这段代码提供了汉堡包按钮的基础。

接下来，添加CSS:

结果是一个标准的、静态的汉堡包按钮，一旦点击它就会指向一个菜单。

用CSS烹饪一个动态按钮

如果你想尝试一些更复杂的东西，考虑一个动画菜单按钮，当点击时转换为“取消”图标。它是这样开始的:

点击打开菜单，会变成这样:

这里的好处吗?用户不仅可以访问基于汉堡的菜单，而且了解如何使用通用的“X”来取消它。

要创建这个动态选项，请从HTML开始:

现在，添加CSS:

最后，加入一些JavaScript:

创建一个没有代码的汉堡按钮

当然，并不是每个人都愿意花时间和精力创建一个可能会被用户点击也可能不会被点击的汉堡包按钮。一些网站所有者就是不喜欢CSS和HTML编码，而另一些人更喜欢优先考虑内容创建或主页布局。

如果这是你的偏好，考虑一下提供内置汉堡选项的网站构建工具。

1.HubSpot的CMS

这一切都可以通过HubSpot CMS实现。建立一个适合你的需求和抓住你的目标市场的伟大的网站，并确保一切工作如预期的流量监测和营销活动整合。汉堡按钮是标准的。

2.Squarespace

使用Squarespace模板设计干净、外观新颖的设计，并使用它们简单的汉堡包菜单来保存二级导航选项。

3.Webnode

有4000万用户使用Webnode建立了网站——只需点击几下就可以添加或更改内容，并快速定制任何汉堡包菜单的位置和下拉选项。

4.Site123

简单是这个网站构建者的游戏名称。Site123并不花哨——它是免费的，而且可以很容易地将汉堡菜单集成到你的网页设计中。

汉明起来

不是每个人都喜欢汉堡按钮。

它是有意义的;菜单可能会造成混乱，或者把关键的导航选项放在难以触及的地方。但汉堡也有好处:构建自己的按钮或使用网站构建工具可以让你决定这个菜单最具影响力的地方，并让你完全控制网站的导航。