菜单窗口_菜单
菜單窗口
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.
漢堡菜單小部件現(xiàn)在在其他所有網(wǎng)站上。 它已經(jīng)成為Web的代名詞，甚至可能成為Web開發(fā)的代名詞。 例如，看看Dribbble或Codepen。 在這里，您會(huì)發(fā)現(xiàn)很多示例。 它們具有各種形狀和大小，其中一種比另一種更為精致。 開發(fā)人員和設(shè)計(jì)師似乎無(wú)法獲得足夠的小部件。
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.
漢堡菜單并非沒(méi)有爭(zhēng)議。 有些人討厭它，有些人喜歡它。 許多文章都在爭(zhēng)論它及其替代方案。 有人認(rèn)為它在歷史書中應(yīng)有的地位。 無(wú)論其命運(yùn)如何，它仍然得到廣泛使用。 一遍又一遍，它不斷出現(xiàn)在新的網(wǎng)站。 對(duì)于通常隱藏菜單的移動(dòng)視圖而言，它尤其受歡迎。
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:
有很多變體可以探索不同種類的動(dòng)畫。 我自己創(chuàng)建了一對(duì)。 這是我的一些創(chuàng)作：
Flippin’ burgers
Flippin'漢堡
Flippin’ juicy burgers
Flippin多汁的漢堡
Hamburger
漢堡包
漢堡菜單的剖析 (The anatomy of the Hamburger Menu)
the two states of the hamburger menu漢堡菜單的兩種狀態(tài)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.
漢堡菜單最簡(jiǎn)單的化身為直線，平行線。 通常，他們?nèi)龤q。 這些行以某種形式可點(diǎn)擊的容器保留。 菜單的形狀和大小可能有所不同，但是它們的用法是相同的。 單擊它們可切換漢堡的狀態(tài)。 這種相互作用使菜單在其打開和關(guān)閉狀態(tài)之間來(lái)回移動(dòng)。 描繪打開狀態(tài)的常規(guī)方法是顯示X。它向用戶發(fā)出信號(hào)，再次點(diǎn)擊/單擊按鈕將關(guān)閉菜單。
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.
在這兩個(gè)狀態(tài)之間經(jīng)常會(huì)出現(xiàn)動(dòng)畫。 像這樣的按鈕是Web開發(fā)人員取悅用戶的絕佳機(jī)會(huì)。 一般來(lái)說(shuō)，這是添加動(dòng)畫的理想場(chǎng)所。 動(dòng)畫化按鈕的狀態(tài)轉(zhuǎn)換不僅令人賞心悅目； 它也有目的。 這是一個(gè)很好的UX，可以向用戶提供有關(guān)觸摸和單擊交互的反饋。
什么是SVG線動(dòng)畫？ (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線動(dòng)畫是一種使線動(dòng)畫的技術(shù)。 更具體地說(shuō)，是SVG路徑。 它創(chuàng)建在屏幕上畫線的外觀。 該方法出現(xiàn)于最近十年中期，此后一直流行。 2014年的這篇文章詳細(xì)介紹了該技術(shù)： 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.
該效果最適合漢堡包菜單，因?yàn)樵撔〔考ǔＪ怯镁€創(chuàng)建的。 本文討論如何使用該技術(shù)在“漢堡菜單”的兩個(gè)不同狀態(tài)之間進(jìn)行動(dòng)畫處理。
三條水平平行線 (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.
首先，讓我們開始繪制三條線。 繪制矢量需要矢量編輯器。 也就是說(shuō)，如果您不是硬核SVG編碼器，并且喜歡手動(dòng)操作。 我使用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文檔是個(gè)好主意。 使用偶數(shù)可以更輕松地關(guān)聯(lián)和處理大小和比例。 從理論上講，繪制這些向量時(shí)可以采用任何大小。 請(qǐng)記住，SVG中的S代表可擴(kuò)展性。
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.
繪制線條時(shí)，我們還要在菜單側(cè)面為動(dòng)畫保留一些擺動(dòng)空間。 留出空間供以后為線設(shè)置動(dòng)畫時(shí)使用。 在編輯器中，鋼筆工具會(huì)創(chuàng)建新的筆觸。
Video of drawing a hamburger畫一個(gè)漢堡的視頻Was it too quick for you??If?so, here’s the recipe
對(duì)您來(lái)說(shuō)太快了嗎？ 如果是這樣，這是食譜
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.
如果您重新創(chuàng)建此示例，則上面的數(shù)字(例如筆劃寬度)不必是此處使用的確切數(shù)字。 重要的是選擇能夠創(chuàng)造視覺(jué)吸引力的價(jià)值。 可以調(diào)整這些數(shù)字并對(duì)其進(jìn)行微調(diào)。 它們應(yīng)該像漢堡包匹配網(wǎng)頁(yè)上其他內(nèi)容的樣式。 創(chuàng)建一致的外觀和構(gòu)建網(wǎng)頁(yè)是Web開發(fā)人員的工作。
A look at the produced code should look something like follows. These essential parts below should be found somewhere in the SVG code.
看一下生成的代碼應(yīng)該看起來(lái)像以下內(nèi)容。 以下這些重要部分應(yīng)在SVG代碼中的某個(gè)位置找到。
<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關(guān)閉圖標(biāo) (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:
下一步是創(chuàng)建X關(guān)閉圖標(biāo)。 構(gòu)建它的方法是擴(kuò)展頂行和底線。 這里的想法是使SVG文檔同時(shí)包含兩個(gè)形狀。 將打開/關(guān)閉狀態(tài)與SVG線動(dòng)畫技術(shù)完美地結(jié)合在一起。 可以在菜單的不同形狀之間進(jìn)行動(dòng)畫處理。 此時(shí)的創(chuàng)作可能看起來(lái)像是一個(gè)燕窩。 不用擔(dān)心 稍后在討論動(dòng)畫時(shí)會(huì)有意義。 該模型應(yīng)包含以下三個(gè)部分：
- The straight lines (the hamburger) 直線(漢堡)
- The connecting lines, joining the two shapes 連接線，連接兩個(gè)形狀
- The X close icon X關(guān)閉圖標(biāo)
The way to extend the line is to break up the process in three steps.
延長(zhǎng)生產(chǎn)線的方法是將過(guò)程分為三個(gè)步驟。
1.延長(zhǎng)線 (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圖標(biāo)一部分的前鋒線擴(kuò)展頂行。 此時(shí)，圖紙不需要是完美的。 它只需要足夠好，所以您會(huì)發(fā)現(xiàn)X的一半。
2.調(diào)整坐標(biāo) (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).
擴(kuò)展路徑后，下一步是將連接節(jié)點(diǎn)移動(dòng)到其適當(dāng)?shù)淖鴺?biāo)。 連接線可以是任意的。 但是，X圖標(biāo)應(yīng)與漢堡成比例。 在此示例中，這是一行從(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.
最后但并非最不重要的一點(diǎn)是，將線轉(zhuǎn)換為Bezier曲線可使其平滑。 首先，讓我們看一下對(duì)頂部路徑進(jìn)行上述操作的過(guò)程。 在此，筆工具再次派上用場(chǎng)。
Video of extending a line延長(zhǎng)線視頻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.
頂線到位后，就該對(duì)底線執(zhí)行相同的步驟了。 由于所需的一切都已經(jīng)出現(xiàn)在屏幕上，因此有必要重新使用上面的工作。 復(fù)制，翻轉(zhuǎn)和定位副本可以解決替換上一個(gè)底線的問(wèn)題。 前后移動(dòng)對(duì)象是在正確的時(shí)間訪問(wèn)正確的路徑的一種方法。
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了。 幸運(yùn)的是，HTML可與SVG互操作。 這意味著任何SVG都可以直接在任何HTML文檔中運(yùn)行。 將SVG代碼復(fù)制到標(biāo)記中后，當(dāng)在瀏覽器中加載頁(yè)面時(shí)，它就會(huì)顯示在屏幕上。
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:
接下來(lái)，要做的是將引用，HTML選擇器放在SVG DOM節(jié)點(diǎn)上。 這樣做為CSS的美好世界打開了標(biāo)記。 或者，更具體地說(shuō)，它可以操縱SVG路徑。 使用CSS，這些SVG元素可以具有樣式，可以進(jìn)行動(dòng)畫處理和檢查。 添加類后，CSS規(guī)則的結(jié)構(gòu)如下所示：
<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.
另一件事是將菜單居中并刪除默認(rèn)邊距。 這不是必須的，但是它使使用菜單變得更加愉快。 一個(gè)flexbox容器，方便地將小部件放置在瀏覽器窗口的中心。
body {align-items: center;
display: flex;
justify-content: center;
height: 100vh;
margin: 0
}
這些線多長(zhǎng)時(shí)間？ (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線動(dòng)畫技術(shù)的重要部分是了解路徑的長(zhǎng)度。 這是開發(fā)工具的亮點(diǎn)。 檢查員的控制臺(tái)窗口可以通過(guò)多種方式訪問(wèn)??DOM元素。 比較方便的方法之一是精巧的元素速記$ 0。 它可以直接訪問(wèn)檢查器中當(dāng)前聚焦的節(jié)點(diǎn)。 可在任何SVG路徑上調(diào)用的函數(shù)調(diào)用getTotalLength來(lái)測(cè)量行。
Finding the length of the lines尋找線的長(zhǎng)度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.
測(cè)量線的長(zhǎng)度為207px和60px。 再次看到數(shù)字60也就不足為奇了。 這是漢堡包線的原始長(zhǎng)度。 要注意的另一件事是，第一行和最后一行都一樣長(zhǎng)，除了較小的舍入錯(cuò)誤。 這是重復(fù)的結(jié)果，因此可以期待。 當(dāng)向上舍入時(shí)，它們的長(zhǎng)度均為207px。 這兩個(gè)數(shù)字207和60是開始使用SVG線條動(dòng)畫效果所需的值。
深入探討SVG線動(dòng)畫技術(shù) (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:
習(xí)慣線條動(dòng)畫技術(shù)的一種好方法是使用檢查器。 樣式編輯器使您可以立即反饋更改CSS規(guī)則。 可視化更改使您更容易了解CSS如何影響SVG路徑。 即時(shí)反饋循環(huán)可快速幫助您實(shí)現(xiàn)所需的值。 這里的目標(biāo)是使用上面創(chuàng)建的模型來(lái)查找以下兩組值：
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.
這兩組值依次表示動(dòng)畫中的端點(diǎn)。 這兩個(gè)極端之間的插值是創(chuàng)建實(shí)際動(dòng)畫的原因。
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.
使用動(dòng)畫的第一件事是為其中一條長(zhǎng)線設(shè)置stroke-dasharray規(guī)則。 stroke-dasharray規(guī)則采用一系列描述破折號(hào)和間隙的值。 本文中的動(dòng)畫效果僅需要兩個(gè)值。 它們是一個(gè)破折號(hào)和一個(gè)空白。 查找破折號(hào)/間隙值對(duì)的一種方法是將兩個(gè)值都設(shè)置為207px的全長(zhǎng)并向后工作。 鍵盤的向上和向下箭頭逐步更改編輯器中的值。 逐步通過(guò)一組值中的第一個(gè)值可以看到漢堡包。
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圖標(biāo)的處理方法與上述相同。 這次第二個(gè)規(guī)則， stroke-dashoffset起作用了。 偏移將線向??前推以重新定位。 X中的對(duì)角線比漢堡包中的線稍長(zhǎng)。 因此，線路需要擴(kuò)展。 添加少量像素可調(diào)整其長(zhǎng)度。
Now, let’s have a look at the results. Below are the different sets of values found:
現(xiàn)在，讓我們看一下結(jié)果。 以下是找到的不同值集：
<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>
動(dòng)畫 (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.
開發(fā)工具是動(dòng)畫方面的強(qiáng)大盟友。 使用檢查器，可以測(cè)試，微調(diào)和錄制動(dòng)畫。 樣式編輯器允許修改CSS以立即重新運(yùn)行動(dòng)畫。 全部在瀏覽器中。 開發(fā)工具為探索和制作動(dòng)畫提供了理想的游樂(lè)場(chǎng)。
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:
使對(duì)象在屏幕上移動(dòng)的最簡(jiǎn)單方法是使用CSS過(guò)渡。 它們易于使用。 一個(gè)指定要?jiǎng)赢嫷钠渌鸆SS規(guī)則。 設(shè)置目標(biāo)規(guī)則以及持續(xù)時(shí)間和緩動(dòng)立即啟用動(dòng)畫。 非常方便。 放置到位后，啟動(dòng)動(dòng)畫所需的唯一操作就是更改目標(biāo)規(guī)則的值。 這是“漢堡菜單”的過(guò)渡規(guī)則：
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.
請(qǐng)注意所使用的特定寬松政策。 上面的三次貝塞爾曲線緩和來(lái)自于Material UI指南。 與常規(guī)的寬松政策相比，它更具挑戰(zhàn)性 。
Here’s what fine-tuning in the Dev Tools might look like
這是開發(fā)工具中的微調(diào)功能
全部放在一起 (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.
事件處理程序是創(chuàng)建動(dòng)畫的最后一步。 這就是使菜單具有交互性的原因。 切換“打開”類將自動(dòng)觸發(fā)動(dòng)畫。 唯一需要的是觸發(fā)狀態(tài)轉(zhuǎn)換的地方。 SVG元素本身是插入處理程序的理想場(chǎng)所。
<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.
在發(fā)布本文的第一個(gè)版本后， DennisLembrée指出，以上版本不可訪問(wèn)。 可訪問(wèn)性很重要，因此讓我們修復(fù)基本部分。 正確的做法是將菜單包裝在按鈕內(nèi)，然后將事件處理程序移至該按鈕。 使用按鈕，可以免費(fèi)訪問(wèn)菜單所需的一些功能。 菜單變得可聚焦，并自動(dòng)啟用鍵盤選項(xiàng)卡導(dǎo)航。
Adding an additional aria-label is also very helpful. It gives contextual information to users relying on screen readers.
添加額外的aria標(biāo)簽也非常有幫助。 它向依賴屏幕閱讀器的用戶提供上下文信息。
<button onclick="..." aria-label="Main Menu"><svg>
...
</svg>
</button>
源代碼 (The source code)
And here’s the complete menu on Codepen
這是Codepen上的完整菜單
Full source on CodepenCodepen的完整資料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!
而已！ 如果您到此為止，現(xiàn)在希望可以對(duì)漢堡菜單有所了解。 感謝您的閱讀，并祝您動(dòng)畫順利！
Cheers,Mikael
干杯，米凱爾
翻譯自: https://uxdesign.cc/the-menu-210bec7ad80c
菜單窗口
總結(jié)
- 上一篇： 算法分析与设计-线性时间选择详解（通俗易
- 下一篇： nekohtml和htmlparser