The Hamburger Menu widget is on every other site nowadays. It has become synonymous with the web and, perhaps even more so, with web development. Have, for instance, a look at Dribbble or Codepen. There you’ll find a fair share of examples. They come in all shapes and sizes where one is more elaborative than the other. Developers and designers can’t seem to get enough of the widget.

漢堡菜單小部件現在在其他所有網站上。 它已經成為Web的代名詞，甚至可能成為Web開發的代名詞。 例如，看看Dribbble或Codepen。 在這里，您會發現很多示例。 它們具有各種形狀和大小，其中一種比另一種更為精致。 開發人員和設計師似乎無法獲得足夠的小部件。

The Hamburger Menu is not without controversy. Some hate it, and some love it. Numerous articles are debating it and its alternatives. Some argue that its proper place is in the history books. Regardless of its fate, it continues to have widespread use. Over and over, it keeps showing up in new sites. It’s especially popular for mobile views where menus typically are hidden.

漢堡菜單并非沒有爭議。 有些人討厭它，有些人喜歡它。 許多文章都在爭論它及其替代方案。 有人認為它在歷史書中應有的地位。 無論其命運如何，它仍然得到廣泛使用。 一遍又一遍，它不斷出現在新的網站。 對于通常隱藏菜單的移動視圖而言，它尤其受歡迎。

There are quite a few variants out there?exploring?different?kinds?of?animations. I’ve created a couple myself. Here are a few of my creations:

有很多變體可以探索不同種類的動畫。 我自己創建了一對。 這是我的一些創作：

• Flippin’ burgers

  Flippin'漢堡

• Flippin’ juicy burgers

  Flippin多汁的漢堡

• Hamburger

  漢堡包

漢堡菜單的剖析 (The anatomy of the Hamburger Menu)

In its most simple incarnation, the Hamburger Menu comes as straight, parallel lines. Usually, they’re three. These lines stay in some form of a clickable container. Shapes and sizes of menus may vary, but their use is the same. Clicking them toggles the hamburger’s state. This interaction makes the menu go back and forth between its opened and closed state. The conventional way to portray the opened state is by showing an X. It signals to the user that tapping/clicking the button again closes the menu.

漢堡菜單最簡單的化身為直線，平行線。 通常，他們三歲。 這些行以某種形式可點擊的容器保留。 菜單的形狀和大小可能有所不同，但是它們的用法是相同的。 單擊它們可切換漢堡的狀態。 這種相互作用使菜單在其打開和關閉狀態之間來回移動。 描繪打開狀態的常規方法是顯示X。它向用戶發出信號，再次點擊/單擊按鈕將關閉菜單。

Ever so often, there’s an animation going between these two states. Buttons like these are excellent opportunities for web developers to delight their users. Generally speaking, it’s the perfect place to add an animation. Animating the button’s state transition is not just pleasing to the eye; it also serves a purpose. It’s a good UX to give users feedback on touch and click interactions.

在這兩個狀態之間經常會出現動畫。 像這樣的按鈕是Web開發人員取悅用戶的絕佳機會。 一般來說，這是添加動畫的理想場所。 動畫化按鈕的狀態轉換不僅令人賞心悅目； 它也有目的。 這是一個很好的UX，可以向用戶提供有關觸摸和單擊交互的反饋。

什么是SVG線動畫？ (What is SVG line animation?)

SVG line animation is, as the name implies, a technique to animate lines. Or, more specifically, SVG paths. It creates an appearance of drawing a line on the screen. The method emerged mid-last decade, and it has remained popular since. This article from 2014 explains the technique in detail: https://css-tricks.com/svg-line-animation-works/.

顧名思義，SVG線動畫是一種使線動畫的技術。 更具體地說，是SVG路徑。 它創建在屏幕上畫線的外觀。 該方法出現于最近十年中期，此后一直流行。 2014年的這篇文章詳細介紹了該技術： https ： //css-tricks.com/svg-line-animation-works/ 。

The effect is ideally suited for the Hamburger Menu as the widget is, most often, created with lines. This article discusses how to use the technique to animate between the two different states of the Hamburger Menu.

該效果最適合漢堡包菜單，因為該小部件通常是用線創建的。 本文討論如何使用該技術在“漢堡菜單”的兩個不同狀態之間進行動畫處理。

