☰ HamburgerMenu ☰
A responsive CSS solution
Hamburger button menus should be used with caution as they can impair user interaction. As they say, "Out of sight, out of mind".
When you do need a hamburger button menu, this solution uses CSS to replace the navigation menu with a tappable hamburger icon on mobile devices or any browser with a sufficiently narrow screen. Tapping the hamburger reveals the navigation menu with smooth CSS animation.
A) Take it for spin
Try it out:
(manually resize your desktop browser to the smallest width to simulate a mobile device)
See the x3000.html test page for an example or follow the instructions below.
Insert the following HTML into your web page and modify the menu items (
<li>) as appropriate
for your website:
☰HomePage 1Page 2Page 3
...or from the jsDelivr CDN:
...the HamburgerMenu files can be installed using npm:
$ npm install hamburger-menu
Change the width and colors by adding the CSS below into your website and modifying it:
/* HamburgerMenu width and colors */
D) Highlight menu item for current page
HamburgerMenu automatically highlights the selected menu item.
Turn off automatic highlighting by either:
- Not loading the
- Adding the class
A menu item can be highlighted by adding the class
current to the appropriate
<li> element in
the HTML or programmatically after the page has been loaded.
Example of highlighting the menu item for "Page 2":
...and an equivalent example using jQuery:
To support archaic web browsers, add a polyfill for URL to your website.
E) Removing jQuery dependency
hamburger-menu.js file depends on jQuery, but you can eliminate both jQuery
document; //workaround for sticky hover on mobile
This library has been tested on iPhone and Android mobile devices. If you encounter a bug or have a question, submit an issue.