🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple mobile push menu that reveal an off-canvas side menu with a hamburger toggle button, build on top of jQuery and GSAP JS library.

side-menu push-menu mobile-menu Off-Canvas-menu

Documentation

#JV jQuery Mobile Menu v2 Mobile menu with hamburger button based on jQuery and GSAP JS.
View demo

##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'


You May Also Like