什么是 hamburger menu？

漢堡菜單或漢堡圖標是網站和應用程序中通常打開到側邊菜單或導航抽屜中的按鈕。

它是由交互設計師 Norm Cox 于 1981 年為 Xerox Star 個人工作站創建的，作為一種簡單的方式與用戶交流該按鈕包含項目列表。

hamburger 菜單的一些優勢

• Recognizable(可識別）

漢堡菜單無處不在——從應用程序到網站，再到計算機軟件和視頻游戲，幾乎無處不在。

• clean

同下面這個糟糕布局的 web 頁面相比，hamburger 菜單清爽得多：

在視覺空間非常寶貴的地方，例如移動應用程序和網站，漢堡菜單可以帶來難以置信的價值。

畢竟，Web 頁面的設計者永遠不想讓用戶選擇太多。 當面臨大量選擇時，客戶很可能會感到沮喪，根本不會做出選擇。

決策專家希娜·艾揚格 (Sheena Iyengar) 進行的一項研究發現，當購買選項較少時，人們購買的可能性要高出 10 倍。

這就是為什么漢堡菜單可以成為清理雜亂頁面的好方法。

這是一個簡單的解決方案，而且它不會妨礙您的用戶體驗。 因此，如果我們正在尋找一種方法來輕松訪問您的導航菜單而不會讓您的用戶陷入困境，那么漢堡菜單是一個極佳的選擇。

SAP Spartacus 項目里的 hamburger 菜單實現

SAP Spartacus 項目 package.json 里有這樣一個依賴：

這個代碼倉庫是一個 CSS 動畫漢堡包圖標的集合，包括 Sass 文件（模塊化和可定制）：

https://jonsuh.com/hamburgers

使用方式：

<link href="dist/hamburgers.css" rel="stylesheet">

漢堡菜單基于 https://github.com/jonsuh/hamburgers 的實現。 該庫提供了多種可配置的漢堡包類型。 可以為菜單選擇特定類型。

為了允許自定義漢堡，我們在漢堡組件中使用了 cx-hamburger 選擇器。 這個選擇器擴展了 lib 提供的漢堡包選擇器。

為了方便切換漢堡包類型，我們引入了$hamburger-type，可以設置為庫提供的類型。

客戶可以使用以下 sass 配置來更改類型：

$cx-hamburger-type: elastic;@import 'storefrontstyles/index';

注意：必須在導入 storefrontstyles 庫之前設置 sass 變量。

僅響應式方法無法解決 Accessibility 的所有用例，例如重新排序組件的能力。 可能還需要重新訂購組件，以優化訪問您店面的不同設備的用戶體驗。 Spartacus 中的標題就是一個很好的例子：對于大屏幕，所有元素都是可見的，但在小型設備上，一些組件隱藏在漢堡菜單后面，一些組件被重新排列。

盡管 CSS 支持 DOM 元素的重新排序，包括 flex-box 和網格，但重新排序的 DOM 元素與 HTML 選項卡系統不同步。 這不會為使用標簽系統瀏覽店面的人提供最佳體驗。 每個斷點的插槽配置解決了這個問題。 為每個斷點（重新）構建布局。
例子：

hamburger menu 在 preheader slot 內部：

總結

以上是生活随笔為你收集整理的SAP 电商云 Spartacus UI 的自定义 hamburger 菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。