三條水平平行線 (The three horizontally parallel lines)

First of all, let’s start by drawing the three lines. Drawing vectors requires a vector editor. I.e., if you’re not a hard-core SVG coder and like to do it by hand. I use Inkscape to draw my vectors.

首先，讓我們開始繪制三條線。 繪制矢量需要矢量編輯器。 也就是說，如果您不是硬核SVG編碼器，并且喜歡手動操作。 我使用Inkscape繪制矢量。

The first thing to do is to find a suitable size for the SVG drawing. Using a 100 x 100 pixel SVG document is a good idea. Working with even numbers makes it easier to relate and work with sizes and proportions. It’s, in theory, possible to go with whatever size when drawing these vectors. Remember, the S in SVG stands for scalable.

首先要做的是為SVG圖紙找到合適的尺寸。 使用100 x 100像素的SVG文檔是個好主意。 使用偶數可以更輕松地關聯和處理大小和比例。 從理論上講，繪制這些向量時可以采用任何大小。 請記住，SVG中的S代表可擴展性。

When drawing the lines, let’s also reserve some wiggle room for the animation on the sides of the menu. This space is reserved for later on when animating the lines. In the editor, the pen tool creates new strokes.

繪制線條時，我們還要在菜單側面為動畫保留一些擺動空間。 留出空間供以后為線設置動畫時使用。 在編輯器中，鋼筆工具會創建新的筆觸。

Was it too quick for you??If?so, here’s the recipe

對您來說太快了嗎？ 如果是這樣，這是食譜

1. Draw a straight line on the upper part of the screen
   在屏幕上方畫一條直線
2. Move the end-points of the line to make it 60-pixel wide. Vertically center the line around y=29.
   移動線條的端點使其寬度為60像素。 將線垂直圍繞y = 29居中。
3. Set the stroke width to 6px
   將筆劃寬度設置為6px
4. Duplicate the line and move the copy to the center of the SVG document. At y=47px, the center of the copied line lands at 50px. Half the stroke width is 3px. I.e., 47 + 3 = 50.
   復制該行，然后將副本移到SVG文檔的中心。 在y = 47px處，復制行的中心降落為50px。 筆觸寬度的一半為3px。 即47 + 3 = 50。
5. Create another copy and place the third line at y=68px. Placing the third line at this position makes the hamburger symmetrically correct.
   創建另一個副本，并將第三行放置在y = 68px。 將第三條線放置在此位置可以使漢堡包對稱地正確。

The numbers above, e.g., the stroke width, need not be the exact numbers, used here, should you recreate this example. The important thing is choosing values that create something visually appealing. It is possible to tweak these numbers and fine-tune them. They should be such as the hamburger matches the style of the other content on the web page. It’s the web developer’s job to create a consistent look and feel building web pages.

如果您重新創建此示例，則上面的數字(例如筆劃寬度)不必是此處使用的確切數字。 重要的是選擇能夠創造視覺吸引力的價值。 可以調整這些數字并對其進行微調。 它們應該像漢堡包匹配網頁上其他內容的樣式。 創建一致的外觀和構建網頁是Web開發人員的工作。

A look at the produced code should look something like follows. These essential parts below should be found somewhere in the SVG code.

看一下生成的代碼應該看起來像以下內容。 以下這些重要部分應在SVG代碼中的某個位置找到。

<svg width=”100” height=”100” viewBox=”0 0 100 100”>…
  <path d="M 20,29 H 80" /> // top line
  <path d="M 20,50 H 80" /> // middle line
  <path d="M 20,71 H 80" /> // bottom line…
</svg>

X關閉圖標 (The X close icon)

Next up is creating the X close icon. The way to build it is by extending the top and bottom lines. The idea here is to make the SVG document include both shapes at the same time. Combing the opened/closed states goes perfectly together with the SVG line animation technique. It makes it possible to animate between the different shapes of the menu. The creation, at this point, might look like a bird’s nest. Don’t worry. It’ll make sense later on discussing the animation. The following three parts should be part of the model:

下一步是創建X關閉圖標。 構建它的方法是擴展頂行和底線。 這里的想法是使SVG文檔同時包含兩個形狀。 將打開/關閉狀態與SVG線動畫技術完美地結合在一起。 可以在菜單的不同形狀之間進行動畫處理。 此時的創作可能看起來像是一個燕窩。 不用擔心 稍后在討論動畫時會有意義。 該模型應包含以下三個部分：

