<div id="accordian">
<ul class="show-dropdown">
<li>
<a href="javascript:void(0);"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
</li>
<li>
<a href="javascript:void(0);"><i class="far fa-address-book"></i>Address Book</a>
<ul>
<li><a href="javascript:void(0);">Reports</a></li>
<li><a href="javascript:void(0);">Search</a></li>
<li><a href="javascript:void(0);">Graphs</a></li>
<li><a href="javascript:void(0);">Settings</a></li>
</ul>
</li>
<li class="active">
<a href="javascript:void(0);"><i class="far fa-clone"></i>Components</a>
<ul class="show-dropdown">
<li><a href="javascript:void(0);">Today's tasks</a></li>
<li class="active">
<a href="javascript:void(0);">DrillDown (active)</a>
<ul class="show-dropdown">
<li><a href="javascript:void(0);">Today's tasks</a></li>
<li class="active"><a href="javascript:void(0);">Urgent</a></li>
<li>
<a href="javascript:void(0);">Overdues</a>
<ul>
<li><a href="javascript:void(0);">Today's tasks</a></li>
<li><a href="javascript:void(0);">Urgent</a></li>
<li><a href="javascript:void(0);">Overdues</a></li>
<li><a href="javascript:void(0);">Recurring</a></li>
<li>
<a href="javascript:void(0);">Calendar</a>
<ul>
<li><a href="javascript:void(0);">Current Month</a></li>
<li><a href="javascript:void(0);">Current Week</a></li>
<li><a href="javascript:void(0);">Previous Month</a></li>
<li><a href="javascript:void(0);">Previous Week</a></li>
<li><a href="javascript:void(0);">Next Month</a></li>
<li><a href="javascript:void(0);">Next Week</a></li>
<li><a href="javascript:void(0);">Team Calendar</a></li>
<li><a href="javascript:void(0);">Private Calendar</a></li>
<li><a href="javascript:void(0);">Settings</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Recurring</a></li>
<li><a href="javascript:void(0);">Settings</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Overdues</a>
<ul>
<li><a href="javascript:void(0);">Today's tasks</a></li>
<li><a href="javascript:void(0);">Urgent</a></li>
<li><a href="javascript:void(0);">Overdues</a></li>
<li><a href="javascript:void(0);">Recurring</a></li>
<li><a href="javascript:void(0);">Settings</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Recurring</a></li>
<li><a href="javascript:void(0);">Settings</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Calendar</a>
<ul>
<li><a href="javascript:void(0);">Current Month</a></li>
<li><a href="javascript:void(0);">Current Week</a></li>
<li><a href="javascript:void(0);">Previous Month</a></li>
<li><a href="javascript:void(0);">Previous Week</a></li>
<li><a href="javascript:void(0);">Next Month</a></li>
<li><a href="javascript:void(0);">Next Week</a></li>
<li><a href="javascript:void(0);">Team Calendar</a></li>
<li><a href="javascript:void(0);">Private Calendar</a></li>
<li><a href="javascript:void(0);">Settings</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);"><i class="far fa-chart-bar"></i>Charts</a>
<ul>
<li><a href="javascript:void(0);">Global favs</a></li>
<li><a href="javascript:void(0);">My favs</a></li>
<li><a href="javascript:void(0);">Team favs</a></li>
<li><a href="javascript:void(0);">Settings</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);"><i class="far fa-copy"></i>Documents</a>
</li>
<li>
<a href="javascript:void(0);"><i class="far fa-bookmark"></i>Bookmarks</a>
</li>
<li>
<a href="javascript:void(0);"><i class="far fa-envelope"></i>Mail</a>
</li>
<li>
<a href="javascript:void(0);"><i class="far fa-heart"></i>Favorite</a>
</li>
</ul>
</div>
* {
margin: 0;
padding: 0;
}
/* Scrollbar-effect------- */
#accordian::-webkit-scrollbar {
width: 5px;
height: 8px;
}
#accordian::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #e4e4e4;
}
#accordian::-webkit-scrollbar-thumb {
background: #0089ff;
border-radius: 10px;
transition: 0.5s;
}
#accordian::-webkit-scrollbar-thumb:hover {
background: #d5b14c;
transition: 0.5s;
}
/* --------- */
body {
background: #4EB889;
font-family: Nunito, arial, verdana;
}
#accordian {
background: #fff;
width: 250px;
padding: 10px;
float: left;
height: 100vh;
overflow-x: hidden;
}
#accordian a {
}
i {
margin-right: 10px;
}
#accordian li {
list-style-type: none;
}
#accordian ul li a{
color: #9c9c9c;
text-decoration: none;
font-size: 15px;
display: block;
/* line-height: 34px; */
padding: 12px 15px;
transition: all 0.15s;
position: relative;
border-radius: 3px;
}
#accordian>ul.show-dropdown>li.active>a,
#accordian>ul>li>ul.show-dropdown>li.active>a,
#accordian>ul>li>ul>li>ul.show-dropdown>li.active>a,
#accordian>ul>li>ul>li>ul>li>ul.show-dropdown>li.active>a,
#accordian>ul>li>ul>li>ul>li>ul>li>ul.show-dropdown>li.active>a{
background-color: #a8d4fb;
color: #0089ff;
box-shadow: 0px 1px 2px rgba(0, 137, 255, 0.2);
}
#accordian>ul>li>ul,
#accordian>ul>li>ul>li>ul,
#accordian>ul>li>ul>li>ul>li>ul,
#accordian>ul>li>ul>li>ul>li>ul>li>ul {
display: none;
}
#accordian>ul>li.active>ul.show-dropdown,
#accordian>ul>li>ul>li.active>ul.show-dropdown,
#accordian>ul>li>ul>li>ul>li.active>ul.show-dropdown,
#accordian>ul>li>ul>li>ul>li>ul>li.active>ul.show-dropdown {
display: block;
}
#accordian>ul>li>ul,
#accordian>ul>li>ul>li>ul,
#accordian>ul>li>ul>li>ul>li>ul,
#accordian>ul>li>ul>li>ul>li>ul>li>ul {
padding-left: 20px;
}
#accordian a:not(:only-child):after {
content: "\f105";
position: absolute;
right: 20px;
top: 14px;
font-size: 15px;
font-family: "Font Awesome 5 Free";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
transition: 0.5s;
}
#accordian .active>a:not(:only-child):after {
transform: rotate(90deg);
}
// -------multilevel-accordian-menu---------
$(document).ready(function() {
$("#accordian a").click(function() {
var link = $(this);
var closest_ul = link.closest("ul");
var parallel_active_links = closest_ul.find(".active")
var closest_li = link.closest("li");
var link_status = closest_li.hasClass("active");
var count = 0;
closest_ul.find("ul").slideUp(function() {
if (++count == closest_ul.find("ul").length){
parallel_active_links.removeClass("active");
parallel_active_links.children("ul").removeClass("show-dropdown");
}
});
if (!link_status) {
closest_li.children("ul").slideDown().addClass("show-dropdown");
closest_li.parent().parent("li.active").find('ul').find("li.active").removeClass("active");
link.parent().addClass("active");
}
})
});
// --------for-active-class-on-other-page-----------
jQuery(document).ready(function($){
// Get current path and find target link
var path = window.location.pathname.split("/").pop();
// Account for home page with empty path
if ( path == '' ) {
path = 'index.html';
}
var target = $('#accordian li a[href="'+path+'"]');
// Add active class to target link
target.parents("li").addClass('active');
target.parents("ul").addClass("show-dropdown");
});
