什么是 hamburger menu？

漢堡菜單或漢堡圖標(biāo)是網(wǎng)站和應(yīng)用程序中通常打開到側(cè)邊菜單或?qū)Ш匠閷现械陌粹o。

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

hamburger 菜單的一些優(yōu)勢

• Recognizable(可識別）

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

• clean

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

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

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

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

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

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

SAP Spartacus 項目里的 hamburger 菜單實現(xiàn)

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

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

https://jonsuh.com/hamburgers

使用方式：

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

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

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

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

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

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

注意：必須在導(dǎo)入 storefrontstyles 庫之前設(shè)置 sass 變量。

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

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

hamburger menu 在 preheader slot 內(nèi)部：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。