SAPeCommerceCloudSpartacusUI自定义汉堡菜单

什么是汉堡菜单？汉堡菜单或汉堡图标是网站和应用程序上的一个按钮，通常会打开侧边菜单或导航抽屉。它是由交互设计师NormCox于1981年为XeroxStar个人工作站创建的，作为一种与用户沟通的简单方式，该按钮包含一个项目列表。汉堡菜单的一些优点Recognitable（可识别的）汉堡菜单无处不在——从应用程序到网站到计算机软件和视频游戏，几乎无处不在。干净与下面布局不佳的网页相比，汉堡菜单要干净得多：在视觉空间非常宝贵的地方，例如移动应用程序和网站，汉堡菜单可以提供令人难以置信的价值。毕竟，Web页面的设计者从不想用选择来压倒用户。当面对过多的选择时，客户很可能会感到沮丧，根本不会做出选择。决策专家SheenaIyengar的一项研究发现，当购买选择较少时，人们购买的可能性要高10倍。这就是为什么汉堡菜单可以成为清理混乱页面的好方法。这是一个简单的解决方案，并且不会影响您的用户体验。因此，如果我们正在寻找一种方法来轻松访问您的导航菜单而不会让您的用户陷入困境，那么汉堡菜单是一个很好的选择。SAPSpartacus项目中的汉堡菜单在SAPSpartacus项目package.json中实现了这样一个依赖：这个代码库是CSS动画汉堡图标的集合，包括Sass文件（模块化和可定制）：https://jonsuh.com如何实现使用/hamburgers:汉堡菜单基于https://github.com/jonsuh/ham...的实现。该库提供了几种可配置的汉堡包类型。可以为菜单选择特定类型。为了允许自定义汉堡包，我们在汉堡包组件中使用cx-hamburger选择器。这个选择器扩展了lib提供的汉堡包选择器。为了方便切换汉堡类型，我们引入了$hamburger-type，可以设置为库提供的类型。客户可以使用以下sass配置更改类型：$cx-hamburger-type:elastic;@import'storefrontstyles/index';注意：必须在导入storefrontstyles库之前设置sass变量。仅靠反应性方法无法解决可访问性的所有用例，例如重新排序组件的能力。组件可能还需要重新排序，以优化访问您店面的不同设备的用户体验。Spartacus中的标题就是一个很好的例子：对于大屏幕，所有元素都是可见的，但在小设备上，一些组件隐藏在汉堡菜单后面，一些组件被重新排列。尽管CSS支持DOM元素的重新排序，包括flex-box和grid，但是重新排序的DOM元素与HTML标签系统不同步。这不会为使用标签系统浏览店面的人们提供最佳体验。每个断点的插槽配置解决了这个问题。为每个断点（重新）构建布局。示例：preheader插槽内的汉堡菜单：