What is a hamburger menu?
The hamburger menu or hamburger icon is a button on websites and apps that usually opens into a side menu or navigation drawer.
It was created by interaction designer Norm Cox in 1981 for the Xerox Star personal workstation as an easy way to communicate with the user. The button contains a list of items.
Some advantages of the hamburger menu
- Recognizable (recognizable)
Burger menus are everywhere - from apps to websites to computer software and video games, almost everywhere.
- clean
The hamburger menu is much cleaner than the poorly laid out web page below:
Where visual space is at a premium, such as mobile apps and websites, hamburger menus can be incredibly valuable.
After all, designers of Web pages never want users to have too many choices. When faced with a plethora of choices, customers are likely to get frustrated and not make a choice at all.
A study by decision-making expert Sheena Iyengar found that people are 10 times more likely to buy when there are fewer options to buy.
That's why a hamburger menu can be a great way to clean up a cluttered page.
It's a simple solution, and it won't hinder your user experience. So if we're looking for a way to easily access your navigation menu without bogging down your users, the hamburger menu is an excellent choice.
Implementation of hamburger menu in SAP Spartacus project
There is such a dependency in the SAP Spartacus project package.json:
This repository is a collection of CSS animated hamburger icons, including Sass files (modular and customizable):
https://jonsuh.com/hamburgers
How to use:
<link href="dist/hamburgers.css" rel="stylesheet">
The hamburger menu is based on the implementation of https://github.com/jonsuh/hamburgers. The library provides several configurable hamburger types. A specific type can be selected for the menu.
To allow for custom hamburgers, we use cx-hamburgerselectors . This selector is 扩展the hamburger selector provided by the lib.
In order to facilitate switching the hamburger type, we introduced the type $hamburger-typethat can be set to the library.
Customers can use the following sass configuration to change the type:
$cx-hamburger-type: elastic;
@import 'storefrontstyles/index';
Note : The sass variable must be set before importing the storefrontstyles library.
All use cases that cannot be addressed Accessibilityby a , such as the ability to reorder components. Components may also need to be reordered to optimize the user experience for different devices accessing your storefront. Header in Spartacus is a good example: on large screens all elements are visible, but on small devices some components are hidden behind the hamburger menu and some are rearranged.
Although CSS supports reordering of DOM elements, including flex-box and grids, reordering DOM elements is out of sync with the HTML tab system. This will not provide the best experience for people browsing the storefront using the tab system. The slot configuration per breakpoint solves this problem. (Re)build the layout for each breakpoint.
example:
The hamburger menu is inside the preheader slot:
