A responsive CSS solution
HTML CSS JavaScript Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
screenshots
test-site
LICENSE
README.md
hamburger-menu.css
hamburger-menu.js

README.md

Hamburger Menu

A responsive CSS solution


Hamburger 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 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.

Test drive

Try it out: centerkey.com/hamburger-menu

Usage

HTML for Hamburger Menu:

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

Include the CSS and JavaScript:

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

Adjust the <body> padding in the CSS file as needed for the width of your menu.

Colors

Customize the colors by editing or overriding:

/* Hamburger Menu Colors */
nav.hamburger-menu .hamburger,
nav.hamburger-menu >ul >li >a {
   color: gainsboro;           /* menu font color */
   }
nav.hamburger-menu .hamburger,
nav.hamburger-menu >ul {
   background-color: black;    /* menu background color */
   }
nav.hamburger-menu >ul >li.current >a,
nav.hamburger-menu >ul >li:hover >a {
   color: white;               /* menu font highlight color on hover */
   background-color: dimgray;  /* menu background highlight color on hover */
   }

Highlight menu item for current page

To automatically highlight the selected menu item, add the data-menu attribute to each <li> tag in the Hamburger Menu and to the <main> tag.

Example products.html page:

...
<header>
   <nav class=hamburger-menu>
      <a class=hamburger href=#>&#9776;</a>
      <ul>
         <li data-menu=gateway> <a href=.>Home</a></li>
         <li data-menu=products><a href=products.html>Products</a></li>
         <li data-menu=about>   <a href=about.html>About</a></li>
      </ul>
   </nav>
</header>

<main data-menu=products>
   <h1>Products</h1>
   <p>Product info...</p>
</main>
...

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

Issues

This library has been tested on iPhones and Androids. If you encounter a bug or have a question, submit an issue.

License

MIT or WTFPL (your choice)