JV jQuery Mobile Menu v2.3
Mobile menu with hamburger button based on jQuery and GSAP JS.
Click for menu on left side
Add jQuery, GSAP TweenMax and the plugin just before the closing /body tag
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="jvmobilemenu/jv-jquery-mobile-menu-min.js"></script>
Add the CSS in the head
<link rel="stylesheet" type="text/css" href="jvmobilemenu/jv-jquery-mobile-menu.css">
Call the plugin from a JS file and edit the settings
$.jvmobilemenu({
mainContent: $('.page'),
theMenu: $('.mobile-nav'),
slideSpeed: 0.3,
menuWidth: 240,
position: 'right',
menuPadding: '20px 20px 60px'
});
The settings
mainContent | The Content Wrapper jQuery selector default: $('.page') |
theMenu | Your mobile menu default: $('.mobile-nav') |
slideSpeed | Animation speed default: 0.3 (seconds) |
menuWidth | Desired menu width default: 240 |
position | Left or right side for hamburger and menu default: 'right' |
menuPadding | Padding for the menu content default: '20px 20px 60px' |