• The straight lines (the hamburger)
  直線(漢堡)
• The connecting lines, joining the two shapes
  連接線，連接兩個形狀
• The X close icon
  X關閉圖標

The way to extend the line is to break up the process in three steps.

延長生產線的方法是將過程分為三個步驟。

1.延長線 (1. Extend the line)

The first step is to extend the top line with an edgy line that includes part of the X icon. The drawing, at this point, doesn’t need to be perfect. It just needs to be good enough, so you spot half the X.

第一步是用包括X圖標一部分的前鋒線擴展頂行。 此時，圖紙不需要是完美的。 它只需要足夠好，所以您會發現X的一半。

2.調整坐標 (2. Adjust the coordinates)

After extending the path, the next step is to move the connecting nodes to their appropriate coordinates. The connecting line can be arbitrary. However, the X icon should be proportional to the hamburger. In this example it’s a line going from (25px, 25px) to (75px, 75px).

擴展路徑后，下一步是將連接節點移動到其適當的坐標。 連接線可以是任意的。 但是，X圖標應與漢堡成比例。 在此示例中，這是一行從(25px，25px)到(75px，75px)的行。

3.使線條平滑 (3. Make the lines smooth)

Last but not least, converting the line to a Bezier curve makes it smooth. First, let’s look at what it looks like doing the above procedure for the top path. Here again, the pen tool once again comes in handy.

最后但并非最不重要的一點是，將線轉換為Bezier曲線可使其平滑。 首先，讓我們看一下對頂部路徑進行上述操作的過程。 在此，筆工具再次派上用場。

Once the top line is in place, it’s time to do the same procedure for the bottom line. Since everything needed is already on the screen, it then makes sense to reuse the work above. Duplicate, flip, and position the copy does the trick to replace the previous bottom line. Bringing objects forward & back is one way to access the right path at the right moment.

頂線到位后，就該對底線執行相同的步驟了。 由于所需的一切都已經出現在屏幕上，因此有必要重新使用上面的工作。 復制，翻轉和定位副本可以解決替換上一個底線的問題。 前后移動對象是在正確的時間訪問正確的路徑的一種方法。

移至HTML (Move to HTML)

When the model is complete, it’s time to move it over to HTML. Luckily, HTML is interoperable with SVG. That means that anything SVG directly works inside any HTML document. Copying the SVG code into the markup makes it appear on the screen when loading the page in a browser.

模型完成后，就該將其移至HTML了。 幸運的是，HTML可與SVG互操作。 這意味著任何SVG都可以直接在任何HTML文檔中運行。 將SVG代碼復制到標記中后，當在瀏覽器中加載頁面時，它就會顯示在屏幕上。

Placing references, HTML selectors, on the SVG DOM nodes, is what to do next. Doing so opens up the markup to the wonderful world of CSS. Or, more specifically, it enables manipulation of the SVG paths. With CSS, these SVG elements can have styles, be animated, and inspected. Below is what the structure of the CSS rules looks like after adding classes:

接下來，要做的是將引用，HTML選擇器放在SVG DOM節點上。 這樣做為CSS的美好世界打開了標記。 或者，更具體地說，它可以操縱SVG路徑。 使用CSS，這些SVG元素可以具有樣式，可以進行動畫處理和檢查。 添加類后，CSS規則的結構如下所示：

<style>
  .line { ... }
  .line1 { ... }
  .line2 { ... }
  .line3 { ... }
</style>...<svg width=”100” height=”100” viewBox=”0 0 100 100”>
  <path class="line line1" … /> // top line
  <path class="line line2" … /> // middle line
  <path class="line line3" … /> // bottom line
</svg>

Another thing to do is to center the menu and to remove the default margin. This is not a must, but it makes it more pleasant to work with the menu. A flexbox container, conveniently places the widget in the center of the browser window.

另一件事是將菜單居中并刪除默認邊距。 這不是必須的，但是它使使用菜單變得更加愉快。 一個flexbox容器，方便地將小部件放置在瀏覽器窗口的中心。

body {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100vh;
  margin: 0
}

