Tiny Push Nav Menu with Sticky Hamburger Toggle - HamburgerMenu

File Size: 144 KB
Views Total: 3841
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Tiny Push Nav Menu with Sticky Hamburger Toggle - HamburgerMenu

amburgerMenu is a jQuery plugin that helps you to create a mobile-friendly push navigation menu with a sticky hamburger toggle.

How to use it:

1. Load the jQuery amburgerMenu plugin's stylesheet in the head section.

<link href="css/hamburger.css" rel="stylesheet" >

2. Create a DIV element to place the push menu.

<div id="hamburgerMenu"></div>

3. Include jQuery library and the plugin script at the bottom of the webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/hamburgerMenu.js"></script>

4. Include the OPTIONAL jQuery UI for additional easing effects.

<script src="/path/to/cdn/jquery-ui.min.js"></script>

5. Call the plugin and create an array of menu items in the JavaScript.


  // CSS class of main content wrapper
  mainContent: 'mainContent',

  // menu position right or left

  // leftRight, rightLeft, topDown

  // callback
  onClickHamburgerMenu: function (op, o) {
    // do something

  //  an array of menu items

6. It also supports fetching menu data (JSON) from a remote resouce via AJAX.


  url: 'getMenu',
  urlType: 'get',
  urlCache: false,
  urlParam:' {id:1}',





  • JS update.


  • JS update.


  • JS and CSS update.


  • add position of the menu

This awesome jQuery plugin is developed by adrianillo. For more Advanced Usages, please check the demo page or visit the official website.