SAP|SAP 电商云 Spartacus UI 的自定义 hamburger 菜单
什么是 hamburger menu?
汉堡菜单或汉堡图标是网站和应用程序中通常打开到侧边菜单或导航抽屉中的按钮。
它是由交互设计师 Norm Cox 于 1981 年为 Xerox Star 个人工作站创建的,作为一种简单的方式与用户交流该按钮包含项目列表。
文章图片
hamburger 菜单的一些优势
- Recognizable(可识别)
文章图片
- clean
文章图片
在视觉空间非常宝贵的地方,例如移动应用程序和网站,汉堡菜单可以带来难以置信的价值。
毕竟,Web 页面的设计者永远不想让用户选择太多。 当面临大量选择时,客户很可能会感到沮丧,根本不会做出选择。
决策专家希娜·艾扬格 (Sheena Iyengar) 进行的一项研究发现,当购买选项较少时,人们购买的可能性要高出 10 倍。
这就是为什么汉堡菜单可以成为清理杂乱页面的好方法。
这是一个简单的解决方案,而且它不会妨碍您的用户体验。 因此,如果我们正在寻找一种方法来轻松访问您的导航菜单而不会让您的用户陷入困境,那么汉堡菜单是一个极佳的选择。
SAP Spartacus 项目里的 hamburger 菜单实现 【SAP|SAP 电商云 Spartacus UI 的自定义 hamburger 菜单】SAP Spartacus 项目 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 变量。
仅响应式方法无法解决
Accessibility
的所有用例,例如重新排序组件的能力。 可能还需要重新订购组件,以优化访问您店面的不同设备的用户体验。 Spartacus 中的标题就是一个很好的例子:对于大屏幕,所有元素都是可见的,但在小型设备上,一些组件隐藏在汉堡菜单后面,一些组件被重新排列。尽管 CSS 支持 DOM 元素的重新排序,包括 flex-box 和网格,但重新排序的 DOM 元素与 HTML 选项卡系统不同步。 这不会为使用标签系统浏览店面的人提供最佳体验。 每个断点的插槽配置解决了这个问题。 为每个断点(重新)构建布局。
例子:
文章图片
hamburger menu 在 preheader slot 内部:
文章图片
推荐阅读
- 恒源云(Gpushare)_【存储优化】/hy-tmp可以扩/缩容啦
- 华为云CDN如何提高缓存命中率
- 无缝融入 Kubernetes 生态 | 云原生网关支持 Ingress 资源
- ui|云计算会杀死开源吗()
- 大数据|对话阿里云(开源与自研如何共处())
- 数字化时代,如何做好用户体验与应用性能管理
- 深度揭秘阿里云|深度揭秘阿里云 Serverless Kubernetes
- 阿里云视频云「 vPaaS 」演绎了怎样的音视频应用开发「未来图景」
- 前端(react)上传到阿里云OSS存储|前端(react)上传到阿里云OSS存储 实例
- 算法|蓝桥云课 最大距离