☰  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) Try It Out

Interactive example: https://hamburger-menu.js.org

B) Setup

Include the HamburgerMenu CSS and JavaScript:

...
<link rel=stylesheet href=hamburger-menu.css>
...
<script src=hamburger-menu.js></script>
...

...or from the jsDelivr CDN:

...
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/hamburger-menu.min.css>
...
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/hamburger-menu.min.js></script>
...

...the HamburgerMenu files can be installed using npm:

$ npm install hamburger-menu

C) Usage

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:

<nav class=hamburger-menu>
   <a class=hamburger href=#>&#9776;</a>
   <aside>
      <ul>
         <li><a href=.>Home</a></li>
         <li><a href=page1.html>Page 1</a></li>
         <li><a href=page2.html>Page 2</a></li>
         <li><a href=page3.html>Page 3</a></li>
      </ul>
   </aside>
</nav>

D) Customize

Change the width and colors by adding the CSS below into your website and modifying it:

/* HamburgerMenu ☰ Custom width and colors */
body {
   padding-right: 50px;         /* gutter on left and right sides of page */
   padding-left: 200px;         /* set to "padding-right" + "width"(aside) */
   }
nav.hamburger-menu aside {
   width: 150px;                /* menu width */
   }
nav.hamburger-menu {
   color: gainsboro;            /* menu font color */
   background-color: teal;      /* menu background color */
   }
nav.hamburger-menu aside ul li.current {
   border-color: white;         /* border color for selected menu item */
   }
nav.hamburger-menu aside ul li.current >span,
nav.hamburger-menu aside ul li.current >a,
nav.hamburger-menu aside ul li >span:hover,
nav.hamburger-menu aside ul li >a:hover {
   color: white;                /* menu font highlight color */
   background-color: darkcyan;  /* menu background highlight color */
   }

E) Highlight Menu Item for Current Page

HamburgerMenu automatically highlights the selected menu item.

Turn off automatic highlighting by either:

1. Not loading the hamburger-menu.js file
2. Adding the class disable-auto-highlight to the <aside> element

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":

<li class=current><a href=page2.html>Page 2</a></li>

Note: To support old legacy web browsers, add a polyfill for URL to your website.

F) hamburger-menu.js File is Optional

You can the hamburger-menu.js file by incorporating this one line of JavaScript in your website:

document.addEventListener('click', () => {});  //workaround for sticky hover on mobile

G) Issues

This library has been tested on iPhone and Android mobile devices. If you encounter a bug or have a question, submit an issue.

MIT License