This time I will share jQuery Plugin and tutorial about Responsive Mobile Navigation Plugin With jQuery – Adaptive Menu, hope it will help you in programming stack.
Adaptive Menu is a lightweight jQuery plugin used to create a responsive menu that will auto switches to an off-canvas side navigation when the window width reaches a specific breakpoint.
How to use it:
1. The plugin uses CSS3 for smooth menu open / close animations so I recommend you to include the jQuery 3 slim version (6kb gzipped, without AJAX and effects) to reduce the page load time.
1 |
<script src="//code.jquery.com/jquery-3.0.0.slim.min.js"></script> |
2. Download and include the following HTML snippets into your document.
1 |
<link rel="stylesheet" href="adaptive-menu.default.css"> |
2 |
<script src="jquery.adaptive-menu.js"></script> |
3. By default the off-canvas menu will slide in from the left side of the webpage. Include the adaptive-menu.right.css as displayed below to make it slide in from the right side instead.
1 |
<link rel="stylesheet" href="adaptive-menu.right.css"><br> |
4. Create a nav list for your side navigation.
01 |
<div class="wrapmenu"> |
03 |
<ul class="nav menu topmenu"> |
04 |
<li><a href="#">Home</a></li> |
05 |
<li><a href="#">Category</a></li> |
06 |
<li><a href="#">Recommended</a></li> |
07 |
<li><a href="#">Popular</a></li> |
08 |
<li><a href="#">Blog</a></li> |
09 |
<li><a href="#">About</a></li> |
10 |
<li><a href="#">Contact</a></li> |
11 |
<li><a href="#">Jobs</a></li> |
12 |
<li><a href="#">Social</a></li> |
5. Call the function on the top container to initialize the plugin:
1 |
$('.wrapmenu').adaptiveMenu(); |
6. The plugin uses CSS3’s media queries to determine the current window size. You can change the default break point in pixels during init.
1 |
$('.wrapmenu').adaptiveMenu({ |
7. Not only body element, The plugin also allows you to append the off-canvas menu to any element:
1 |
$('.wrapmenu').adaptiveMenu({ |
Change log:
2017-01-28
This awesome jQuery plugin is developed by GREYMedia-LLC. For more Advanced Usages, please check the demo page or visit the official website.
