菜单窗口_菜单

菜单窗口

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)

the two states 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?)

Drawing a line

画一条线

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.

绘制线条时，我们还要在菜单侧面为动画保留一些摆动空间。 留出空间供以后为线设置动画时使用。 在编辑器中，钢笔工具会创建新的笔触。

Video of drawing a hamburger

画一个汉堡的视频

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曲线可使其平滑。 首先，让我们看一下对顶部路径进行上述操作的过程。 在此，笔工具再次派上用场。

Video of extending a line

延长线视频

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.

顶线到位后，就该对底线执行相同的步骤了。 由于所需的一切都已经出现在屏幕上，因此有必要重新使用上面的工作。 复制，翻转和定位副本可以解决替换上一个底线的问题。 前后移动对象是在正确的时间访问正确的路径的一种方法。

Completing the model

完成模型

移至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来测量行。

Finding the length of the lines

寻找线的长度

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上的完整菜单

Full source 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

干杯，米凯尔

翻译自: https://uxdesign.cc/the-menu-210bec7ad80c

菜单窗口