漢堡菜單
by Jared Tong
湯杰(Jared Tong)
開發人員在編寫漢堡菜單時犯的錯誤 (The mistake developers make when coding a hamburger menu)
What do The New York Times’ developers get wrong about the hamburger menu, and what do Disney’s and Wikipedia’s get right?
《紐約時報》的開發人員在漢堡菜單上犯了什么錯誤，迪士尼和維基百科的做錯了什么？
As far as I know, I’ve found only one way to style the hamburger menu’s open state that supports iOS Safari. (Presumably, you want a mobile view to work on iPhone!)
據我所知，我發現只有一種方式可以設置支持iOS Safari的漢堡菜單的打開狀態。 (想必您希望在iPhone上使用移動視圖！)
It’s all about how the hamburger menu is positioned.
這與漢堡菜單的放置方式有關。
許多漢堡菜單的問題 (The Problem with Many Hamburger Menus)
If your hamburger menu has no need for scroll… Congratulations! The CSS solution you’re thinking of now will probably work just fine: position the sidebar absolutely out of and into the view-port when the user clicks on the menu icon.
如果您的漢堡菜單不需要滾動……恭喜！ 您現在正在考慮CSS解決方案可能會很好地起作用：當用戶單擊菜單圖標時，將側邊欄絕對移出視口并放入視口中。
If your menu has more items than the view-port can display at once, this is what happens when your hamburger menu is positioned absolutely:
如果菜單中的項目多于視圖一次顯示的數量，則當絕對放置漢堡菜單時會發生以下情況：
If you don’t want to watch the video, I’ll try and describe it in words.
如果您不想觀看視頻，我將嘗試用文字描述。
Scrolling within the
position: absolutemenu is unpleasant: it does not scroll smoothly, and when it reaches the end of scroll, it does not bounce in that satisfying, patented rubber-band way. Try the hamburger menus on New York Times, or Pitchfork.在以下
position: absolute滾動position: absolute菜單令人不快：滾動不流暢，到達滾動末尾時，不會以令人滿意的專利橡皮筋彈跳。 試試《紐約時報》或干草叉上的漢堡菜單。If you over-scroll in the hamburger menu, iOS Safari will scroll the body instead. Try the sidebar on Viki.
如果在漢堡菜單中過度滾動，iOS Safari將改為滾動身體。 在Viki上嘗試側邊欄。
An alternative is to use
position:fixedand-webkit-overflow-scrolling: touchon the sidebar. Even then, if you tap beyond the menu, like scrolling on the sliver of main content exposed beside the sidebar, you will lose the ability to scroll within the menu. Try the hamburger menu on Grab.另一種方法是使用
position:fixed和-webkit-overflow-scrolling: touch側邊欄。 即使那樣，如果您點擊菜單之外的內容，例如滾動顯示在側邊欄旁邊的主要內容，也將失去在菜單中滾動的能力。 試試Grab上的漢堡菜單。
Notice how sometimes iOS scrolls the menu, sometimes it scrolls the body behind the menu? Frustrating!
請注意，iOS有時如何滾動菜單，有時它如何滾動菜單后面的主體？ 令人沮喪！
And FWIW, you can break the scroll on Apple.com too. An easy way to trigger the scroll on the hamburger menu is to use your phone horizontally.
和FWIW，您也可以在Apple.com上中斷滾動。 觸發漢堡菜單上滾動的一種簡單方法是水平使用手機。
解決方案 (The Solution)
Basically, the key thing you must remember about the Menu’s final, open state is this: instead of positioning the menu absolutely, it will be the main content that is positioned once the sidebar is opened. In other words, instead of positioning the menu, position everything else!
基本上，關于菜單的最終打開狀態，您必須記住的關鍵是：絕對不放置菜單，而是在打開側欄后定位的主要內容。 換句話說， 不要放置菜單 ， 而是放置其他所有內容 ！
Here is that in code, alongside explanatory comments:
這是代碼中的內容，以及解釋性注釋：
<html><head></head><body> <div class="sidebar">Hamburger menu links go here</div> <div class="main-content"><button class="hamburger-menu-icon" onClick="toggleSidebar()">?</button></div></body></html>/* Arbitrary CSS variable values for explanatory purposes */:root { --sidebar-width: 100px; --sidebar-bg-colour: blue;}.sidebar { display: none; position: relative; width: var(--sidebar-width);}@media (max-width: 767px) { html.sidebar-is-open .sidebar { display: block; /* The sidebar is just rendered in default position, as it appears in the document flow */ } html.sidebar-is-open .main-content { position: fixed; /* It is the main content that is positioned. This is the crux of the implementation. The rest is all sugar. Cons: the body will scroll to the top, losing your user's scroll position */ /* prevents resizing from its original full-screen width */ bottom: 0; left: 0; right: 0; top: 0; width: 100%; overflow: hidden; } /* Optional enhancement: make the over-scroll on iPhone the same color as the sidebar */ html.sidebar-is-open body { background-color: var(--sidebar-bg-colour); } .sidebar { background-color: var(--sidebar-bg-colour); }}const documentElement = document.querySelector("html");const contentElement = document.querySelector(".main-content");const sidebarElement = document.querySelector(".sidebar");const sidebarIsOpen = () => documentElement.classList.contains("sidebar-is-open");const openSidebar = () => { /* How you trigger the change is up to you */ documentElement.classList.add("sidebar-is-open");};const closeSidebar = () => { documentElement.classList.remove("sidebar-is-open");};const toggleSidebar = () => { sidebarIsOpen() ? closeSidebar() : openSidebar();};結論 (Conclusion)
So far I’ve found two big players who get it right: Wikipedia and Disney USA.
到目前為止，我發現有兩個正確的大公司： Wikipedia和Disney USA 。
Try their hamburger menus on iOS and see what a great experience the scrolling is!
在iOS上嘗試他們的漢堡包菜單，看看滾動帶來的絕佳體驗！
Hopefully you can spread the word, and fix hamburger menus from now on.
希望您能從現在開始傳播這個詞，并修復漢堡包菜單。
If you’re more of a beginner, you can find an explanation of what a hamburger menu is and how to build a hamburger menu from scratch on my blog.
如果您是初學者，可以在我的博客上找到有關什么是漢堡包菜單以及如何從頭開始構建漢堡包菜單的說明 。
翻譯自: https://www.freecodecamp.org/news/the-mistake-developers-make-when-coding-a-hamburger-menu-f46c7a3ff956/
漢堡菜單
