This time I will share jQuery Plugin and tutorial about Android-style Offcanvas Sidebar Navigation with jQuery and CSS3, hope it will help you in programming stack.
Yet another off-canvas menu system that helps you create a toggleable sidebar navigation that behaves like a native side navigation as you seen on Android apps.
How to use it:
1. Create an element to toggle the sidebar navigation.
1 |
<div id="mobile-nav"></div> |
2. Create the sidebar navigation from a nav list.
03 |
<li><a href="#">Home</a></li> |
04 |
<li><a href="#">Works</a></li> |
05 |
<li><a href="#">Services</a></li> |
06 |
<li><a href="#">Blog</a></li> |
07 |
<li><a href="#">About</a></li> |
08 |
<li><a href="#">Contact</a></li> |
3. The basic CSS styles for the sidebar navigation.
10 |
background: url(icons.png) no-repeat left top; |
12 |
text-decoration: none; |
13 |
text-transform: uppercase; |
21 |
-webkit-transition: all .5s; |
22 |
-o-transition: all .5s; |
27 |
box-shadow: 3px 0 rgba(52,152,219,.2) inset; |
30 |
-webkit-transition: all .5s; |
31 |
-o-transition: all .5s; |
4. Style the active / inactive state of the sidebar navigation.
02 |
background: rgba(41,128,185,1); |
08 |
box-sizing: border-box; |
11 |
-webkit-transition: all .3s; |
12 |
-o-transition: all .3s; |
16 |
nav.active { left: 0; } |
5. The JavaScript to show / hide the sidebar navigation by toggling the ‘active’ class. Add the following JavaScript snippet after jQuery library and done.
1 |
$('#mobile-nav').click(function(event) { |
2 |
$('nav').toggleClass('active'); |
This awesome jQuery plugin is developed by opplyst. For more Advanced Usages, please check the demo page or visit the official website.
