Collapsible side navigation menu of Dashboard using Jquery
In this blog we will create a collapsible side navigation menu using jquery. I have got several requests from my friends to show how to create side menu of dashboard. Let us start, the main requirement to create this type of menu is to have the basic knowledge in HTML, CSS and Jquery. As our main focus of this blog is Jquery, thats why we will style this menu to the minimum.
First of all we will create our side menu using plain HTML and style them using CSS. We will create a html page (sidemenu.html). Let us proceed.
Basic Requirements
- Jquery library ( https://code.jquery.com/ )
- Font awesome icons (optional) ( https://fontawesome.com/v4.7.0/get-started/ )
HTML
<!-- main side menu starts -->
<ul class="main-menu">
<li>
<a href="javascript:void(0)">Dashboard</a>
<!-- dashboard sub menu section starts -->
<ul class="sub-menu" style="display:none;">
<li><a href="javascript:void(0)">Menu 1</a></li>
<li><a href="javascript:void(0)">Menu 2</a></li>
<li><a href="javascript:void(0)">Menu 3</a></li>
</ul>
<!-- sub menu section ends -->
</li>
<li>
<a href="javascript:void(0)">Product</a>
<!-- products sub menu section starts -->
<ul class="sub-menu" style="display:none;">
<li><a href="javascript:void(0)">Product 1</a></li>
<li><a href="javascript:void(0)">Product 2</a></li>
</ul>
<!-- sub menu section ends -->
</li>
<li>
<a href="javascript:void(0)">Category</a>
<!-- catergory sub menu section starts -->
<ul class="sub-menu" style="display:none;">
<li><a href="javascript:void(0)">Category 1</a></li>
<li><a href="javascript:void(0)">Category 2</a></li>
<li><a href="javascript:void(0)">Category 3</a></li>
<li><a href="javascript:void(0)">Category 4</a></li>
</ul>
<!-- sub menu section ends -->
</li>
</ul>
</ul>
<!-- main side menu ends -->
CSS
<style type="text/css">
ul.main-menu {
padding-left: 0;
list-style: none;
}
ul.main-menu > li {
border-bottom: 1px solid #fff;
position: relative;
}
ul.main-menu > li > a {
display: block;
padding: 12px;
background-color: #f1f1f1;
color: #666;
text-decoration: none;
}
ul.main-menu > li > a:after {
content: '\f103';
font-family: 'fontAwesome';
position: absolute;
top: 13px;
right: 15px;
color: #444;
}
ul.main-menu > li.active > a:after {
content: '\f102';
font-family: 'fontAwesome';
position: absolute;
top: 13px;
right: 15px;
color: #444;
}
ul.main-menu > li ul.sub-menu {
padding-left: 0;
list-style: none;
}
ul.main-menu > li ul.sub-menu li {
border-bottom: 1px solid #fff;
position: relative;
}
ul.main-menu > li ul.sub-menu li:last-child {
border-bottom: 0;
}
ul.main-menu > li ul.sub-menu li a {
display: block;
padding: 12px;
background-color: #ddd;
color: #666;
text-decoration: none;
}
</style>
JQUERY
<script type="text/javascript">
$('document').ready(function() {
$('.main-menu > li').click(function() {
/*check if the current menu is active*/
if($(this).hasClass('active')) {
$(this).removeClass('active');
/*slide up menu*/
$(this).find('.sub-menu').slideUp();
}
else {
/*collapse all menu*/
$('.sub-menu').slideUp();
/*remove active class from the last active menu*/
$('.main-menu > li').removeClass('active');
/*slide down current menu*/
$(this).addClass('active');
/*slide down menu*/
$(this).find('.sub-menu').slideDown();
}
});
});
</script>
We are done! We have implemented a collapsible side navigation menu of dashboard using simple HTML, CSS and Jquery.
Hope you like it. Please share this blog with everyone to help them technically and keep coding! Thanks.
Post a Comment