Mobile-friendly Sliding Side Menu Plugin With jQuery
File Size: | 3.46 KB |
---|---|
Views Total: | 2889 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A really simple jQuery plugin used for creating a mobile-friendly, space-saving side navigation that slides out from the top of the webpage with a fullscreen background overlay.
How to use it:
1. Create the mobile side menu as follows:
<div class="mobile-side-menu"> <ul> <li><a href="/">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Login</a></li> <li><a href="#">About</a></li> </ul> </div>
2. Create a DIV container for the background overlay.
<div class="overlay"></div>
3. Create a menu toggle button inside the webpage.
<button class="toggleMenu"> <a href="#"> Menu </a> </button>
4. Put jQuery library and the core JavaScript file slide-from-top.js
at the bottom of the webpage.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="slide-from-top.js"></script>
5. Call the function with default options to initialize the mobile side menu.
$('.mobile-side-menu').slideFromTop();
6. Plugin's default configuration options.
$('.mobile-side-menu').slideFromTop({ // sidebar menu menu : this, // button to toggle the menu menuBtn : $('#menuBtn'), // parent container body : $(document.body), // throw a modal like overlay bodyOverlay: $('.overlay'), // navbar on the top of menu navbar: $('.navbar'), // aninmation speed menuSpeed : 500 });
7. Apply your custom CSS styles the mobile side menu.
.mobile-side-menu { font-family: "Open Sans", sans-serif; width: 240px; display: none; background-color: #1b1b1b; bottom: 0px; z-index: 30; overflow-x: hidden; overflow-y: scroll; /* has to be scroll, not auto */ -webkit-overflow-scrolling: touch; } .mobile-side-menu ul { float: none; display: inline-block; margin: auto; width: 100%; background-color: #1b1b1b; border-radius: 5px; list-style: none; } .mobile-side-menu ul > li { text-align: left; padding-left: 8px; border-top: solid 1px #3f3f3f; border-bottom: solid 1px #000; } .mobile-side-menu ul > li > a { text-transform: capitalize; text-decoration: none; line-height: 20px; position: relative; display: block; font-size: 14px; color: white; padding: 15px 5px 15px 10px; } .overlay { display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 30; background-color: rgba(0, 0, 0, 0.7); }
8. Prevent the body scroll when the side menu is opened.
.noscroll { position: fixed; right: 0; top: 0; overflow: hidden; }
This awesome jQuery plugin is developed by hadijaveed. For more Advanced Usages, please check the demo page or visit the official website.