Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

hamburger-menu

0.3.2 • Public • Published

☰  HamburgerMenu  ☰

A responsive CSS solution

License:MIT npm Dependencies Vulnerabilities Hits Build

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

screenshot screenshot screenshot

B) Setup

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.3/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.3/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>

...and an equivalent example using jQuery:

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

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

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

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

install

npm i hamburger-menu

Downloadsweekly downloads

96

version

0.3.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability