Hello readers, Today in my blog I have tried to create sidebar-menu using JQuery Plugin.
As I am a beginner in this technology, while working over the dashborad admin template I faced various complications so to resolve them I came across seeing various JQuery Plugin.
The JQuery Plugin helps a user by simplifying the code and reduces various complications. One can just easily add some links and scripts to their html page and hence could see the magic then.
How to use the it?
Below there are steps that would help to add plugin in our webpage.
-
Firstly we have to add JQuery library file and the plugin file into our webpage.
<link rel="stylesheet" href="css/sidebar-menu.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/sidebar-menu.js"></script>
-
Now , I have applied sidebar-menu class to the unordered list for the particular section.
-
In the last step, the plugin is been initialized and added to the script below.
<script>
$.sidebarMenu($('.sidebar-menu'))
</script>
Here below is the html code for the following :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="css/sidebar-menu.css">
</head>
<body>
<section style="width: 200px">
<!-- =sidebar-menu start= -->
<ul class="sidebar-menu">
<li class="sidebar-header">MAIN NAVIGATION</li>
<li>
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<!-- =sidebar-submenu start=- -->
<ul class="sidebar-submenu">
<li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
</ul><!-- =sidebar-submenu end// -->
</li>
<li>
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="label label-primary pull-right">4</span>
</a>
<!-- =sidebar-submenu start=- -->
<ul class="sidebar-submenu" style="display: none;">
<li><a href="#"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Boxed</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Fixed</a></li>
<li class=""><a href="#"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-th"></i> <span>Widgets</span>
<small class="label pull-right label-info">new</small>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-pie-chart"></i>
<span>Charts</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<!-- =sidebar-submenu start=- -->
<ul class="sidebar-submenu">
<li><a href="#"><i class="fa fa-circle-o"></i> ChartJS</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Morris</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Flot</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Inline charts</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-laptop"></i>
<span>UI Elements</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<!-- =sidebar-submenu start=- -->
<ul class="sidebar-submenu">
<li><a href="#"><i class="fa fa-circle-o"></i> General</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Icons</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Buttons</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Sliders</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Timeline</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Modals</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-edit"></i> <span>Forms</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<!-- =sidebar-submenu start=- -->
<ul class="sidebar-submenu">
<li><a href="#"><i class="fa fa-circle-o"></i> General Elements</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Advanced Elements</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Editors</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-table"></i> <span>Tables</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<!-- =sidebar-submenu start=- -->
<ul class="sidebar-submenu">
<li><a href="#"><i class="fa fa-circle-o"></i> Simple tables</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Data tables</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-calendar"></i> <span>Calendar</span>
<small class="label pull-right label-danger">3</small>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope"></i> <span>Mailbox</span>
<small class="label pull-right label-warning">12</small>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-folder"></i> <span>Examples</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<!-- =sidebar-submenu start=- -->
<ul class="sidebar-submenu">
<li><a href="#"><i class="fa fa-circle-o"></i> Invoice</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Profile</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Login</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Register</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> 404 Error</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> 500 Error</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Blank Page</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Pace Page</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-share"></i> <span>Multilevel</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<!-- =sidebar-submenu start=- -->
<ul class="sidebar-submenu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
<li>
<a href="#"><i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
<!-- =sidebar-submenu nested start=- -->
<ul class="sidebar-submenu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
<li>
<a href="#"><i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
<!-- =sidebar-submenu nested start=- -->
<ul class="sidebar-submenu">
<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
</ul><!-- =sidebar-submenu nested end// -->
</li>
</ul><!-- =sidebar-submenu nested end// -->
</li>
<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
</ul><!-- =sidebar-submenu end// -->
</li>
<li><a href="#"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
<li class="sidebar-header">LABELS</li>
<li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
<li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
<li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
</ul><!-- =sidebar-menu end// -->
</section>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="js/sidebar-menu.js"></script>
<script>
$.sidebarMenu($('.sidebar-menu'))
</script>
</body>
</html>
In this html code, I have created a sidebar-menu for a dashboard template and also applied styling in the CSS code.
In the script, I have initialize the plugin and added it to my html page.
Conclusion:-
Hence, It was easily to apply Jquery Plugin and therefore helps in reducing the line of code .
See the live demo at here : https://jsfiddle.net/t9LLco50/show/0
0 Comment(s)