這些線多長時間？ (How long are these lines?)

An essential part of the SVG line animation technique is knowing the length of the paths. Here is where the Dev Tools shines. The inspector’s console window can, in numerous ways, access DOM elements. One of the more convenient ways is the nifty focused element shorthand $0. It gives direct access to the currently focused node in the inspector. The function call getTotalLength, callable on any SVG path, measures the lines.

SVG線動畫技術的重要部分是了解路徑的長度。 這是開發工具的亮點。 檢查員的控制臺窗口可以通過多種方式訪問??DOM元素。 比較方便的方法之一是精巧的元素速記$ 0。 它可以直接訪問檢查器中當前聚焦的節點。 可在任何SVG路徑上調用的函數調用getTotalLength來測量行。

Measuring the lines gives the lengths 207px and 60px. It should come a no surprise to see the number 60 again. It is the original length of the hamburger lines. Another thing to note is that the first and the last lines are equally long except for minor rounding errors. This outcome is what to expect as they are duplicates. Both of them are 207px long when rounded upwards. These two numbers, 207 & 60, are the values needed to get started with the SVG line animation effect.

測量線的長度為207px和60px。 再次看到數字60也就不足為奇了。 這是漢堡包線的原始長度。 要注意的另一件事是，第一行和最后一行都一樣長，除了較小的舍入錯誤。 這是重復的結果，因此可以期待。 當向上舍入時，它們的長度均為207px。 這兩個數字207和60是開始使用SVG線條動畫效果所需的值。

深入探討SVG線動畫技術 (Diving into the SVG line animation technique)

A great way to get accustomed to the line animation technique is by using the inspector. The style editor lets you change the CSS rules with immediate feedback. Visualizing the change makes it easier to get a feel for how the CSS affects the SVG paths. The instant feedback loop quickly helps to hon in on desired values. The goal here is to use the model, created above, to find the following two sets of values:

習慣線條動畫技術的一種好方法是使用檢查器。 樣式編輯器使您可以立即反饋更改CSS規則。 可視化更改使您更容易了解CSS如何影響SVG路徑。 即時反饋循環可快速幫助您實現所需的值。 這里的目標是使用上面創建的模型來查找以下兩組值：

1. The values that make the hamburger appear again.
   再次使漢堡包出現的值。
2. The values that make the X icon appear again.
   使X圖標再次出現的值。

These two sets of values, in turn, represent the end-points in the animation. Interpolation between these two extremes is what creates the actual animation.

這兩組值依次表示動畫中的端點。 這兩個極端之間的插值是創建實際動畫的原因。

The first thing?to?do, working with the animation, is to set the stroke-dasharray rule for one of the long lines. The stroke-dasharray rule takes a range of values that describe dashes and gaps. The animation effect in this article needs only two values. They are one dash and one gap. One way to find the dash/gap value pair is to set both values to the full length of 207px and work backward. The keyboard’s up and down arrows stepwise alter the value in the editor. Stepping through the first value in the set of values reveals the hamburger.

使用動畫的第一件事是為其中一條長線設置stroke-dasharray規則。 stroke-dasharray規則采用一系列描述破折號和間隙的值。 本文中的動畫效果僅需要兩個值。 它們是一個破折號和一個空白。 查找破折號/間隙值對的一種方法是將兩個值都設置為207px的全長并向后工作。 鍵盤的向上和向下箭頭逐步更改編輯器中的值。 逐步通過一組值中的第一個值可以看到漢堡包。

The same procedure, as above, goes for the X icon. This time the second rule, stroke-dashoffset, comes into play. The offset pushes the line forward to reposition it. The diagonal line in the X is slightly longer?than?the?lines?in?the?hamburger. For this reason, the line needs an extension. Adding a handful of pixels adjusts its length.

X圖標的處理方法與上述相同。 這次第二個規則， stroke-dashoffset起作用了。 偏移將線向??前推以重新定位。 X中的對角線比漢堡包中的線稍長。 因此，線路需要擴展。 添加少量像素可調整其長度。

Now, let’s have a look at the results. Below are the different sets of values found:

現在，讓我們看一下結果。 以下是找到的不同值集：

