I am trying to make a dropdown menu where the .dropdown-content shows up when is clicked, and disappears if the user clicks any other dropdown in the bar. The problem is I have multiple dropdown classI think I just need help revising my existing javascript.
I would like that the sidebar(nav) only display the dropdown menu that is current active. On my code when you open a dropdown it still open until the user click the dropdown arrow again to close that specific one.
$(document).ready(function() {
"use strict"; // Start of use strict
//Sidebar menu
$('.show-sidebar').on('click', function() {
$('#sidebar').toggleClass('collapse-sidebar');
$('#layout-admin').toggleClass('collapse-sidebar');
});
$('.has-sub').on('click', function() {
$('.has-sub').toggleClass('open-dropdown');
$('.sub-nav').slideToggle("slow");
});
$('.has-sub2').on('click', function() {
$('.has-sub2').toggleClass('open-dropdown');
$('.sub-nav2').slideToggle("slow");
});
$('.has-sub3').on('click', function() {
$('.has-sub3').toggleClass('open-dropdown');
$('.sub-nav3').slideToggle("slow");
});
$('.has-sub4').on('click', function() {
$('.has-sub4').toggleClass('open-dropdown');
$('.sub-nav4').slideToggle("slow");
});
$('.has-sub5').on('click', function() {
$('.has-sub5').toggleClass('open-dropdown');
$('.sub-nav5').slideToggle("slow");
});
$('.has-sub6').on('click', function() {
$('.has-sub6').toggleClass('open-dropdown');
$('.sub-nav6').slideToggle("slow");
});
$('.has-sub7').on('click', function() {
$('.has-sub7').toggleClass('open-dropdown');
$('.sub-nav7').slideToggle("slow");
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 14px;
color: #000;
background-color: #fff;
margin: 0;
line-height: 1.42857143;
font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}
body {
font-size: 14px;
color: #000;
background-color: #fff;
margin: 0;
line-height: 1.42857143;
font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}
/*============================
Header
============================*/
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
ul li a .icon {
height: 40px;
width: 40px;
margin-right: 13px;
background: #ffffff1a;
display: flex;
justify-content: center;
text-align: center;
border-radius: 50%;
}
ul li a .icon span {
line-height: 40px;
font-size: 20px;
color: #b0b3b8;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
span.field-requried {
color: red;
}
.hide {
display: none;
}
#sidebar {
min-width: 250px;
max-width: 250px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-image: linear-gradient(to bottom, #000, #333);
transition: all 0.3s;
position: fixed;
top: 0;
height: 100vh;
}
#sidebar .sidebar-header {
padding: 15px 5px;
text-align: center;
height: 60px;
}
#sidebar .sidebar-header img {
width: 100px;
height: auto;
vertical-align: middle;
}
#sidebar ul.list-unstyled li {
margin-bottom: 10px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#sidebar ul.list-unstyled li a {
height: 40px;
padding: 8px 25px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.1px;
display: block;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
position: relative;
}
#sidebar ul.list-unstyled li a.has-sub::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub2::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub3::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub4::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub5::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub6::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub7::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub8::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub2.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub3.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub4.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub5.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub6.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub7.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub8.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a i {
font-size: 16px;
width: 18px;
text-align: center;
margin-right: 15px;
}
#sidebar ul.list-unstyled li:first-child a i {
font-size: 18px;
}
#sidebar ul.list-unstyled li:hover,
#sidebar ul.list-unstyled li.active {
background-color: rgba(255, 255, 255, 0.15);
}
#sidebar.collapse-sidebar {
min-width: 50px;
max-width: 50px;
text-align: center;
}
#sidebar.collapse-sidebar .sidebar-header img {
width: 40px;
}
#sidebar ul.list-unstyled {
padding: 0;
margin: 0;
list-style: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li a {
height: 60px;
padding: 20px 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a i {
font-size: 18px;
width: 20px;
margin-right: 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
font-size: 20px;
}
#layout-admin {
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
width: calc(100% - 50px);
min-height: 100vh;
transition: all 0.3s;
background-color: #f5f7f9;
}
#layout-admin .header {
height: 60px;
background-color: rgb(232, 2, 21);
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px 0 15px;
position: sticky;
z-index: 10;
top: 0;
width: 100%;
}
#layout-admin .header .header-left {
font-size: 0;
}
#layout-admin .header .header-right>div {
display: inline-block;
}
#layout-admin .header .header-right a {
font-size: 28px;
color: #fff;
}
#username {
font-size: 20px;
vertical-align: middle;
padding-bottom: 10px;
margin-right: 10px;
}
#layout-admin .header .header-right .setting {
margin-right: 40px;
}
#layout-admin .header .header-left button.show-sidebar {
background-color: transparent;
border: none;
font-size: 28px;
color: #fff;
/*-webkit-text-stroke: 1.5px white;*/
display: inline-block;
vertical-align: middle;
margin-right: 25px;
outline: none;
cursor: pointer;
}
#layout-admin .header .header-left .logo {
display: inline-block;
vertical-align: middle;
}
#layout-admin .header .header-left .title {
display: inline-block;
vertical-align: middle;
font-size: 22px;
font-weight: 600;
color: #fff;
}
#layout-admin .header .header-left .title span {
font-weight: normal;
}
#layout-admin .content-admin {
padding: 20px;
}
#layout-admin .content-admin .title-content {
font-size: 20px;
font-weight: 600;
line-height: 1.1;
margin-bottom: 30px;
}
#layout-admin.collapse-sidebar {
width: calc(100% - 250px);
transform: translate3d(250px, 0, 0);
-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
-ms-transform: translate3d(250px, 0, 0);
-o-transform: translate3d(250px, 0, 0);
}
.sub-nav,
.sub-nav2,
.sub-nav3,
.sub-nav4,
.sub-nav5,
.sub-nav6,
.sub-nav7,
.sub-nav8 {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.sub-nav li,
.sub-nav2 li,
.sub-nav3 li,
.sub-nav4 li,
.sub-nav5 li,
.sub-nav6 li,
.sub-nav7 li,
.sub-nav8 li {
font-size: 14px;
color: #fff;
list-style: none;
padding: 8px 15px 8px 30px;
}
#sidebarCollapse-mobile {
display: none;
background-color: transparent;
border: none;
font-size: 28px;
color: #fff;
vertical-align: middle;
margin-right: 25px;
outline: none;
cursor: pointer;
}
#media (max-width: 767px) {
#sidebar {
min-width: 0px;
max-width: 0px;
text-align: center;
}
#sidebar.collapse-sidebar {
min-width: 250px;
max-width: 250px;
text-align: left;
z-index: 1;
}
#sidebar .sidebar-header img {
width: 40px;
}
#sidebar.collapse-sidebar .sidebar-header img {
width: 100px;
}
#sidebar ul.list-unstyled li a {
height: 60px;
padding: 20px 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a {
height: 40px;
padding: 8px 25px;
}
#sidebar ul.list-unstyled li a i {
font-size: 18px;
width: 20px;
margin-right: 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a i {
font-size: 16px;
width: 18px;
margin-right: 15px;
}
#sidebar ul.list-unstyled li:first-child a i {
font-size: 20px;
}
#sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
font-size: 18px;
}
#sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: inline-block;
}
*#layout-admin {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
width: calc(100% - 0px);
}
#layout-admin.collapse-sidebar {
width: calc(100% - 0px);
transform: translate3d(0px, 0, 0);
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-ms-transform: translate3d(0px, 0, 0);
-o-transform: translate3d(0px, 0, 0);
}
#layout-admin .header .header-left .title {
font-size: 16px;
}
#layout-admin .header .header-right a {
font-size: 22px;
}
#username {
font-size: 14px;
}
#sidebar.collapse-sidebar #sidebarCollapse-mobile {
display: inline-block;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico" sizes="32x32">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<nav id="sidebar">
<!--------------------- Sidebar header ---------------------------->
<div class="sidebar-header">
<img src="/common/images/logo.svg" alt="logo">
<button type="button" id="sidebarCollapse-mobile" class="show-sidebar">
<i class="fa fa-bars"></i>
</button>
</div>
<!--------------------- Sidebar menu ---------------------------->
<ul class="list-unstyled nav-links">
<li class="active">
<a href="#">
<i class="fa fa-home" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Home</span>
</a>
</li>
<li id="li-pendingorders">
<a href="javascript:void(0)" class="has-sub open-dropdown">
<i class="fas fa-box-open" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Pending Orders</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-collectorders" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-crosshairs"></span> Collect orders</a>
</li>
<li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-box-open"></span> Partial collect</a>
</li>
<li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-warehouse"></span> Warehouse collect</a>
</li>
<li id="li-outofstock" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-surprise"></span> Out of Stock</a>
</li>
<li id="li-ordered" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-thumbtack "></span> Ordered</a>
</li>
<li id="li-rts" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-recycle"></span> RTS</a>
</li>
<li id="li-awaitinglist" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-pause-circle"></span> Awaiting List</a>
</li>
</ul>
</li>
<li id="li-manageorders">
<a href="javascript:void(0)" class="has-sub3 open-dropdown">
<i class="fa fa-tasks" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Manage Orders</span>
</a>
<ul class="sub-nav3" style="display: none;">
<li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-eye"></span> View Order</a>
</li>
<li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-plus"></span> Create Order</a>
</li>
</ul>
</li>
<li id="li-packorders">
<a href="javascript:void(0)" class="has-sub5 open-dropdown">
<i class="fa fa-tape" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Pack Orders</span>
</a>
<ul class="sub-nav5" style="display: none;">
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tape"></span> Pack Orders</a>
</li>
</ul>
</li>
<li id="li-manageinventory">
<a href="javascript:void(0)" class="has-sub7 open-dropdown">
<i class="fa fa-table" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Manage Inventory</span>
</a>
<ul class="sub-nav7" style="display: none;">
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-sliders-h"></span> Adjust Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck-loading"></span> Receive Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-dolly"></span> Ship Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-map-marked-alt"></span> Locations</a>
</li>
</ul>
</li>
<li id="li-orderdownload">
<a href="#">
<i class="fa fa-download" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Download Orders</span>
</a>
</li>
<li id="li-tracking">
<a href="javascript:void(0)" class="has-sub2 open-dropdown">
<i class="fas fa-shipping-fast" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Tracking</span>
</a>
<ul class="sub-nav2" style="display: none;">
<li id="li-markorderassent" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck"></span> Mark Order as Sent</a>
</li>
<li id="li-downloatrackings" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-down"></span> Download Trackings</a>
</li>
<li id="li-uploadtrackings" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-up"></span> Upload Trackings</a>
</li>
</ul>
</li>
<li id="labels">
<a href="javascript:void(0)" class="has-sub4 open-dropdown">
<i class="fas fa-tags"></i>
<span class='sidebar-menu-text'>Labels</span>
</a>
<ul class="sub-nav4" style="display: none;">
<li id="li-createlabels" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tag"></span> Create Labels</a>
</li>
<li id="li-morelabels" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tags"></span> More Labels (template)</a>
</li>
</ul>
</li>
<li id="refunds">
<a href="#">
<i class="fas fa-money-bill-wave"></i>
<span class='sidebar-menu-text'>Refunds</span>
</a>
</li>
<li id="manageadm">
<a href="javascript:void(0)" class="has-sub6 open-dropdown">
<i class="fas fa-users-cog" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Admin</span>
</a>
<ul class="sub-nav6" style="display: none;">
<li id="li-usermanagement" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-user-cog"></span> User Management</a>
</li>
<li id="li-packermanagement" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-toolbox"></span> Packer Management</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Your code is have a lot of reusable code Try this.
$(document).ready(function() {
"use strict"; // Start of use strict
$('.show-sidebar').on('click', function() {
$('#sidebar').toggleClass('collapse-sidebar');
$('#layout-admin').toggleClass('collapse-sidebar');
});
$('li a.has-sub').on('click', function() {
// For toggle its own li
$(this).toggleClass('open-dropdown');
$(this).parent().find('.sub-nav').slideToggle("slow");
// For other li
$(this).parent().siblings().children('a.has-sub').removeClass('open-dropdown');
$(this).parent().siblings().children('ul.sub-nav').slideUp("slow");
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 14px;
color: #000;
background-color: #fff;
margin: 0;
line-height: 1.42857143;
font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}
body {
font-size: 14px;
color: #000;
background-color: #fff;
margin: 0;
line-height: 1.42857143;
font-family: "Segoe WP Light", "Segoe UI", "Arial", sans-serif;
}
/*============================
Header
============================*/
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
ul li a .icon {
height: 40px;
width: 40px;
margin-right: 13px;
background: #ffffff1a;
display: flex;
justify-content: center;
text-align: center;
border-radius: 50%;
}
ul li a .icon span {
line-height: 40px;
font-size: 20px;
color: #b0b3b8;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
span.field-requried {
color: red;
}
.hide {
display: none;
}
#sidebar {
min-width: 250px;
max-width: 250px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
background-image: linear-gradient(to bottom, #000, #333);
transition: all 0.3s;
position: fixed;
top: 0;
height: 100vh;
}
#sidebar .sidebar-header {
padding: 15px 5px;
text-align: center;
height: 60px;
}
#sidebar .sidebar-header img {
width: 100px;
height: auto;
vertical-align: middle;
}
#sidebar ul.list-unstyled li {
margin-bottom: 10px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#sidebar ul.list-unstyled li a {
height: 40px;
padding: 8px 25px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.1px;
display: block;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
position: relative;
}
#sidebar ul.list-unstyled li a.has-sub::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub2::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub3::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub4::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub5::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub6::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub7::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub8::after {
content: "\f104";
font-family: 'FontAwesome';
color: #fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
position: absolute;
right: 15px;
}
#sidebar ul.list-unstyled li a.has-sub.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub2.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub3.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub4.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub5.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub6.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub7.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a.has-sub8.open-dropdown:after {
content: "\f107";
}
#sidebar ul.list-unstyled li a i {
font-size: 16px;
width: 18px;
text-align: center;
margin-right: 15px;
}
#sidebar ul.list-unstyled li:first-child a i {
font-size: 18px;
}
#sidebar ul.list-unstyled li:hover,
#sidebar ul.list-unstyled li.active {
background-color: rgba(255, 255, 255, 0.15);
}
#sidebar.collapse-sidebar {
min-width: 50px;
max-width: 50px;
text-align: center;
}
#sidebar.collapse-sidebar .sidebar-header img {
width: 40px;
}
#sidebar ul.list-unstyled {
padding: 0;
margin: 0;
list-style: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li a {
height: 60px;
padding: 20px 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a i {
font-size: 18px;
width: 20px;
margin-right: 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
font-size: 20px;
}
#layout-admin {
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
width: calc(100% - 50px);
min-height: 100vh;
transition: all 0.3s;
background-color: #f5f7f9;
}
#layout-admin .header {
height: 60px;
background-color: rgb(232, 2, 21);
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px 0 15px;
position: sticky;
z-index: 10;
top: 0;
width: 100%;
}
#layout-admin .header .header-left {
font-size: 0;
}
#layout-admin .header .header-right>div {
display: inline-block;
}
#layout-admin .header .header-right a {
font-size: 28px;
color: #fff;
}
#username {
font-size: 20px;
vertical-align: middle;
padding-bottom: 10px;
margin-right: 10px;
}
#layout-admin .header .header-right .setting {
margin-right: 40px;
}
#layout-admin .header .header-left button.show-sidebar {
background-color: transparent;
border: none;
font-size: 28px;
color: #fff;
/*-webkit-text-stroke: 1.5px white;*/
display: inline-block;
vertical-align: middle;
margin-right: 25px;
outline: none;
cursor: pointer;
}
#layout-admin .header .header-left .logo {
display: inline-block;
vertical-align: middle;
}
#layout-admin .header .header-left .title {
display: inline-block;
vertical-align: middle;
font-size: 22px;
font-weight: 600;
color: #fff;
}
#layout-admin .header .header-left .title span {
font-weight: normal;
}
#layout-admin .content-admin {
padding: 20px;
}
#layout-admin .content-admin .title-content {
font-size: 20px;
font-weight: 600;
line-height: 1.1;
margin-bottom: 30px;
}
#layout-admin.collapse-sidebar {
width: calc(100% - 250px);
transform: translate3d(250px, 0, 0);
-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
-ms-transform: translate3d(250px, 0, 0);
-o-transform: translate3d(250px, 0, 0);
}
.sub-nav,
.sub-nav2,
.sub-nav3,
.sub-nav4,
.sub-nav5,
.sub-nav6,
.sub-nav7,
.sub-nav8 {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.sub-nav li,
.sub-nav2 li,
.sub-nav3 li,
.sub-nav4 li,
.sub-nav5 li,
.sub-nav6 li,
.sub-nav7 li,
.sub-nav8 li {
font-size: 14px;
color: #fff;
list-style: none;
padding: 8px 15px 8px 30px;
}
#sidebarCollapse-mobile {
display: none;
background-color: transparent;
border: none;
font-size: 28px;
color: #fff;
vertical-align: middle;
margin-right: 25px;
outline: none;
cursor: pointer;
}
#media (max-width: 767px) {
#sidebar {
min-width: 0px;
max-width: 0px;
text-align: center;
}
#sidebar.collapse-sidebar {
min-width: 250px;
max-width: 250px;
text-align: left;
z-index: 1;
}
#sidebar .sidebar-header img {
width: 40px;
}
#sidebar.collapse-sidebar .sidebar-header img {
width: 100px;
}
#sidebar ul.list-unstyled li a {
height: 60px;
padding: 20px 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a {
height: 40px;
padding: 8px 25px;
}
#sidebar ul.list-unstyled li a i {
font-size: 18px;
width: 20px;
margin-right: 0;
}
#sidebar.collapse-sidebar ul.list-unstyled li a i {
font-size: 16px;
width: 18px;
margin-right: 15px;
}
#sidebar ul.list-unstyled li:first-child a i {
font-size: 20px;
}
#sidebar.collapse-sidebar ul.list-unstyled li:first-child a i {
font-size: 18px;
}
#sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: none;
}
#sidebar.collapse-sidebar ul.list-unstyled li a span.sidebar-menu-text {
display: inline-block;
}
*#layout-admin {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
width: calc(100% - 0px);
}
#layout-admin.collapse-sidebar {
width: calc(100% - 0px);
transform: translate3d(0px, 0, 0);
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-ms-transform: translate3d(0px, 0, 0);
-o-transform: translate3d(0px, 0, 0);
}
#layout-admin .header .header-left .title {
font-size: 16px;
}
#layout-admin .header .header-right a {
font-size: 22px;
}
#username {
font-size: 14px;
}
#sidebar.collapse-sidebar #sidebarCollapse-mobile {
display: inline-block;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico" sizes="32x32">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<nav id="sidebar">
<!--------------------- Sidebar header ---------------------------->
<div class="sidebar-header">
<img src="/common/images/logo.svg" alt="logo">
<button type="button" id="sidebarCollapse-mobile" class="show-sidebar">
<i class="fa fa-bars"></i>
</button>
</div>
<!--------------------- Sidebar menu ---------------------------->
<ul class="list-unstyled nav-links">
<li class="active">
<a href="#">
<i class="fa fa-home" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Home</span>
</a>
</li>
<li id="li-pendingorders">
<a href="javascript:void(0)" class="has-sub">
<i class="fas fa-box-open" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Pending Orders</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-collectorders" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-crosshairs"></span> Collect orders</a>
</li>
<li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-box-open"></span> Partial collect</a>
</li>
<li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-warehouse"></span> Warehouse collect</a>
</li>
<li id="li-outofstock" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-surprise"></span> Out of Stock</a>
</li>
<li id="li-ordered" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-thumbtack "></span> Ordered</a>
</li>
<li id="li-rts" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-recycle"></span> RTS</a>
</li>
<li id="li-awaitinglist" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-pause-circle"></span> Awaiting List</a>
</li>
</ul>
</li>
<li id="li-manageorders">
<a href="javascript:void(0)" class="has-sub">
<i class="fa fa-tasks" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Manage Orders</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-addneworder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-eye"></span> View Order</a>
</li>
<li id="li-warehousecollect" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-plus"></span> Create Order</a>
</li>
</ul>
</li>
<li id="li-packorders">
<a href="javascript:void(0)" class="has-sub">
<i class="fa fa-tape" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Pack Orders</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tape"></span> Pack Orders</a>
</li>
</ul>
</li>
<li id="li-manageinventory">
<a href="javascript:void(0)" class="has-sub">
<i class="fa fa-table" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Manage Inventory</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-sliders-h"></span> Adjust Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck-loading"></span> Receive Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-dolly"></span> Ship Stock</a>
</li>
<li id="li-packorder" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-map-marked-alt"></span> Locations</a>
</li>
</ul>
</li>
<li id="li-orderdownload">
<a href="#">
<i class="fa fa-download" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Download Orders</span>
</a>
</li>
<li id="li-tracking">
<a href="javascript:void(0)" class="has-sub">
<i class="fas fa-shipping-fast" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Tracking</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-markorderassent" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-truck"></span> Mark Order as Sent</a>
</li>
<li id="li-downloatrackings" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-down"></span> Download Trackings</a>
</li>
<li id="li-uploadtrackings" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-arrow-up"></span> Upload Trackings</a>
</li>
</ul>
</li>
<li id="labels">
<a href="javascript:void(0)" class="has-sub">
<i class="fas fa-tags"></i>
<span class='sidebar-menu-text'>Labels</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-createlabels" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tag"></span> Create Labels</a>
</li>
<li id="li-morelabels" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-tags"></span> More Labels (template)</a>
</li>
</ul>
</li>
<li id="refunds">
<a href="#">
<i class="fas fa-money-bill-wave"></i>
<span class='sidebar-menu-text'>Refunds</span>
</a>
</li>
<li id="manageadm">
<a href="javascript:void(0)" class="has-sub">
<i class="fas fa-users-cog" aria-hidden="true"></i>
<span class='sidebar-menu-text'>Admin</span>
</a>
<ul class="sub-nav" style="display: none;">
<li id="li-usermanagement" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-user-cog"></span> User Management</a>
</li>
<li id="li-packermanagement" style="margin-top: 0px;margin-bottom: 0px;">
<a style="height: 30px;padding-top: 5px;padding-left: 15px;" href="#"><span class="fas fa-toolbox"></span> Packer Management</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Related
I'm developing a webpage, I created a side bar with dropdown menu. But the problem is dropdown open only with click the chevron (down-arrow), I want it to open when we click the full button area.
Sidebar Codepen
let navli = document.querySelectorAll("div.icon-link");
for (var i = 0; i < navli.length; i++) {
navli[i].addEventListener("click", (e) => {
let navliParent = e.target.parentElement.parentElement; //selecting main parent of arrow
navliParent.classList.toggle("showMenu");
});
}
I'm expecting some help me on the sidebar / js update to make the dropdown works properly
Welcome to Stackoverflow Siraz,
Problem is you are adding class to wrong parent. Use closest method to find the exact li parent
MDN DOCS HERE
// Sidebar Expand and Tool Tip Features for Whole Div
let navli = document.querySelectorAll("div.icon-link");
for (var i = 0; i < navli.length; i++) {
navli[i].addEventListener("click", (e) => {
/* Use closest insead of parent */
e.target.closest('li').classList.toggle("showMenu");
// let navliParent = e.target.parentElement.parentElement; //selecting main parent of arrow
// navliParent.classList.toggle("showMenu");
});
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".hamburger");
sidebarBtn.addEventListener("click", () => {
sidebar.classList.toggle("close");
});
// Hamburger Animation
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
$hamburger.toggleClass("is-active");
// Do something else, like open/close menu
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap');
body {font-family: 'Poppins', sans-serif;}
/* Sidebar */
.sidebar {
height: 100%;
width: 20rem;
background-color: #0039C6;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.close {
width: 78px;
}
.sidebar .sidebar-menu {
height: 60px;
width: 100%;
display: flex;
align-items: center;
margin-inline-start: 3px;
/* margin-top: 20px; */
}
.sidebar .nav-links {
height: 100%;
padding-inline: 0;
padding-block-start: 20px;
padding-block-end: 150px;
overflow: auto;
}
.sidebar.close .nav-links {
overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar {
display: none;
}
.sidebar .nav-links li i.arrow {
height: 50px;
min-width: 60px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li:hover {
background-color: var(--ps-sidebarnav-hover);
}
.sidebar .nav-links li .icon-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar.close .nav-links li .icon-link {
display: block
}
.sidebar .nav-links li i {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow {
transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow {
display: none;
}
.sidebar .nav-links li a {
display: flex;
align-items: center;
text-decoration: none;
}
.sidebar .nav-links li a .link_name {
font-size: 0.9rem;
font-weight: 400;
color: #fff;
transition: all 0.4s ease;
white-space: nowrap;
}
.sidebar.close .nav-links li a .link_name {
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li .sub-menu {
padding-block-start: 6px;
padding-block-end: 14px;
padding-inline-start: 80px;
padding-inline-end: 6px;
margin-top: -10px;
background-color: var(--ps-sidebarnav-hover);
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu {
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: #fff;
font-size: 1em;
padding: 7px 0;
white-space: nowrap;
opacity: 0.6;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover {
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
position: absolute;
inset-inline-start: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name {
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank {
opacity: 1;
pointer-events: auto;
padding-block-start: 3px;
padding-block-end: 6px;
padding-inline-start: 16px;
padding-inline-end: 20px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.home-section {
position: relative;
inset-inline-start: 20rem;
width: calc(100% - 20rem);
transition: all 0.5s ease;
}
.home-content {
padding-block-start: 4rem;
}
header {
position: fixed;
inset-inline-start: 20rem;
width: calc(100% - 20rem);
transition: all 0.5s ease;
z-index: 99;
}
.sidebar.close~.home-section header {
inset-inline-start: 78px;
width: calc(100% - 78px);
}
.sidebar.close~.home-section {
inset-inline-start: 78px;
width: calc(100% - 78px);
}
/* Hamburger Toggle Button */
.hamburger {
min-width: 48px;
text-align: center;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger.is-active:hover {
opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #fff;
}
.hamburger-box {
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 25px;
height: 4px;
background-color: #fff;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="sidebar open open">
<div class="sidebar-menu">
<!-- Hamburger Menu -->
<button class="hamburger hamburger--spin" type="button" aria-label="Menu" aria-controls="navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<!-- Side navBar -->
<ul class="nav-links">
<li>
<a href="#">
<i class="fa-regular fa-grid-horizontal"></i>
<span class="link_name">Dashboard</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Dashboard</a></li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<i class="fa-regular fa-file-contract"></i>
<span class="link_name">Parnership Applications</span>
</a>
<i class="fa fa-chevron-down arrow"></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Applications</a></li>
<li>Entities</li>
<li>Incomplete</li>
<li>All requests</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<i class="fa-regular fa-files"></i>
<span class="link_name">My File</span>
</a>
<i class="fa fa-chevron-down arrow"></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">My File</a></li>
<li>My tasks</li>
<li>My applications</li>
<li>User profile</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<i class="fa-regular fa-screen-users"></i>
<span class="link_name">Profile</span>
</a>
<i class="fa fa-chevron-down arrow"></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Partnership Profile</a></li>
<li>Profiles</li>
<li>Notes</li>
<li>Procedure</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa-regular fa-calendar-range"></i>
<span class="link_name">Agenda</span>
</a>
<ul class="sub-menu">
<li><a class="link_name" href="#">Agenda</a></li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<i class="fa-regular fa-ballot-check"></i>
<span class="link_name">Surveys Management</span>
</a>
<i class="fa fa-chevron-down arrow"></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Management</a></li>
<li>Survey</li>
<li>Results</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa-regular fa-file-chart-pie"></i>
<span class="link_name">Reports</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Reports</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa-regular fa-box-archive"></i>
<span class="link_name">Archive</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Archive</a></li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<i class="fa-regular fa-comment-dots"></i>
<span class="link_name">Suggestions/Complaints</span>
</a>
<i class="fa fa-chevron-down arrow"></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Suggestions/Complaints</a></li>
<li>Surveys and complaints</li>
<li>Surveys suggestions</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa-regular fa-messages"></i>
<span class="link_name">Partners Communication</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Partners Communication</a></li>
</ul>
</li>
</ul>
</div>
Welcome to StackOverflow!
Basically your problem is that when you click on the div or on the arrow, you get different targets, hence different parents.
You can fix it by using event's currentTarget and removing one parentElement selector:
for (var i = 0; i < navli.length; i++) {
navli[i].addEventListener("click", (e) => {
let navliParent = e.currentTarget.parentElement; //selecting main parent of arrow
navliParent.classList.toggle("showMenu");
});
}
The problem is that you set outside of and you click on only .
let navli = document.querySelectorAll(".icon-link a");
for (var i = 0; i < navli.length; i++) {
navli[i].addEventListener("click", (e) => {
let navliParent = e.target.parentElement.parentElement.parentElement; //selecting main parent of arrow
navliParent.classList.toggle("showMenu");
});
}
body {
font-family: 'Poppins', sans-serif;
}
/* Sidebar */
.sidebar {
height: 100%;
width: 20rem;
background-color: #0039C6;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.close {
width: 78px;
}
.sidebar .sidebar-menu {
height: 60px;
width: 100%;
display: flex;
align-items: center;
margin-inline-start: 3px;
/* margin-top: 20px; */
}
.sidebar .nav-links {
height: 100%;
padding-inline: 0;
padding-block-start: 20px;
padding-block-end: 150px;
overflow: auto;
}
.sidebar.close .nav-links {
overflow: visible;
}
.sidebar .nav-links::-webkit-scrollbar {
display: none;
}
.sidebar .nav-links li i.arrow {
height: 50px;
min-width: 60px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li:hover {
background-color: var(--ps-sidebarnav-hover);
}
.sidebar .nav-links li .icon-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar.close .nav-links li .icon-link {
display: block
}
.sidebar .nav-links li i {
height: 50px;
min-width: 78px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li.showMenu i.arrow {
transform: rotate(-180deg);
}
.sidebar.close .nav-links i.arrow {
display: none;
}
.sidebar .nav-links li a {
display: flex;
align-items: center;
text-decoration: none;
width: 100%;
}
.sidebar .nav-links li a .link_name {
font-size: 0.9rem;
font-weight: 400;
color: #fff;
transition: all 0.4s ease;
white-space: nowrap;
flex: 1;
}
.sidebar.close .nav-links li a .link_name {
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li .sub-menu {
padding-block-start: 6px;
padding-block-end: 14px;
padding-inline-start: 80px;
padding-inline-end: 6px;
margin-top: -10px;
background-color: var(--ps-sidebarnav-hover);
display: none;
}
.sidebar .nav-links li.showMenu .sub-menu {
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: #fff;
font-size: 1em;
padding: 7px 0;
white-space: nowrap;
opacity: 0.6;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu a:hover {
opacity: 1;
}
.sidebar.close .nav-links li .sub-menu {
position: absolute;
inset-inline-start: 100%;
top: -10px;
margin-top: 0;
padding: 10px 20px;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
}
.sidebar.close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name {
display: none;
}
.sidebar.close .nav-links li .sub-menu .link_name {
font-size: 18px;
opacity: 1;
display: block;
}
.sidebar .nav-links li .sub-menu.blank {
opacity: 1;
pointer-events: auto;
padding-block-start: 3px;
padding-block-end: 6px;
padding-inline-start: 16px;
padding-inline-end: 20px;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.home-section {
position: relative;
inset-inline-start: 20rem;
width: calc(100% - 20rem);
transition: all 0.5s ease;
}
.home-content {
padding-block-start: 4rem;
}
header {
position: fixed;
inset-inline-start: 20rem;
width: calc(100% - 20rem);
transition: all 0.5s ease;
z-index: 99;
}
.sidebar.close~.home-section header {
inset-inline-start: 78px;
width: calc(100% - 78px);
}
.sidebar.close~.home-section {
inset-inline-start: 78px;
width: calc(100% - 78px);
}
/* Hamburger Toggle Button */
.hamburger {
min-width: 48px;
text-align: center;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger.is-active:hover {
opacity: 0.7;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
background-color: #fff;
}
.hamburger-box {
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 25px;
height: 4px;
background-color: #fff;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
<div class="sidebar open open">
<div class="sidebar-menu">
<!-- Hamburger Menu -->
<button class="hamburger hamburger--spin" type="button" aria-label="Menu" aria-controls="navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<!-- Side navBar -->
<ul class="nav-links">
<li>
<a href="#">
<i class="fa-regular fa-grid-horizontal"></i>
<span class="link_name">Dashboard</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Dashboard</a></li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<i class="fa-regular fa-file-contract"></i>
<span class="link_name">Parnership Applications</span>
<i class="fa fa-chevron-down arrow"></i>
</a>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Applications</a></li>
<li>Entities</li>
<li>Incomplete</li>
<li>All requests</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<i class="fa-regular fa-files"></i>
<span class="link_name">My File</span>
<i class="fa fa-chevron-down arrow"></i>
</a>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">My File</a></li>
<li>My tasks</li>
<li>My applications</li>
<li>User profile</li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<i class="fa-regular fa-screen-users"></i>
<span class="link_name">Profile</span>
<i class="fa fa-chevron-down arrow"></i>
</a>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Partnership Profile</a></li>
<li>Profiles</li>
<li>Notes</li>
<li>Procedure</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa-regular fa-calendar-range"></i>
<span class="link_name">Agenda</span>
</a>
<ul class="sub-menu">
<li><a class="link_name" href="#">Agenda</a></li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<i class="fa-regular fa-ballot-check"></i>
<span class="link_name">Surveys Management</span>
<i class="fa fa-chevron-down arrow"></i>
</a>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Management</a></li>
<li>Survey</li>
<li>Results</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa-regular fa-file-chart-pie"></i>
<span class="link_name">Reports</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Reports</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="fa-regular fa-box-archive"></i>
<span class="link_name">Archive</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Archive</a></li>
</ul>
</li>
<li>
<div class="icon-link">
<a href="#">
<i class="fa-regular fa-comment-dots"></i>
<span class="link_name">Suggestions/Complaints</span>
<i class="fa fa-chevron-down arrow"></i>
</a>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Suggestions/Complaints</a></li>
<li>Surveys and complaints</li>
<li>Surveys suggestions</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa-regular fa-messages"></i>
<span class="link_name">Partners Communication</span>
</a>
<ul class="sub-menu blank">
<li><a class="link_name" href="#">Partners Communication</a></li>
</ul>
</li>
</ul>
</div>
I'm programming a page and I have a Header and a Sidebar but I'm in trouble with the top property overlapping my header, the sidebar would have to have the top value zeroed but in this scenario it overlaps my header by changing the value to 10 for example I solve this problem of overlapping but create an unwanted spacing when Scrolling. I am new to the world of web design but I have tried several solutions for such an event but none solves such a occurred.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* Header */
header .navbar {
font-size: 15px;
background-image: linear-gradient(260deg, #c16ecf 0%, #2376ae 100%);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
}
header #navbarNavAltMarkup {
justify-content: flex-end;
}
header #navbarNavAltMarkup .nav-link {
color: #fff;
transition: all ease 0.2s;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .nav-link:hover {
color: #081145;
transition: all ease 0.2s;
}
header #navbarNavAltMarkup .active {
color: #081145;
font-weight: 400;
}
header #navbarNavAltMarkup .dropbtn {
background-color: transparent;
color: white;
padding: 16px;
border: none;
cursor: pointer;
font-size: 15px;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .dropbtn:hover,
.dropbtn:focus {
background-color: transparent;
}
header #navbarNavAltMarkup .dropdown {
position: relative;
display: inline-block;
}
header #navbarNavAltMarkup .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 100px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
header #navbarNavAltMarkup .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
header #navbarNavAltMarkup .dropdown a:hover {
background-color: #ddd;
}
header #navbarNavAltMarkup .show {
display: block;
}
/* Test */
/* Mobile */
header .navbar-nav {
align-items: center;
}
/* End Header */
/* Aside */
.sidebar {
position: fixed;
left: 0;
top: 10;
height: 100%;
width: 78px;
/* background-image: linear-gradient(260deg, #2376ae 0%,#c16ecf 100%); */
background: #11101D;
padding: 2px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open {
width: 250px;
}
.sidebar .logo-details {
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon {
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name {
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name {
opacity: 1;
}
.sidebar .logo-details #btn {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn {
text-align: right;
}
.sidebar i {
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list {
margin-top: 20px;
height: 100%;
}
.sidebar li {
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip {
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar ol,
ul {
padding-left: 0px;
}
.sidebar li:hover .tooltip {
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip {
display: none;
}
.sidebar input {
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #1d1b31;
}
.sidebar.open input {
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #1d1b31;
color: #FFF;
}
.sidebar.open .bx-search:hover {
background: #1d1b31;
color: #FFF;
}
.sidebar .bx-search:hover {
background: #FFF;
color: #11101d;
}
.sidebar li a {
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #11101D;
}
.sidebar li a:hover {
background: #FFF;
}
.sidebar li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i {
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i {
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile {
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #1d1b31;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile {
width: 250px;
}
.sidebar li .profile-details {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img {
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job {
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job {
font-size: 12px;
}
.sidebar .profile #log_out {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #1d1b31;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out {
width: 50px;
background: none;
}
body {
background: #E4E9F7;
}
.home-section {
position: relative;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open~.home-section {
left: 250px;
width: calc(100% - 250px);
}
.home-section .text {
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip {
display: none;
}
}
/* End Aside */
<header>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon p-0 m-0">
<img class="p-0 m-0" src="{% static 'icons/toggle.svg' %}" alt="" width="35" height="35">
</span>
</button>
<div class="collapse navbar-collapse " id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">PAINEL</a>
<a class="nav-link" href="#">CNGR</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">REDES</a>
<a class="nav-link" href="#">VOIP</a>
<div class="dropdown ">
<button onclick="myFunction()" class="dropbtn">
PROFILE
</button>
<div id="myDropdown" class="dropdown-content">
Perfil
Logout
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<sidebar class="sidebar">
<div class="logo-details">
<i class='bx bx-phone icon'></i>
<div class="logo_name">VOIP</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search'></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-data'></i>
<span class="links_name">Database</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat'></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2'></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder'></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt'></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<img src="profile.jpg" alt="profileImg">
<div class="name_job">
<div class="name">Prem Shahi</div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out"></i>
</li>
</ul>
</sidebar>
<section class="home-section">
<div class="text">Dashboard</div>
</section>
</main>
As told there can be 2 solutions to your problem :
You can use z-index on header and put it above sidebar
For that have use z-index value of sidebar to be -1 . As using this you must be careful as some content may overlap(overlay) your sidebar so it is better to leave a margin on the left
Use sticky property to have it stick to top when scrolling
You have to make a lot of changes in your CSS to make a look right now , but for a start you can use display: block along position: sticky to have a start and improve on the go
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* Header */
header .navbar {
font-size: 15px;
background-image: linear-gradient(260deg, #c16ecf 0%, #2376ae 100%);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
}
header #navbarNavAltMarkup {
justify-content: flex-end;
}
header #navbarNavAltMarkup .nav-link {
color: #fff;
transition: all ease 0.2s;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .nav-link:hover {
color: #081145;
transition: all ease 0.2s;
}
header #navbarNavAltMarkup .active {
color: #081145;
font-weight: 400;
}
header #navbarNavAltMarkup .dropbtn {
background-color: transparent;
color: white;
padding: 16px;
border: none;
cursor: pointer;
font-size: 15px;
margin-left: 50px;
margin-right: 50px;
}
header #navbarNavAltMarkup .dropbtn:hover,
.dropbtn:focus {
background-color: transparent;
}
header #navbarNavAltMarkup .dropdown {
position: relative;
display: inline-block;
}
header #navbarNavAltMarkup .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 100px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
header #navbarNavAltMarkup .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
header #navbarNavAltMarkup .dropdown a:hover {
background-color: #ddd;
}
header #navbarNavAltMarkup .show {
display: block;
}
/* Test */
/* Mobile */
header .navbar-nav {
align-items: center;
}
/* End Header */
/* Aside */
.sidebar {
position: fixed;
left: 0;
top: 10;
height: 100%;
width: 78px;
/* background-image: linear-gradient(260deg, #2376ae 0%,#c16ecf 100%); */
background: #11101D;
padding: 2px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open {
width: 250px;
}
.sidebar .logo-details {
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon {
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name {
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name {
opacity: 1;
}
.sidebar .logo-details #btn {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn {
text-align: right;
}
.sidebar i {
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list {
margin-top: 20px;
height: 100%;
}
.sidebar li {
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip {
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar ol,
ul {
padding-left: 0px;
}
.sidebar li:hover .tooltip {
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip {
display: none;
}
.sidebar input {
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #1d1b31;
}
.sidebar.open input {
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #1d1b31;
color: #FFF;
}
.sidebar.open .bx-search:hover {
background: #1d1b31;
color: #FFF;
}
.sidebar .bx-search:hover {
background: #FFF;
color: #11101d;
}
.sidebar li a {
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #11101D;
}
.sidebar li a:hover {
background: #FFF;
}
.sidebar li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name {
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i {
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i {
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile {
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #1d1b31;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile {
width: 250px;
}
.sidebar li .profile-details {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img {
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job {
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job {
font-size: 12px;
}
.sidebar .profile #log_out {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #1d1b31;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out {
width: 50px;
background: none;
}
body {
background: #E4E9F7;
}
.home-section {
position: relative;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open~.home-section {
left: 250px;
width: calc(100% - 250px);
}
.home-section .text {
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip {
display: none;
}
}
/* End Aside */
<header>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon p-0 m-0">
<img class="p-0 m-0" src="{% static 'icons/toggle.svg' %}" alt="" width="35" height="35">
</span>
</button>
<div class="collapse navbar-collapse " id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">PAINEL</a>
<a class="nav-link" href="#">CNGR</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">REDES</a>
<a class="nav-link" href="#">VOIP</a>
<div class="dropdown ">
<button onclick="myFunction()" class="dropbtn">
PROFILE
</button>
<div id="myDropdown" class="dropdown-content">
Perfil
Logout
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<main>
<sidebar class="sidebar">
<div class="logo-details">
<i class='bx bx-phone icon'></i>
<div class="logo_name">VOIP</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav-list">
<li>
<i class='bx bx-search'></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li>
<a href="#">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
<span class="tooltip">Dashboard</span>
</li>
<li>
<a href="#">
<i class='bx bx-data'></i>
<span class="links_name">Database</span>
</a>
<span class="tooltip">User</span>
</li>
<li>
<a href="#">
<i class='bx bx-chat'></i>
<span class="links_name">Messages</span>
</a>
<span class="tooltip">Messages</span>
</li>
<li>
<a href="#">
<i class='bx bx-pie-chart-alt-2'></i>
<span class="links_name">Analytics</span>
</a>
<span class="tooltip">Analytics</span>
</li>
<li>
<a href="#">
<i class='bx bx-folder'></i>
<span class="links_name">File Manager</span>
</a>
<span class="tooltip">Files</span>
</li>
<li>
<a href="#">
<i class='bx bx-cart-alt'></i>
<span class="links_name">Order</span>
</a>
<span class="tooltip">Order</span>
</li>
<li>
<a href="#">
<i class='bx bx-heart'></i>
<span class="links_name">Saved</span>
</a>
<span class="tooltip">Saved</span>
</li>
<li>
<a href="#">
<i class='bx bx-cog'></i>
<span class="links_name">Setting</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<div class="profile-details">
<img src="profile.jpg" alt="profileImg">
<div class="name_job">
<div class="name">Prem Shahi</div>
<div class="job">Web designer</div>
</div>
</div>
<i class='bx bx-log-out' id="log_out"></i>
</li>
</ul>
</sidebar>
<section class="home-section">
<div class="text">Dashboard</div>
</section>
</main>
With 1st solution there also comes some problem like your content will be hidden under header until you scroll . Here you can use margin and sticky for inside content of sidebar or it is better to improve CSS and go 2nd option
You can give dashboard overflow-Y: scroll and reduce its width to 100%-open sidebar width(flexbox will adjust dashboard´s width automatically if you give sidebar element min-width: max-content;). This is how you stick your sidebar in place without using position or z-index. I will give you a little example
const button = document.querySelector('button');
const sidebar = document.querySelector(".sidebar");
button.onclick = () => {
sidebar.classList.toggle('active');
}
body {
margin: 0;
padding: 0;
height: 100vh;
}
.header {
height: 10vh;
background: red;
}
.content {
display: flex;
flex-flow: row nowrap;
}
.content .sidebar {
width: 5%;
background: black;
height: 90vh;
}
.content .sidebar.active {
width: 20%;
}
.content .dashboard {
height: 90vh;
width: 100%;
background: green;
overflow-y: scroll;
scroll-behavior: smooth;
}
.content .dashboard .hard-coded-overflow {
height: 1000px;
}
<body>
<div class="header"></div>
<div class="content">
<div class="sidebar active">
<button class="close">close</button>
</div>
<div class="dashboard">
<div class="hard-coded-overflow">
</div>
</div>
</div>
</body>
You can add transition to make it seem like a proper animation and it is way better user experience than overlaping sidebar on top of main content( that should happen when media width is adequate for mobile devices).
Im facing a rather famous problem but cant seem to find any solution in my case. So I have this collapsible scrollable bar implemented on bootstrap but the problem is when i try to scroll this bar on mobile, due to the search bar taking a little space from the 100% height set for the sidebar, the scrollbar does not reach the end of the div therefore clipping the content. I want to know a way to exclude the bar from the height or like a workaround that would fix this issue.
Here's my html and css for the sidebar: https://jsfiddle.net/fq5b3m1w/
html,
body {
background: #f8f8f8;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
padding-top: 50px;
}
#wrapper.toggled {
// padding-left: 100px;
}
#sidebar-wrapper {
z-index: 99999;
position: fixed;
left: 100px;
width: 0;
height: calc(100%);
margin-left: -100px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #fcfcfc;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 100px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 5px;
background: #f8f8f8;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -100px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
// text-indent: 20px;
// line-height: 25px;
text-align: center;
margin: 0 0;
}
.sidebar-nav li .fa {
padding-top: 10px;
display: block;
// color: rgba(2,136,209,1);
}
.sidebar-nav li.active a {
// color: #fff;
background: rgba(2, 136, 209, .2);
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #000;
transition: all .2s;
font-size: 14px;
padding: 8px 0;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #333;
background: rgba(2, 136, 209, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
color: #333;
background: rgba(2, 136, 209, 0.2);
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:992px) {
#wrapper {
padding-left: 100px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 100px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
First Method:
A simple solution would be adding a border to offset the extra space on top
Remove:
#wrapper {
padding-top: 50px;
}
Add:
#sidebar-wrapper {
border-top: 50px solid white;
}
Second Method:
Creating a top a header and a content divs, where you specify the header with height:10% and content height:90%. This way the scrollbar will always fit into the screen regardless what size you are in.
Third Method:
Using display:flex where you arrange both header and content in a column using flex-direction: column;. Then specify the header using flex-basis:50px and content flex-grow:1 and flex-basis:auto; this way the content adjust the height itself automatically.
I don't know if this is what you want but you could try this.
$("#menu-toggle").click(function(e) {
e.preventDefault();
var height = $(window).height()-50;
$('#sidebar-wrapper').css('height',height+'px');
$("#wrapper").toggleClass("toggled");
});
html,
body {
background: #f8f8f8;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
padding-top: 50px;
}
#wrapper.toggled {
// padding-left: 100px;
}
#sidebar-wrapper {
z-index: 99999;
position: fixed;
left: 100px;
width: 0;
margin-left: -100px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #fcfcfc;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 100px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 5px;
background: #f8f8f8;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -100px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
// text-indent: 20px;
// line-height: 25px;
text-align: center;
margin: 0 0;
}
.sidebar-nav li .fa {
padding-top: 10px;
display: block;
// color: rgba(2,136,209,1);
}
.sidebar-nav li.active a {
// color: #fff;
background: rgba(2, 136, 209, .2);
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #000;
transition: all .2s;
font-size: 14px;
padding: 8px 0;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #333;
background: rgba(2, 136, 209, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
color: #333;
background: rgba(2, 136, 209, 0.2);
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:992px) {
#wrapper {
padding-left: 100px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 100px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper" class="affix">
<ul class="sidebar-nav">
<li class="active">
<a href="/">
<i class="fa fa-home fa-2x"></i> Home
</a>
</li>
<li class="">
<a href="/companies">
<i class="fa fa-building fa-2x"></i> Companies
</a>
</li>
<li class="">
<a href="/people">
<i class="fa fa-users fa-2x"></i> People
</a>
</li>
<li>
<a href="/">
<i class="fa fa-handshake-o fa-2x"></i> Investors
</a>
</li>
<li>
<a href="/">
<i class="fa fa-money fa-2x"></i> Funding Rounds
</a>
</li>
<li>
<a href="/">
<i class="fa fa-users fa-2x"></i> Acquisitions
</a>
</li>
<li>
<a href="/">
<i class="fa fa-graduation-cap fa-2x"></i> Schools
</a>
</li>
<li>
<a href="/">
<i class="fa fa-calendar fa-2x"></i> Events
</a>
</li>
<li>
<a href="/">
<i class="fa fa-calendar fa-2x"></i> Login/Signup
</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
content
<button id="menu-toggle">
menu
</button>
</button>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
Updated Fiddle.
In left sidebar I just want to keep open clicked module a part from active module i.e in my current page module "A" is active and it's open by default after page is loaded. So, currently when I am clicking on other modules they also open. But what i want is a part from active module only latest module should open. For example A:Active and opened currently, when I will click on "B" module it will open with "A". But when i will click on "C" module module "B" should get closed after clicking.`
.sidebar-wrapper {
width: 200px;
position: fixed;
}
#sidebar-wrapper {
background: #F5F5F5 none repeat scroll 0 0;
height: 100vh;
position: fixed;
top: 0;
-webkit-transition: left 0.3s, -webkit-transform 2s;
transition: left 0.3s, transform 2s;
width: 200px;
border-right: 1px solid #E6E6E6;
z-index: 900;
min-height: 100%;
overflow-y: auto;
}
.sidebar-nav li a {
color: #646566;
font-size: 11px;
text-decoration: none;
display: block;
padding: 7px;
}
.sidebar-nav li a i:first-child {
float: left;
font-size: 20px;
margin-right: 6px;
position: relative;
top: -3px;
}
.sidebar-nav li ul li > a {
background: #d6d6d6;
}
.sidebar-nav li a[aria-expanded=true], .sidebar-nav li.active > a {
color: #e2e2e2;
font-family: opensans-semibold;
background: #217589;
}
.sidebar-nav li a[aria-expanded=true], .sidebar-nav li.active > a:active {
background-color: #217589;
}
.sidebar-nav li a[aria-expanded=true] i.fa-caret-right {
transform: rotate(90deg);
color: #414042;
}
.sidebar-nav li.open a {
background: #d6d6d6;
}
.sidebar-nav li ul {
margin: 0;
padding: 0;
}
.sidebar-nav li ul li {
list-style: none;
}
.sidebar-nav li ul li:hover {
border-right: 6px solid #217589;
}
.sidebar-nav li ul li a {
padding: 11px 8px 12px 39px;
}
.sidebar-nav li.active ul li.active a {
background: #217589;
color: #e2e2e2;
}
.sidebar-nav li a i.fa-caret-right {
font-size: 19px;
height: 8px;
position: absolute;
right: 10px;
top: 12px;
transition: all 0.218s ease 0s;
vertical-align: middle;
width: 7px;
color: #bababa;
}
.parent_menu {
margin-bottom: 0;
box-shadow: none;
background-color: #F5F5F5 !important;
border: 0 !important;
}
a.parent_menu_a {
background-color: #F5F5F5 !important;
color: #646566 !important;
}
a.parent_menu_a:hover {
text-decoration: none;
background-color: #eee !important;
}
.header ul.navbar-nav li a i.icon-dp {
font-size: 18px;
margin-right: 5px;
}
.header ul.navbar-nav li a i.icon-dp + span {
font-size: 11px;
}
#sidebar-wrapper li.parent_menu.active:active, #sidebar-wrapper li.parent_menu.active:focus, #sidebar-wrapper li.parent_menu.active a[aria-expanded=true], #sidebar-wrapper li.parent_menu.active a[aria-expanded=true]:active, #sidebar-wrapper li.parent_menu.active a[aria-expanded=true]:focus {
background: #e6e6e6 !important;
color: #414042 !important;
}
#sidebar-wrapper li.active > a:hover {
background: none;
text-decoration: none;
}
#sidebar-wrapper .parent_menu:hover {
background: #e6e6e6 !important;
text-decoration: none !important;
}
#sidebar-wrapper .parent_menu.active > a {
background: #e6e6e6;
color: #414042;
font-family: opensans-semibold;
}
#sidebar-wrapper ul .active {
background: #217589;
color: #e2e2e2;
}
#sidebar-wrapper ul .active:active {
background: #217589;
color: #e2e2e2;
}
.sidebar-wrapper {
z-index: 90;
}
#sidebar-wrapper.collapsed {
left: 250px;
-webkit-transition: left 0.3s, -webkit-transform 2s;
transition: left 0.3s, transform 2s;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="content-wrapper menu_visible">
<div class="grey_background"></div>
<div id="sidebar-wrapper">
<ul class="nav sidebar-nav" id="accordion" role="tablist" aria-multiselectable="false">
<li class=" active">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseproduct" aria-expanded="true" aria-controls="collapseproduct"> <i class="fa fa-circle"></i>A<i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingproduct" role="tabpanel" class="panel-collapse collapse in" id="collapseproduct" aria-expanded="true" style="">
<li class="">Add new products</li>
<li class="active">Check inventory</li>
<li class="">Channel-wise mapping</li>
<li class="">Search for items</li>
</ul>
</li>
<li class="">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseorder" aria-expanded="false" aria-controls="collapseorder"> <i class="fa fa-circle"></i> B <i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingorder" role="tabpanel" class="panel-collapse collapse" id="collapseorder" aria-expanded="false" style="">
<li class="">Create recall request</li>
<li class="">Manage orders</li>
</ul>
</li>
<li class="">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapsebilling" aria-expanded="false" aria-controls="collapsebilling"> <i class="fa fa-circle"></i>C <i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingbilling" role="tabpanel" class="panel-collapse collapse" id="collapsebilling" aria-expanded="false" style="">
<li class="">Invoice</li>
<li class="">Pricing</li>
</ul>
</li>
</ul>
</div>
<div class="content-area">
<div class="container-fluid">
<div style="width:40%;margin:0 auto;padding:40px;height:400px;text-align:center;background-color:black;color:red;vertical-align:middle;font-size:23px;">
Testing
</div>
</div>
</div>
<br>
<br>
<br>
</div>
Try this
$(document).ready(function(){
$('#accordion').on('show.bs.collapse', function (t,y) {
// do something…
$('#accordion li:not(.active) a.parent_menu_a').addClass('collapsed').attr('aria-expanded','false');
$('#accordion li:not(.active) .panel-collapse').removeClass('in');
})
});
.sidebar-wrapper {
width: 200px;
position: fixed;
}
#sidebar-wrapper {
background: #F5F5F5 none repeat scroll 0 0;
height: 100vh;
position: fixed;
top: 0;
-webkit-transition: left 0.3s, -webkit-transform 2s;
transition: left 0.3s, transform 2s;
width: 200px;
border-right: 1px solid #E6E6E6;
z-index: 900;
min-height: 100%;
overflow-y: auto;
}
.sidebar-nav li a {
color: #646566;
font-size: 11px;
text-decoration: none;
display: block;
padding: 7px;
}
.sidebar-nav li a i:first-child {
float: left;
font-size: 20px;
margin-right: 6px;
position: relative;
top: -3px;
}
.sidebar-nav li ul li > a {
background: #d6d6d6;
}
.sidebar-nav li a[aria-expanded=true], .sidebar-nav li.active > a {
color: #e2e2e2;
font-family: opensans-semibold;
background: #217589;
}
.sidebar-nav li a[aria-expanded=true], .sidebar-nav li.active > a:active {
background-color: #217589;
}
.sidebar-nav li a[aria-expanded=true] i.fa-caret-right {
transform: rotate(90deg);
color: #414042;
}
.sidebar-nav li.open a {
background: #d6d6d6;
}
.sidebar-nav li ul {
margin: 0;
padding: 0;
}
.sidebar-nav li ul li {
list-style: none;
}
.sidebar-nav li ul li:hover {
border-right: 6px solid #217589;
}
.sidebar-nav li ul li a {
padding: 11px 8px 12px 39px;
}
.sidebar-nav li.active ul li.active a {
background: #217589;
color: #e2e2e2;
}
.sidebar-nav li a i.fa-caret-right {
font-size: 19px;
height: 8px;
position: absolute;
right: 10px;
top: 12px;
transition: all 0.218s ease 0s;
vertical-align: middle;
width: 7px;
color: #bababa;
}
.parent_menu {
margin-bottom: 0;
box-shadow: none;
background-color: #F5F5F5 !important;
border: 0 !important;
}
a.parent_menu_a {
background-color: #F5F5F5 !important;
color: #646566 !important;
}
a.parent_menu_a:hover {
text-decoration: none;
background-color: #eee !important;
}
.header ul.navbar-nav li a i.icon-dp {
font-size: 18px;
margin-right: 5px;
}
.header ul.navbar-nav li a i.icon-dp + span {
font-size: 11px;
}
#sidebar-wrapper li.parent_menu.active:active, #sidebar-wrapper li.parent_menu.active:focus, #sidebar-wrapper li.parent_menu.active a[aria-expanded=true], #sidebar-wrapper li.parent_menu.active a[aria-expanded=true]:active, #sidebar-wrapper li.parent_menu.active a[aria-expanded=true]:focus {
background: #e6e6e6 !important;
color: #414042 !important;
}
#sidebar-wrapper li.active > a:hover {
background: none;
text-decoration: none;
}
#sidebar-wrapper .parent_menu:hover {
background: #e6e6e6 !important;
text-decoration: none !important;
}
#sidebar-wrapper .parent_menu.active > a {
background: #e6e6e6;
color: #414042;
font-family: opensans-semibold;
}
#sidebar-wrapper ul .active {
background: #217589;
color: #e2e2e2;
}
#sidebar-wrapper ul .active:active {
background: #217589;
color: #e2e2e2;
}
.sidebar-wrapper {
z-index: 90;
}
#sidebar-wrapper.collapsed {
left: 250px;
-webkit-transition: left 0.3s, -webkit-transform 2s;
transition: left 0.3s, transform 2s;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="content-wrapper menu_visible">
<div class="grey_background"></div>
<div id="sidebar-wrapper">
<ul class="nav sidebar-nav" id="accordion" role="tablist" aria-multiselectable="false">
<li class=" active">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseproduct" aria-expanded="true" aria-controls="collapseproduct"> <i class="fa fa-circle"></i>A<i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingproduct" role="tabpanel" class="panel-collapse collapse in" id="collapseproduct" aria-expanded="true" style="">
<li class="">Add new products</li>
<li class="active">Check inventory</li>
<li class="">Channel-wise mapping</li>
<li class="">Search for items</li>
</ul>
</li>
<li class="">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseorder" aria-expanded="false" aria-controls="collapseorder"> <i class="fa fa-circle"></i> B <i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingorder" role="tabpanel" class="panel-collapse collapse" id="collapseorder" aria-expanded="false" style="">
<li class="">Create recall request</li>
<li class="">Manage orders</li>
</ul>
</li>
<li class="">
<a class="parent_menu_a" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapsebilling" aria-expanded="false" aria-controls="collapsebilling"> <i class="fa fa-circle"></i>C <i class="fa fa-caret-right"></i> </a>
<ul aria-labelledby="headingbilling" role="tabpanel" class="panel-collapse collapse" id="collapsebilling" aria-expanded="false" style="">
<li class="">Invoice</li>
<li class="">Pricing</li>
</ul>
</li>
</ul>
</div>
<div class="content-area">
<div class="container-fluid">
<div style="width:40%;margin:0 auto;padding:40px;height:400px;text-align:center;background-color:black;color:red;vertical-align:middle;font-size:23px;">
Testing
</div>
</div>
</div>
<br>
<br>
<br>
</div>
I am trying to create a jQuery sliding navigation and I stumble into some problem. I don't know how to slide/hide and display my submenu.
Here's the HTML:
<div class="content">
<div class="page-content">
</div>
<div class="sidebar-nav">
<header class="logo">
<span class="fa fa-bars"></span>
<span id="logo">NAV</span>
</header>
<div class="nav">
<ul id="nav" >
<li><i class="fa fa-home"></i><span>Home</span></li>
<li><i class="fa fa-anchor"></i><span>Profile</span><span class="fa fa-plus" style="float: right"></span>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</li>
<li><i class="fa fa-gears"></i><span>Contact</span></li>
</ul>
</div>
</div>
</div>
Please help!
There's an error in your JSFiddle concerning your toggle = !toggle. However, why not just use the $('#elementId').toggle()? It's JQuery, and it simplifies this code massively. See here for my JSFiddle, and below for my code.
HTML:
<nav class="sidebar-nav">
<header class="logo">
<span class="fa fa-bars"></span>
<span id="logo">NAV</span>
</header>
<ul id="nav" class="nav">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-user"></i>Profile<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>profile.1</li>
<li>profile.2</li>
<li>profile.3</li>
</ul>
<li><i class="fa fa-envelope"></i>About<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
<li>About.1</li>
<li>About.2</li>
<li>About.3</li>
</ul>
</li>
<li><i class="fa fa-history"></i>Blog</li>
<li><i class="fa fa-share-alt"></i>Deals<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu3" role="menu" aria-labelledby="btn-1">
<li>Deals.1</li>
<li>Deals.2</li>
<li>Deals.3</li>
</ul>
</li>
</ul>
</nav>
CSS (I took a lot of this from the original Fiddle):
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
}
a {
color: #008DE7;
font-style: italic;
font-weight: 700;
}
.expandNav {
float: right;
padding-top: 4px;
}
.content {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}
.content.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back {
padding-right: 280px;
transition: all 100ms linear;
}
.content.sidebar-collapsed .sidebar-nav {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .sidebar-nav {
width: 280px;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed .logo {
padding: 26px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
height: 136px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}
.content.sidebar-collapsed-back #logo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed #nav span {
opacity: 0;
transition: all 50ms linear;
}
.content.sidebar-collapsed-back #nav span {
opacity: 1;
transition: all 200ms linear;
}
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa {
margin: 0px 17px 0px 0px;
}
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo {
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
and JS (This was just to toggle the icons):
$('#nav a').click(function() {
$(this).find('i.expandNav').toggleClass('fa-plus-square fa-minus-square');
});
try the following
css:
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
js:
$('.nav a').click(function(){
$(this).closest('li').find('ul').toggleClass('disp');
$(this).find('span.fa').toggleClass('fa-plus').toggleClass('fa-minus');
});
http://jsfiddle.net/2tz4usnL/3/
Here is a Working Fiddle
Add this Scripts
$('#nav a .fa.fa-plus').on('click',function(){
$(this).toggleClass('fa-plus').toggleClass('fa-minus'); //to toggle icons
$(this).closest('li').find('ul').toggleClass('active');
});
And this CSS
#nav li ul {
/*opacity: 0;*/ /* changed */
height: auto; /* changed */
display: none; /* added */
}
#nav li ul.active { /* added */
display:block;
}