FF2+ IE8+ Opr8+

Hamburger Icon Menu

Author: Dynamic Drive

Description: This menu combines the two popular trends of a full screen menu and using an "hamburger" style icon to toggle it to create a lightweight, elegant mobile friendly site menu! The menu toggler appears fixed on the page, and apart from displaying the hamburger icon, can be extended to show additional top level links. Clicking on the hamburger icon reveals a full screen menu that takes advantage of the entire screen to comfortably display your menu links even on small screen devices.

Hamburger Icon Menu is extremely compact and easy to set up, with all of the menu links defined as HTML markup on the page. Simply edit the HTML to customize the links.

Demo (see upper right corner of page):


Directions Developer's View

Step 1: Add the below code to the HEAD section of your page:

Select All

This script uses the following external files. Download them below (right click, and select "Save As"):

IMPORTANT: Your page should carry the META tag <meta name="viewport" content="width=device-width, initial-scale=1"> in the HEAD section of your page to ensure the best mobile experience with this menu. This META tag instructs mobile browsers not to zoom out when rendering the webpage by default, which can lead to the menu appearing too small to start.

Step 2: Then, add the below menu markup anywhere inside the BODY of your page outside any other tags, such as right above the closing </body> tag:

Select All

Customizing the Menu links

All of the menu contents are defined as HTML markup in the code of Step 2 for you to edit. Structurally the menu is divided into two parts:

1) The Hamburger Icon Toggler UI portion:

<div id="hamburgerui">
<ul>
<li><a href="http://www.dynamicdrive.com/forums/">Contact</a></li>
<li><a href="#"><span id="navtoggler"></span></a></li>
</ul>
</div>

The ID of the "hamburger" toggler UI should not be changed ("hamburgerui"). You can add additional LIs to the enclosed UL to show additional top level links apart from the default "Contact" item. The last LI should always be reserved to display the hamburger icon, however.

Note: You can specify to hide all of the LIs (except the Hamburger Icon LI) from the page based on how much the user has scrolled on the page.

2) The Full Screen Menu portion:

<nav id="fullscreenmenu">
	<ul>
	<li><a href="http://www.dynamicdrive.com">Home</a></li>
	<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
	<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
	<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
	"
	"
</ul>
</nav>

Simply modify the links inside the "fullscreenmenu" UL to your own.

Changing the look of the menu

All menu styles are defined inside hamburgericonmenu.css. Simply refer to comments inside this file to make changes to the menu's look, such as colors, font size, CSS media breakpoints etc.

Other settings

Inside hamburgericonmenu.js there are two menu behavior related settings you can fine tune:

var settings = {
	shrinktogglerAfter: 'firstpage', // shrink hamburgerui UL to just show last LI with hamburger icon when user scrolls the page down? 'firstpage' or px number (ie: 200)
	dismissmenuDelay: 200 // delay in miliseconds after user clicks on full screen menu before hiding it
}
  • shrinktogglerAfter: This setting determines when to "shrink" the fixed  "hamburgerui" element that shows the "hamburger" icon menu on the page when the user scrolls the page. When shrunk, all of the LI elements inside "hamburgerui" element  are hidden with the exception of the last LI housing the hamburger icon itself for a more minimal UI.  Three valid values are accepted:

    • "firstpage": Shrinks the UI whenever the user scrolls past the height of the browser window (from the very top)
    • Integer:  Shrinks the UI whenever the user scrolls past the specified number of pixels from the top of the window (ie: 500)
    • 0: Disables shrinking the "hamburger" icon UI.
  • dismissmenuDelay:  Specifies the delay in milliseconds to dismiss the full screen menu after the user clicks anywhere inside it.