Hamburger Icon Menu
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):
Step 1: Add the below code to the HEAD section of your page:
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:
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.