HTML JavaScript CSS Shell
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
screenshots
spec
src
.gitignore
.travis.yml
LICENSE.txt
README.md
gulpfile.js
package.json
task-runner.sh.command

README.md

☰  HamburgerMenu  ☰

A responsive CSS solution

License: MIT npm Known Vulnerabilities Build Status

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:
centerkey.com/hamburger-menu
(manually resize your desktop browser to the smallest width to simulate a mobile device)

screenshot screenshot screenshot

B) 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>

Include the HamburgerMenu CSS and JavaScript:

...
<link rel=stylesheet href=hamburger-menu.css>
...
<script src=https://cdn.jsdelivr.net/npm/jquery@3.3/dist/jquery.min.js></script>
<script src=hamburger-menu.js></script>
...

...or from the jsDelivr CDN:

...
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/hamburger-menu@0.1/dist/hamburger-menu.min.css>
...
<script src=https://cdn.jsdelivr.net/npm/jquery@3.3/dist/jquery.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/hamburger-menu@0.1/dist/hamburger-menu.min.js></script>
...

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

$ npm install hamburger-menu

C) Customize

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

/* HamburgerMenu 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: seagreen;  /* 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: darkseagreen;   /* menu background highlight color */
   }

D) 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>

...and an equivalent example using jQuery:

$('nav.hamburger-menu').find('a[href=page2.html]').parent().addClass('current');

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

E) Removing jQuery dependency

The hamburger-menu.js file depends on jQuery, but you can eliminate both jQuery and the hamburger-menu.js file by incorporating this one line of JavaScript in your website:

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

F) Issues

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

G) License

MIT