什么是 hamburger menu？

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

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

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

• Recognizable(可識(shí)別）

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

• clean

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

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

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

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

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

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

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

SAP Spartacus 項(xiàng)目 package.json 里有這樣一個(gè)依賴：

這個(gè)代碼倉(cāng)庫(kù)是一個(gè) CSS 動(dòng)畫(huà)漢堡包圖標(biāo)的集合，包括 Sass 文件（模塊化和可定制）：

https://jonsuh.com/hamburgers

使用方式：

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

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

為了允許自定義漢堡，我們?cè)跐h堡組件中使用了 cx-hamburger 選擇器。 這個(gè)選擇器擴(kuò)展了 lib 提供的漢堡包選擇器。

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

客戶可以使用以下 sass 配置來(lái)更改類型：

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

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

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

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

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

總結(jié)

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

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