关于javascript:SAP-电商云-Spartacus-UI-的自定义-hamburger-菜单

什么是 hamburger menu？

汉堡菜单或汉堡图标是网站和应用程序中通常关上到侧边菜单或导航抽屉中的按钮。

它是由交互设计师 Norm Cox 于 1981 年为 Xerox Star 集体工作站创立的，作为一种简略的形式与用户交换该按钮蕴含我的项目列表。

汉堡菜单无处不在——从应用程序到网站，再到计算机软件和视频游戏，简直无处不在。

同上面这个蹩脚布局的 web 页面相比，hamburger 菜单清新得多：

在视觉空间十分贵重的中央，例如挪动应用程序和网站，汉堡菜单能够带来难以置信的价值。

毕竟，Web 页面的设计者永远不想让用户抉择太多。当面临大量抉择时，客户很可能会感到丧气，基本不会做出抉择。

决策专家希娜·艾扬格 (Sheena Iyengar) 进行的一项钻研发现，当购买选项较少时，人们购买的可能性要高出 10 倍。

这就是为什么汉堡菜单能够成为清理芜杂页面的好办法。

这是一个简略的解决方案，而且它不会障碍您的用户体验。因而，如果咱们正在寻找一种办法来轻松拜访您的导航菜单而不会让您的用户陷入困境，那么汉堡菜单是一个极佳的抉择。

SAP Spartacus 我的项目 package.json 里有这样一个依赖：

这个代码仓库是一个 CSS 动画汉堡包图标的汇合，包含 Sass 文件（模块化和可定制）：

https://jonsuh.com/hamburgers

应用形式：

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

汉堡菜单基于 https://github.com/jonsuh/ham… 的实现。该库提供了多种可配置的汉堡包类型。能够为菜单抉择特定类型。

为了容许自定义汉堡，咱们在汉堡组件中应用了 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 外部：

hamburger 菜单的一些劣势