Modern Off-canvas Accordion Navigation With jQuery - sidenav
File Size: | 13.6 KB |
---|---|
Views Total: | 15097 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A simple and tiny jQuery plugin that helps you create a modern, mobile-friendly, off-canvas, sidebar accordion menu for your cross-platform webpages.
How to use it:
1. Place the required stylesheet sidenav.min.css
in the head
of the webpage.
<link rel="stylesheet" href="sidenav.min.css">
2. Create the sidebar off-canvas navigation as follows:
<nav class="sidenav" data-sidenav data-sidenav-toggle="#sidenav-toggle"> <div class="sidenav-brand"> BRAND </div> <div class="sidenav-header"> Section Header <small>secondary text</small> </div> <ul class="sidenav-menu"> <li> <a href="javascript:;" data-sidenav-dropdown-toggle class="active"> <span class="sidenav-link-icon"> <i class="material-icons">store</i> </span> <span class="sidenav-link-title">Lorem ipsum</span> <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_down</i> </span> <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_up</i> </span> </a> <ul class="sidenav-dropdown" data-sidenav-dropdown> <li><a href="javascript:;">Dolor sit amet</a></li> <li><a href="javascript:;">Consectetur adipisicing</a></li> <li><a href="javascript:;">Elit</a></li> </ul> </li> <li> <a href="javascript:;" data-sidenav-dropdown-toggle> <span class="sidenav-link-icon"> <i class="material-icons">payment</i> </span> <span class="sidenav-link-title">Sed do eiusmod</span> <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_down</i> </span> <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_up</i> </span> </a> <ul class="sidenav-dropdown" data-sidenav-dropdown> <li><a href="javascript:;">Tempor incididunt</a></li> <li><a href="javascript:;">Labore</a></li> </ul> </li> <li> <a href="javascript:;" data-sidenav-dropdown-toggle> <span class="sidenav-link-icon"> <i class="material-icons">shopping_cart</i> </span> <span class="sidenav-link-title">Dolore magna</span> <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_down</i> </span> <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_up</i> </span> </a> <ul class="sidenav-dropdown" data-sidenav-dropdown> <li><a href="javascript:;">Aliqua</a></li> <li><a href="javascript:;">Exercitation</a></li> <li><a href="javascript:;">Minim veniam</a></li> </ul> </li> <li> <a href="javascript:;"> <span class="sidenav-link-icon"> <i class="material-icons">assignment_ind</i> </span> <span class="sidenav-link-title">Nostrud ullamco</span> </a> </li> <li> <a href="javascript:;"> <span class="sidenav-link-icon"> <i class="material-icons">alarm</i> </span> <span class="sidenav-link-title">Commodo</span> </a> </li> </ul> <div class="sidenav-header"> Another Section Header </div> <ul class="sidenav-menu"> <li> <a href="javascript:;" data-sidenav-dropdown-toggle> <span class="sidenav-link-icon"> <i class="material-icons">date_range</i> </span> <span class="sidenav-link-title">Reprehenderit</span> <span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_down</i> </span> <span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon> <i class="material-icons">arrow_drop_up</i> </span> </a> <ul class="sidenav-dropdown" data-sidenav-dropdown> <li><a href="javascript:;">Voluptate</a></li> <li><a href="javascript:;">Excepteur</a></li> </ul> </li> <li> <a href="javascript:;"> <span class="sidenav-link-icon"> <i class="material-icons">backup</i> </span> <span class="sidenav-link-title">Occaecat</span> </a> </li> <li> <a href="javascript:;"> <span class="sidenav-link-icon"> <i class="material-icons">settings</i> </span> <span class="sidenav-link-title">Deserunt</span> </a> </li> </ul> </nav>
3. Create a menu toggle link on the webpage.
<a href="javascript:;" class="toggle" id="sidenav-toggle"> <i class="material-icons">menu</i> </a>
4. Place jQuery library and the JavaScript file sidenav.min.js
at the end of the webpage.
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="sidenav.min.js"></script>
5. Initialize the sidebar off-canvas navigation with one JS call.
$('[data-sidenav]').sidenav();
Change log:
2017-03-04
- Added new settings variables
This awesome jQuery plugin is developed by eumatheusgomes. For more Advanced Usages, please check the demo page or visit the official website.