Tiny Push Nav Menu with Sticky Hamburger Toggle - HamburgerMenu
File Size: | 144 KB |
---|---|
Views Total: | 3911 |
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="/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.