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

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

现在在全球网站上是一个熟悉的功能，有关这种类似汉堡的按钮的好处和潜在缺点，这是一个持续的争论。

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

汉堡包按钮历史记录

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

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

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

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

• 缺乏普遍性尽管大家都很熟悉汉堡按钮，但并不是每个用户都知道汉堡按钮是什么，或者它是做什么的，所以他们不太可能点击它去看其他的网站选项。
• 低接触具有清晰菜单图标的导航栏易于查看，识别和使用。汉堡包按钮并不脱颖而出，不要赚取相同的用户级别。
• 缺乏重要性-关于汉堡的长篇大论表明，汉堡背后的任何东西都不像你网站上的其他东西那么重要，否则它就会出现在首页上。

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

• 看起来干净,汉堡按钮几乎没有空间，使您可以在没有分散其他关键元素的情况下放置在页面上的任何地方。用户知道它看起来像什么，这意味着您可以将更多的时间和精力放入其他设计元素中。
• 一致的功能 -这三行菜单做了一件事，一件事很好。这使其在网站设计中的一致性提供了一个很好的补充 - 而它可能不会华而不实，它提供了牢固的功能。
• 明确的目的,并非所有内容都属于您网站的首页。汉堡菜单提供了一种预定义的地点，用于导航元素，这些元素不是最重要的，但仍然值得遵守手头。

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

准备尝试用手在汉堡制作？值得庆幸的是，在CSS中创建汉堡包按钮并不完全复杂。

如果您更愿意在独立编辑器中创建CSS代码，请尝试类似的选项RapidCSS或款式。RapidCSS快速，轻巧，适合用户拥有一些CSS体验的用户。款式提供更友好的格式，并提供即时预览选项，以确保您写入的代码提供所需的结果。

如果您愿意在平台中代码，最简单的选项之一是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

40万用户已使用WebNode构建网站 - 仅需点击几下添加或更改内容，并快速自定义任何汉堡菜单的放置和下拉选项。

4. Site123.

简单是此网站建设者游戏的名称。Site123并不花哨 - 它是免费的，使汉堡菜单集成到您的网页设计中。

汉字它起来了

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

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