How can I hide and show submenu? - javascript

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;
}

Related

Spacing problem between Header and Sidebar

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).

Mobile Chrome bar taking up space from 100% height css

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.

Fullscreen overlay opens on page load

I'm not sure if my function is wrong or there is something i miss-typed somewhere but every time I open my html page then the nav is open.
the function closes correctly and opens correctly once clicked anywhere on the overlay but the only issue im having is that when i load the page the nav is already opened.
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>

Add display: none to overlay - see demo below:
//Toggle of burgermenu
$(document).ready(function() {
$(".burger a").click(function() {
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".burger a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
//toggle transparency on scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ {
$('.navbar-default').addClass('opaque');
} else {
$('.navbar-default').removeClass('opaque');
}
});
/* NAVBAR */
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
width: auto;
padding: 15px;
margin-top: 0px;
margin-left: 10px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
border: none;
}
.navbar-default {
background-color: rgba(0, 0, 0, 0.0);
height: 50px;
transition: background-color .5s ease 0s;
}
.navbar-default .navbar-toggle {
border-color: rgba(221, 221, 221, 0);
}
.navbar-header {
float: none;
}
.navbar-default.opaque {
height: 50px;
background-color: rgba(51, 51, 61, 0.8);
transition: background-color .5s ease 0s;
border-radius: 0;
}
#nav-container {
padding: 0px;
}
#burgerimg {
margin: 0px;
margin-right: 10px;
margin-top: 10px;
}
/*Overlay*/
.overlay {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #33333d;
z-index: 99;
display: none;
}
a.headlink {
font-size: 26px;
opacity: 0.3;
}
a.headlink :hover {
opacity: 1;
}
.wrap {
color: #e9e9e9;
text-align: center;
max-width: 90%;
margin: 0 auto;
}
.wrap ul.wrap-nav {
text-transform: capitalize;
padding: 150px 0px 100px;
}
.wrap ul.wrap-nav li {
display: inline-block;
vertical-align: top;
width: 15%;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
text-decoration: none;
transition-property: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
opacity: 1;
}
.wrap ul.wrap-nav ul li {
display: block;
width: 100%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
font-size: 12px;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
opacity: 0.3;
}
.wrap ul.wrap-nav ul li a:hover {
color: #34B484;
opacity: 1;
}
.wrap img {
margin: 0px;
margin-bottom: 30px;
}
#media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px solid #575757;
}
.wrap ul.wrap-nav {
padding: 30px 0px 0px;
}
nav ul {
opacity: 0;
visibility: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container" id="nav-container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
<div class="burger">
<a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
</div>
</div>
</div>
</nav>
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li>
<a href="#" class="headlink"><img src="images/prod-icon.png">
<BR>Products</a>
<ul>
<li>Product Brief</li>
<li>Getting Started</li>
<li>Technology</li>
</ul>
</li>
</ul>
</div>
</div>
<!--END NAVBAR-->
<h1>WEBPAGE AND ETC</h1>

how to make the selected menu stay selected jquery, css , html

accordian menu , has to make the submenu to stay selected after clicking by js. or css .
not the static solution in html.
need solution comprising jquery and the css
it should appear same as hovering after clicked
check out the fiddle
https://jsfiddle.net/shaswatatripathy/ucgff65k/
$(document).ready(function() {
$("#accordion > li > div").click(function() {
$("#submenu li").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
});
.accordion {
width: 100%;
max-width: 260px;
background: #FFF;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
font-size: 14px;
font-weight: 700;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/*-------------Submenu-----------------------------*/
.submenu {
padding: 0px;
display: none;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #4b4a5e;
}
.submenu a {
display: block;
text-decoration: none;
color: #23222d;
background-color: #CCC;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#submenu li.active {
display: block;
}
.submenu a:hover {
background: #b63b4d;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="accordion" class="accordion">
<li>
<div class="link">Menu 2</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
<li>
<div class="link">Menu 3</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
</ul>

Hope this is what you're looking for,
$(document).ready(function() {
$("#accordion > li > div").click(function() {
$("#submenu li").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
$(".submenu li a").click(function(){
$(".submenu li a.active").removeClass("active");
$(this).addClass("active");
});
});
.accordion {
width: 100%;
max-width: 260px;
background: #FFF;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
font-size: 14px;
font-weight: 700;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/*-------------Submenu-----------------------------*/
.submenu {
padding: 0px;
display: none;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #4b4a5e;
}
.submenu a {
display: block;
text-decoration: none;
color: #23222d;
background-color: #CCC;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#submenu li.active {
display: block;
}
.submenu a:hover {
background: #b63b4d;
color: #FFF;
}
.submenu li a.active {
background: #b63b4d;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion" class="accordion">
<li>
<div class="link">Menu 2</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
<li>
<div class="link">Menu 3</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
</ul>

Create an .active class for the <a> tag inside <li> which matches the CSS of the :hover state of <a>, like this:
a.active {
background: #b63b4d;
color: #FFF;
}
And then just use the click event listener to add and remove this class when clicked on the submenu:
$(document).ready(function() {
$("#accordion > li > div").click(function() {
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
$(".submenu a").click(function() {
$(this).toggleClass("active").parent().siblings().find("a").removeClass("active");
});
});
I also modified to jQuery so that the accordion closes when it is clicked on in the open state.
Here's the working jsfiddle: https://jsfiddle.net/ucgff65k/2/
And the code snippet:
$(document).ready(function() {
$("#accordion > li > div").click(function() {
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
} else {
$(this).next().slideUp();
}
});
$(".submenu a").click(function() {
$(this).toggleClass("active").parent().siblings().find("a").removeClass("active");
});
});
.accordion {
width: 100%;
max-width: 260px;
background: #FFF;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
font-size: 14px;
font-weight: 700;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/*-------------Submenu-----------------------------*/
.submenu {
padding: 0px;
display: none;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #4b4a5e;
}
.submenu a {
display: block;
text-decoration: none;
color: #23222d;
background-color: #CCC;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submenu a:hover {
background: #b63b4d;
color: #FFF;
}
a.active {
background: #b63b4d;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion" class="accordion">
<li>
<div class="link">Menu 2</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
<li>
<div class="link">Menu 3</div>
<ul class="submenu">
<li>submenu1</li>
<li>submenu1</li>
<li>submenu1</li>
</ul>
</li>
</ul>

How to show the titles properly in an expandable menu?

I'm trying to do a expandable menu in jQuery and CSS3, here is the fiddle:
http://jsfiddle.net/mNcuQ/3/
When you click the slidebar, the titles section is showed. But I'm afraid it doesn't look properly. What I'm trying to do is when the .expanded class is active and the width of the slidebar is modified ( with the transition finished ) then show the titles of the menu with fade in effect. As I do now, the titles of the menu are not respeting the display: inline-block. Surely I'm missing something...
Do you have any idea or tip to do it? What is better to use in this case: CSS3 transition or jQuery animation?
Here is the code of the fiddle:
HTML
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<nav id="nav" class="navigation" role="navigation">
<ul class="unstyled">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span>
</li>
<li data-section="2" class=""><i class="icon-rocket"></i> <span>Services</span>
</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span>
</li>
<li data-section="6" class=""><i class="icon-money"></i> <span>Price</span>
</li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Team</span>
</li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span>
</li>
</ul>
</nav>
</div>
JS
$(document).ready(function ($) {
$('#sidebar').click(function () {
$('html').toggleClass('expanded');
});
});
CSS
#sidebar {
background-color: #151515;
height: 120%;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 50px;
z-index: 2;
cursor:pointer;
overflow-y: hidden;
}
#nav {
margin-top: 80px;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav ul li i {
font-size : 15px;
}
#nav ul li {
color: #F1F1F1;
cursor: pointer;
display: inline-block;
line-height: 22px;
filter: alpha(opacity=40);
font-size: 16px;
font-size: 1.6rem;
font-style: normal;
font-weight: 100;
opacity: .4;
padding: 8px 0 8px 15px;
text-transform: uppercase;
width: 70%;
}
#sidebar {
-webkit-transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
transition: width 500ms ease;
}
#nav ul li.active {
filter: alpha(opacity=100);
opacity: 1;
}
#nav ul li.last {
padding-right: 0px;
}
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
}
.btn-navbar {
cursor: pointer;
filter: alpha(opacity=40);
float: left;
margin: 20px 5px 10px;
opacity: .4;
padding: 7px 10px;
}
.btn-navbar .icon-bar {
background-color: #F5F5F5;
border-radius: 1px 1px 1px 1px;
box-shadow: none;
display: block;
height: 2px;
width: 18px;
}
/* Expanded Nav Styling */
.expanded #container {
left: 100px;
transform: translate3d(50px, 0px, 0px) scale3d(1, 1, 1);
}
.expanded #sidebar {
width: 150px;
}
.expanded #nav li {
width: 90%;
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
}
If you need more info, let me know and I'll edit the post.

use transition-delay maybe?
Fiddle (moved revelant css classes to bottom)
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
transition:opacity 0.5s ease; // ease opacity
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
transition-delay: 500ms; //delay transition by the same amount of sidebar width transition time
}

the problem is that you expanded container is too small to position the headlines correct, make it a bit larger and it will work
.expanded #sidebar {
width: 180px;
}

Categories