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.

$("#hamburgerMenu").hamburgerMenu(
{

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

  // menu position right or left
  position:'left',

  // leftRight, rightLeft, topDown
  fromTo:'leftRight',

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

}, 
[  
  //  an array of menu items
  {"id":"Home","href":"#","text":"Home"},
  {"id":"Blog","href":"#","text":"Blog"},
  {"id":"Contact","href":"#","text":"Contact"},
  {"id":"About","href":"#","text":"About"}
]
);

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

$("#hamburgerMenu").hamburgerMenu({

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

});

Changelog:

2021-10-19

• JS update.

2016-10-25

• JS update.

2015-11-21

• JS update.

2015-07-13

• JS and CSS update.

2015-07-04

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