<style>
  /* Hamburger */
  .line1 {
    stroke-dasharray 60 207;
    stroke-dashoffset 0;
  }
  .line2 {
    stroke-dasharray 60 60;
    stroke-dashoffset 0;
  }
  .line3 {
    stroke-dasharray 60 207;
    stroke-dashoffset 0;
  }  /* X icon */
  .opened .line1 {
    stroke-dasharray 90 207;
    stroke-dashoffset -134;
  }
  .opened .line2 {
    stroke-dasharray 1 60;
    stroke-dashoffset -30;
  }
  .opened .line3 {
    stroke-dasharray 90 207;
    stroke-dashoffset -134;
  }
</style>

動畫 (Animation)

The Dev Tools is a powerful ally when it comes to animation. With the inspector, it’s possible to test, fine-tune, and record animations. The style editor allows modifying CSS to re-run animations immediately. All inside the browser. The Dev Tools provides the perfect playground for exploring and crafting animations.

開發工具是動畫方面的強大盟友。 使用檢查器，可以測試，微調和錄制動畫。 樣式編輯器允許修改CSS以立即重新運行動畫。 全部在瀏覽器中。 開發工具為探索和制作動畫提供了理想的游樂場。

The simplest way to get objects moving on the screen is by using CSS transitions. They’re easy to use. One specifies what other CSS rules to animate. Setting the target rule, together with duration and easing, immediately enables animations. It is very convenient. Once in place, the only thing needed to start an animation is to change the value of the target rule. Here’s what the transition rule looks like for the Hamburger Menu:

使對象在屏幕上移動的最簡單方法是使用CSS過渡。 它們易于使用。 一個指定要動畫的其他CSS規則。 設置目標規則以及持續時間和緩動立即啟用動畫。 非常方便。 放置到位后，啟動動畫所需的唯一操作就是更改目標規則的值。 這是“漢堡菜單”的過渡規則：

transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);

Notice the specific easing used. The cubic Bezier easing above comes from the Material UI guidelines. It’s a bit more punchy compared to the regular ease easing.

請注意所使用的特定寬松政策。 上面的三次貝塞爾曲線緩和來自于Material UI指南。 與常規的寬松政策相比，它更具挑戰性 。

Here’s what fine-tuning in the Dev Tools might look like

這是開發工具中的微調功能

全部放在一起 (Putting it all together)

The event handler is the last step in creating the animation. It’s what makes the menu interactive. Toggling the “opened” class triggers the animation automatically. The only thing needed is a place to trigger the state transition. The SVG element itself serves as a perfect place to insert the handler.

事件處理程序是創建動畫的最后一步。 這就是使菜單具有交互性的原因。 切換“打開”類將自動觸發動畫。 唯一需要的是觸發狀態轉換的地方。 SVG元素本身是插入處理程序的理想場所。

<svg … onclick="this.classList.toggle('opened')">

輔助功能，更新版本 (Accessibility, updated version)

After publishing the first version of this article, Dennis Lembrée pointed out, that the above version is not accessible. Accessibility is important, so let’s fix the fundamental parts. The right thing to do is to wrap the menu inside a button and move the event handler to the button. With buttons, some of what’s needed for the menu to be accessible comes for free. The menu becomes focusable and it automatically enables keyboard tab navigation.

在發布本文的第一個版本后， DennisLembrée指出，以上版本不可訪問。 可訪問性很重要，因此讓我們修復基本部分。 正確的做法是將菜單包裝在按鈕內，然后將事件處理程序移至該按鈕。 使用按鈕，可以免費訪問菜單所需的一些功能。 菜單變得可聚焦，并自動啟用鍵盤選項卡導航。

Adding an additional aria-label is also very helpful. It gives contextual information to users relying on screen readers.

添加額外的aria標簽也非常有幫助。 它向依賴屏幕閱讀器的用戶提供上下文信息。

<button onclick="..." aria-label="Main Menu">
  <svg>
    ...
  </svg>
</button>

源代碼 (The source code)

And here’s the complete menu on Codepen

這是Codepen上的完整菜單

That’s it! If you reached this far, you can hopefully now know a bit more about Hamburger Menus. Thanks for reading, and the best of luck with your?animations!

而已！ 如果您到此為止，現在希望可以對漢堡菜單有所了解。 感謝您的閱讀，并祝您動畫順利！

Cheers,Mikael

干杯，米凱爾