Template:
A "hamburger" menu is a form of navigation menu that hides navigation links from the main page. When the user clicks an icon, the hidden content will slide into view.
The hidden menu is marked by the ☰ icon, which consists of three horizontal lines stacked on top of one another—like layers of a hamburger.
The hamburger menu is most often used for mobile apps, but it's also becoming popular on desktop websites, too. It's now often used on responsive sites to make better use of space on smaller phone and tablet screens.
hamburger-basic.html
basic.css
These files create a basic hamburger menu. Click on the hamburger icon and a menu will appear. The hamburger isn't visible in desktop mode, you must reduce with width of your browser or be on a mobile device to see it.
hamburger-animated.html
animated.css
These files create an animated hamburger menu and the code is more complicated than the basic hamburger example. When you click on the hamburger icon it animates into an X and the menu slides open. The hamburger isn't visible in desktop mode, you must reduce with width of your browser or be on a mobile device to see it.