听起来可能很美味,但是汉堡包按钮不包含任何值得吃的东西。取而代之的是,此三行符号包含菜单选项,以帮助使网站布局更清洁,并且可以更易于导航,同时自行占用更少的页面空间。

Now a familiar feature on websites worldwide, there's an ongoing debate about the benefits and potential drawbacks of this burger-like button in网站设计

So, in this guide, we'll dive into the details and put the burger button under the grill: What is a hamburger button, exactly? What should it be used for? Why bother with this button style, and how do you make one in CSS? Let's dig in.

Download Now: Free Intro Guide to HTML & CSS

What is a hamburger button?

汉堡按钮以与食品的视觉相似性命名,是一种在网站和应用程序(尤其是移动环境)上常见的按钮。它是一个由三个平行水平线组成的图标,通常在末端圆形。

汉堡包按钮

汉堡按钮通常放在用户界面。When pressed, the button reveals a previously hidden menu (also called a “hamburger menu). This menu may “drop down” from the location of the button, appear as a模态或从屏幕的顶部,侧面或底部滑入。

The main purpose of the hamburger button is to preserve screen space by hiding navigational elements. The icon itself is small and implies a hidden list that can be revealed with a click or press.

汉堡按钮历史记录

汉堡按钮1981年开始when designer Norm Cox did some work for the Xerox personal workstation. He tried other iterations — including a downward-pointing arrow, asterisk, and plus symbol — but none offered the same ease-of-use as this simple hamburger helper.

Users quickly got the concept: Click on the button to get a drop-down menu of navigation or feature links. Beyond its initial run at Xerox, however, designers didn't really bother with the burger — until Twitter started using it in 2008. It showed up in iOS a year later and today it's a staple of web design, often appearing in the top-left or the top-right corner of webpages and providing an easy place to store larger menus.

Hamburger Button Bun-efits and Drawbacks

Not everyone is sold on the role of hamburger buttons on websites. Detractors say this bun is overdone, sighting concerns such as:

  • Lack of universality —Despite broad familiarity, not every user knows what a hamburger button is, or what it does, making it unlikely they'll click through to see other website options.
  • Low engagement —带有清晰菜单图标的导航栏易于看到,识别和使用。汉堡按钮不会脱颖而出,也不会从用户获得相同水平的参与度。
  • Lacking importance —Hamburger harangues make the case that anything behind the burger isn't as important as everything else on your site, or it would find a home on the front page.

But there are also benefits to deploying bun-based menus on your site, including:

  • Clean look —汉堡按钮几乎没有空间,可以轻松地将页面上的任何位置放在页面上,而不会分散其他关键元素。用户知道它的外观,这意味着您可以将更多的时间和精力投入其他设计元素中。
  • 一致的功能 -这个三行菜单可以做一件事,一件事真的很好。这使其成为网站设计一致性的绝佳补充 - 虽然它可能并不浮华,但它提供了可靠的功能。
  • Clear purpose —Not everything belongs on the front page of your website. The hamburger menu provides a predefined place for navigational elements that aren't a top priority but are still worth keeping close at hand.

Hamburger Button Examples

汉堡按钮都遍布网络 - 以下是一些示例,可以演示它们的外观。

Hamburger Button in an Android App

让我们从应用内汉堡内菜单的标准示例开始。Gmail应用程序主屏幕看起来像这样 - 注意左上方的汉堡包按钮。

hamburger button example: gmail app

图像源

When you tap the icon, a menu slides in from the left side.

hamburger button example: gmail app

图像源

Hamburger Button on a Website

接下来,Food Brand Pipsnacks在其移动网站上创造了汉堡菜单的创造性。在页面加载上,按钮在屏幕的左上角显示。

hamburger button example: pipcorn website

图像源

利用图标显示navigation menu that appears to fold out from the top of the screen. It’s a fun, clever effect that adds to the site’s artisan feel and immerses mobile users in the experience.

hamburger button example: pipcorn website

图像源

Creative Hamburger Button

如果您想添加一些额外的细节,也可以在网上找到许多汉堡按钮的创意迭代。这是一个出色的动画按钮图标来自Codepen用户Danilo - 尝试在下面的示例中单击图标,并查看会发生什么。

看到笔Animated menu由Danilo(@Danilo06) onCodepen

如何用CSS制作汉堡按钮

Thankfully, creating a hamburger button in CSS isn't terribly complicated. If you'd prefer to create CSS code in a standalone editor, try options likeRapidCSSorStylizer。RapidCSS is quick, lightweight and well-suited to users with some CSS experience. Stylizer offers a more GUI format and comes with immediate preview options to ensure the code you write delivers the results you want.

If you'd rather code in-platform, one of the simplest options is WordPress. First, log into your account, find "Appearance" on the left-hand sidebar and then click "Customize".

WordPress仪表板

图像源

头的底部新左边菜单and select "Additional CSS".

使用CSS添加汉堡按钮。

图像源

Finally, you'll see a CSS editor page that lets you enter and test CSS code before pushing it to your site.

Test CSS code before publishing to your site.

图像源

Now it's time to build that burger. Let's say you want to build a static icon. According toW3Schools,最好的起点是HTML:

W3Schools的汉堡按钮教程

This code provides the basis for your hamburger button.

Next, add your CSS:

汉堡包丁顿教程5

The result is a standard, static hamburger button that leads to a menu once clicked.

Cooking Up a Dynamic Hamburger Button Icon with CSS

如果您想尝试一下更复杂的东西,请考虑一个动画菜单按钮,该按钮在单击时转换为“取消”图标。这是它开始的方式:

W3Schools的汉堡按钮教程

单击以打开菜单,然后变成:

W3Schools的汉堡按钮教程

这里的好处?用户不仅可以访问您的基于汉堡的菜单,还可以了解如何使用Universal“ X”来消失以取消。

To cook up this dynamic option, start with your HTML:

W3Schools的汉堡按钮教程:HTML代码

Now, add your CSS:

W3Schools的汉堡按钮教程: css code

最后,折腾一些JavaScript:

W3Schools的汉堡按钮教程L javascript code

Building a Burger Button Without Code

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

If that's your preference, consider website building tools that offer built-in burger options.

1. CMS集线器

用于构建网站的HubSpot CMS。

With CMS Hub, you can build a great website that suits your needs and captures your target market. Make sure everything is working as intended with traffic monitoring and marketing campaign integration. Hamburger buttons come standard.

2.方形

the squarespace homepage

设计干净,新鲜的设计,并使用Squarespace模板设计,并使用简单的汉堡菜单保存二线导航选项。

3. Webnode

the webnode homepage

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

4. site123

网站123首页

简单是该网站构建器游戏的名称。Site123并不花哨 - 它是免费的,可以轻松将汉堡菜单集成到您的网页设计中。

将其锤起来

并非每个人都喜欢汉堡包按钮。

It makes sense; the menu can cause confusion or put critical navigation options just out of reach. But there are burger benefits: Building your own button or using a website builder tool lets you decide where this menu makes the most impact and gives you total control over navigation on your site.

编者注:该帖子最初于2020年5月发表,并已更新以进行全面性。

New Call-to-action

css introduction

最初发布于2021年8月4日7:00:00 AM,更新于2021年8月23日

话题:

网站Design