Tiny Push Nav Menu with Sticky Hamburger Toggle - HamburgerMenu

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

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="jquery-1.11.3.min.js"></script>
<script src="js/hamburgerMenu.js"></script>

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

<script src="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
  position:'left',
  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. AJAX options.

url:null,
urlType: 'post', // post, json
urlCache:false,
urlParam:''

Change log:

2016-10-25

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.