This time I will share jQuery Plugin and tutorial about Responsive Sliding Sidebar Navigation Plugin With jQuery – crbnMenu, hope it will help you in programming stack.
crbnMenu is a lightweight jQuery plugin for creating an accordion-style collapsible sidebar navigation with sub menus on your webpage. The plugin also has the ability to collapse the sidebar navigation into a hamburger toggle nav menu for better user experience on mobile devices.
View more:
How to use it:
1. Load Font Awesome Iconic Font (OPTIONAL) and the jQuery crbnMenu plugin’s main CSS file in the head section of the html document.
1 |
<link rel="stylesheet" href="font-awesome.min.css"> |
2 |
<link rel="stylesheet" href="styles.css"> |
2. Create the sidebar navigation from nested html lists as this:
01 |
<div class="menu-container"> |
02 |
<div class="crbnMenu"> |
03 |
<div class="link-stack"> |
04 |
<span class="brand">CRBNMenu v.1</span> |
05 |
<a id="nav-toggle" class="nav-toggle"> |
11 |
<a class="nav-link" href="#"> |
13 |
<span class="menu-toggle"><i class="fa fa-angle-down" aria-hidden="true"></i></span> |
17 |
<a href="#">Submenu 1_1</a> |
20 |
<a href="#">Submenu 1_2</a> |
23 |
<a href="#">Submenu 1_3</a> |
29 |
<a class="nav-link" href="#"> |
31 |
<span class="menu-toggle"><i class="fa fa-angle-down" aria-hidden="true"></i></span> |
35 |
<a href="#">Submenu 2_1</a> |
38 |
<a href="#">Submenu 2_2</a> |
41 |
<a href="#">Submenu 2_3</a> |
3. Load jQuery library and the jQuery crbnMenu plugin’s script at the end of the document.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="crbnMenu.js"></script> |
4. Initialize the sidebar navigation and done.
5. Decide whether or not to hide the active menu.
This awesome jQuery plugin is developed by jhenrich. For more Advanced Usages, please check the demo page or visit the official website.
