Jquery drop down hover menu only applied to first <li>

Jquery drop down hover menu only applied to first <li> - javascript

I have been playing around with trying to get the drop down hover menu to slide down the screen. For some reason, it only works with the first menu item and the others then just appear.
What is it that I am doing wrong?
$('.nav-main li ul').hide().removeClass('.drop-down');
$('.nav-main li').hover(function() {
$('ul', this).stop().slideDown(1000);
}, function() {
$('ul', this).stop().slideUp(1000);
});
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 90%;
height: inherit;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
height: inherit;
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top:last-child:after {
content: none;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
/*display: none;*/
position: absolute;
left: -8.75px;
width: 105%;
top: calc(100% - 1px);
}
.nav-top:hover ul {
/*display: inline;*/
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
/*-moz-transition: all 1.2s ease-in-out;
-webkit-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out; */
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 16px;
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top:after {
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome</li>
<li class="nav-top">About
<ul class="drop-down">
<li>Services</li>
<li>Clients</li>
<li>Press</li>
<li>Leadership</li>
<li>Twitter</li>
</ul>
</li>
<li class="nav-top">Contact</li>
</ul>
<span class="nav-arrow"></span>
</nav>
JSfiddle

Remove the height:inherit; from .nav-main ul and it will solve the problem. The problem exists because the dropdown .drop-down inherits the height of the parent li, causing the slide animation to animate just the height of the parent li. I hope it makes sense.
Updated FIDDLE.
$('.nav-main li ul').hide().removeClass('.drop-down');
$('.nav-main li').hover(
function() {
$('ul', this).slideDown(1000);
},
function() {
$('ul', this).slideUp(1000);
}
);
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 90%;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
height: inherit;
/*background: transparent url(../images/nav-divide.png) no-repeat right center;*/
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top:last-child:after {
content: none;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
display: none;
position: absolute;
}
.nav-top:hover ul {
display: inline;
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
/*-moz-transition: all 1.2s ease-in-out;
-webkit-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out; */
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 16px;
/*
background: transparent url(../images/nav-divide.png) no-repeat right center;
background: transparent url(../images/nav-divide.png) no-repeat left center;*/
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top:after {
content: url(../images/nav-divide.png);
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome
</li>
<li class="nav-top">About
<ul class="drop-down">
<li>Services
</li>
<li>Clients
</li>
<li>Press
</li>
<li>Leadership
</li>
<li>Twitter
</li>
</ul>
</li>
<li class="nav-top">Contact
</li>
</ul>
<span class="nav-arrow"></span>
</nav>

Related

Why does my submenu overlap another child element?

Good day to all! I am facing an overlap issue when opening a submenu. If you open the first section and open the second submenu tab, the content that comes from 1 tab does not close and overlaps with second tab. How to make it so that when you click on the second title, the first one is hidden? Thanks for helping!
Code:
var nav = document.querySelector('.nav-component');
var menuToggle = document.querySelector('.menu-toggle');
var menuItem = document.querySelector('.menu-item');
var itemOpened = document.querySelector('.item-opened');
menuToggle.addEventListener("click", function() {
nav.classList.toggle('open');
document.querySelectorAll('.menu-item.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
document.querySelectorAll('.chevron').forEach(item => {
item.addEventListener('click', event => {
document.querySelectorAll('.menu-item.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
})
}, false);
#charset "UTF-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica", sans-serif;
font-weight: 100;
}
a {text-decoration: none;color: #fff;}
p {
font-size: 20px;
line-height: 28px;
margin: 0 0 18px;
}
p span {
position: relative;
display: block;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
margin-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}
p span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
margin: auto;
background-color: #000000;
width: 24px;
height: 24px;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3px;
}
p span:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
bottom: 0;
left: -6px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent white transparent;
}
h1 {
font-size: 40px;
font-weight: normal;
line-height: 44px;
text-align: center;
margin-bottom: 18px;
}
h3 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
padding: 6px 20px;
font-size:18px;
}
button {
opacity: 1;
background-color: transparent;
position: relative;
z-index: 2;
top: 24px;
right: 20px;
border: none;
width: 150px;
height: 32px;
outline: none;
cursor: pointer;
position:absolute;
top: 10px;
left:50%;
right: 0;
background: blue;
zoom: 1.2;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
right: auto;
width: 100%;
background: url(burger.svg) no-repeat;background-size: contain;
}
button:after {
opacity: 1;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
line-height: 0;
background: url(close.svg) no-repeat;background-size: contain;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
button:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:hover {
opacity: 1;
}
.open button {
opacity: 1;
}
.open button:before {
opacity: 0;
width: 0;
}
.open button:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg);
-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}
nav {
z-index: 1;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
nav:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #776968;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.open nav {
top: 0;
}
.open nav:before {
}
ul.menu {
color: white;
}
ul.menu > li {
opacity: 0;
text-align: right;
}
.open ul.menu li {
opacity: 1;
position: relative;
padding-left: 32px;
}
.chevron {cursor: pointer;display: inline-block;position: absolute;left: 0;width: 32px;text-align: center;}
.chevron:before {
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #fff;
content: '';
display: inline-block;
height: 16px;
position: relative;
top: 0.30em;
left:-50px;
transform: rotate(-135deg);
vertical-align: top;
width: 16px;
opacity: 1;
}
.submenu{
display:none;
opacity:0;
position: fixed;
left:0;
top: 0;
right: 40%;
bottom:0;
z-index: 10;
font-weight: 100;
}
.submenu .submenu {
right: 60vw;
}
.submenu .chevron:before {height: 10px;width: 10px;}
.item-opened ~ .submenu{
opacity:1;
display:inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
z-index: 0;
}
.submenu li{
text-align: right;
font-size: 16px;
padding:0;
}
.submenu .submenu li{
text-align: right;
font-size: 18px;
padding:0;
}
article {
padding: 24px;
max-width: 600px;
margin: 60px auto;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.open article {
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
transition: -webkit-transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
}
/* Da bootstrap */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h-100 {
height: 100%!important;
}
.position-relative {
position: relative!important;
}
.align-items-center {
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
}
.justify-content-end {
-webkit-box-pack: end!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
<div class="nav-component">
<div class="container position-relative d-flex align-items-center justify-content-end">
<button class="menu-toggle">OPEN MENU</button>
</div>
<nav>
<div class="container position-relative d-flex align-items-center justify-content-end h-100">
<ul class="menu">
<li class="menu-item">
Lorem ipsum title 1
<span class="chevron"></span>
<ul class="submenu">
<li>
Lorem ipsum dolor
<span class="chevron"></span>
<ul class="submenu">
<li>Sub sub menu</li>
<li>Sub sub menu</li>
</ul>
</li>
<li>FIRST SUBMENU</li>
<li>FIRST SUBMENU</li>
<li>FIRST SUBMENU</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 2
<span class="chevron"></span>
<ul class="submenu">
<li> SECOND SUBMENU</li>
<li> SECOND SUBMENU</li>
<li> SECOND SUBMENU</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 3
<span class="chevron"></span>
<ul class="submenu">
<li> THIRD SUBMENU</li>
<li> THIRD SUBMENU</li>
<li> THIRD SUBMENU</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

Your first issue is to add an event handler for each click on menuToggle:
menuToggle.addEventListener("click", function () {
..........
item.addEventListener('click', function (event) {
Second, if you need to manage the third level it is reqiured to add a new event handler for the third level:
document.querySelectorAll('.submenu .chevron').forEach(function (item) {
item.addEventListener('click', function (event) {
document.querySelectorAll('.submenu .item-opened').forEach(function (openitem) {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
}, false);
The snippet:
var nav = document.querySelector('.nav-component');
var menuToggle = document.querySelector('.menu-toggle');
var menuItem = document.querySelector('.menu-item');
var itemOpened = document.querySelector('.item-opened');
menuToggle.addEventListener("click", function () {
nav.classList.toggle('open');
document.querySelectorAll('.menu-item.item-opened').forEach(function (openitem) {
openitem.classList.remove('item-opened');
});
});
document.querySelectorAll('.menu-item > .chevron').forEach(function (item) {
item.addEventListener('click', function (event) {
document.querySelectorAll('.menu-item .item-opened').forEach(function (openitem) {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
}, false);
document.querySelectorAll('.submenu .chevron').forEach(function (item) {
item.addEventListener('click', function (event) {
document.querySelectorAll('.submenu .item-opened').forEach(function (openitem) {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
}, false);
#charset "UTF-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica", sans-serif;
font-weight: 100;
}
a {
text-decoration: none;
color: #fff;
}
p {
font-size: 20px;
line-height: 28px;
margin: 0 0 18px;
}
p span {
position: relative;
display: block;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
margin-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}
p span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
margin: auto;
background-color: #000000;
width: 24px;
height: 24px;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3px;
}
p span:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
bottom: 0;
left: -6px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent white transparent;
}
h1 {
font-size: 40px;
font-weight: normal;
line-height: 44px;
text-align: center;
margin-bottom: 18px;
}
h3 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
padding: 6px 20px;
font-size: 18px;
}
button {
opacity: 1;
background-color: transparent;
position: relative;
z-index: 2;
top: 24px;
right: 20px;
border: none;
width: 150px;
height: 32px;
outline: none;
cursor: pointer;
position: absolute;
top: 10px;
left: 50%;
right: 0;
background: blue;
zoom: 1.2;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
right: auto;
width: 100%;
background: url(burger.svg) no-repeat;
background-size: contain;
}
button:after {
opacity: 1;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
line-height: 0;
background: url(close.svg) no-repeat;
background-size: contain;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
button:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:hover {
opacity: 1;
}
.open button {
opacity: 1;
}
.open button:before {
opacity: 0;
width: 0;
}
.open button:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg);
-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}
nav {
z-index: 1;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
nav:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #776968;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.open nav {
top: 0;
}
.open nav:before {
}
ul.menu {
color: white;
}
ul.menu > li {
opacity: 0;
text-align: right;
}
.open ul.menu li {
opacity: 1;
position: relative;
padding-left: 32px;
}
.chevron {
cursor: pointer;
display: inline-block;
position: absolute;
left: 0;
width: 32px;
text-align: center;
}
.chevron:before {
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #fff;
content: '';
display: inline-block;
height: 16px;
position: relative;
top: 0.30em;
left: -50px;
transform: rotate(-135deg);
vertical-align: top;
width: 16px;
opacity: 1;
}
.submenu {
display: none;
opacity: 0;
position: fixed;
left: 0;
top: 0;
right: 40%;
bottom: 0;
z-index: 10;
font-weight: 100;
}
.submenu .submenu {
right: 60vw;
}
.submenu .chevron:before {
height: 10px;
width: 10px;
}
.item-opened ~ .submenu {
opacity: 1;
display: inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
z-index: 0;
}
.submenu li {
text-align: right;
font-size: 16px;
padding: 0;
}
.submenu .submenu li {
text-align: right;
font-size: 18px;
padding: 0;
}
article {
padding: 24px;
max-width: 600px;
margin: 60px auto;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.open article {
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
transition: -webkit-transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
}
/* Da bootstrap */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h-100 {
height: 100% !important;
}
.position-relative {
position: relative !important;
}
.align-items-center {
-webkit-box-align: center !important;
-ms-flex-align: center !important;
align-items: center !important;
}
.justify-content-end {
-webkit-box-pack: end !important;
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.d-flex {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
<div class="nav-component">
<div class="container position-relative d-flex align-items-center justify-content-end">
<button class="menu-toggle">OPEN MENU</button>
</div>
<nav>
<div class="container position-relative d-flex align-items-center justify-content-end h-100">
<ul class="menu">
<li class="menu-item">
Lorem ipsum title 1
<span class="chevron"></span>
<ul class="submenu">
<li>
Lorem ipsum dolor
<span class="chevron"></span>
<ul class="submenu">
<li>Sub sub menu</li>
<li>Sub sub menu</li>
</ul>
</li>
<li>FIRST MENU</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 2
<span class="chevron"></span>
<ul class="submenu">
<li>2222 Lorem ipsum dolor</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 3
<span class="chevron"></span>
<ul class="submenu">
<li>333333 Lorem ipsum dolor</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

You missed a space in this selector document.querySelectorAll('.menu-item.item-opened') because .item-opened is a child of .menu-item so they need a space between them. When the classes are next to each other, it means that the same component has the two classes at the same time.
Check out the snipped code
var nav = document.querySelector('.nav-component');
var menuToggle = document.querySelector('.menu-toggle');
var menuItem = document.querySelector('.menu-item');
var itemOpened = document.querySelector('.item-opened');
menuToggle.addEventListener("click", function() {
nav.classList.toggle('open');
document.querySelectorAll('.menu-item.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
document.querySelectorAll('.chevron').forEach(item => {
item.addEventListener('click', event => {
document.querySelectorAll('.menu-item .item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
})
}, false);
#charset "UTF-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica", sans-serif;
font-weight: 100;
}
a {text-decoration: none;color: #fff;}
p {
font-size: 20px;
line-height: 28px;
margin: 0 0 18px;
}
p span {
position: relative;
display: block;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
margin-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}
p span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
margin: auto;
background-color: #000000;
width: 24px;
height: 24px;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3px;
}
p span:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
bottom: 0;
left: -6px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent white transparent;
}
h1 {
font-size: 40px;
font-weight: normal;
line-height: 44px;
text-align: center;
margin-bottom: 18px;
}
h3 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
padding: 6px 20px;
font-size:18px;
}
button {
opacity: 1;
background-color: transparent;
position: relative;
z-index: 2;
top: 24px;
right: 20px;
border: none;
width: 150px;
height: 32px;
outline: none;
cursor: pointer;
position:absolute;
top: 10px;
left:50%;
right: 0;
background: blue;
zoom: 1.2;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
right: auto;
width: 100%;
background: url(burger.svg) no-repeat;background-size: contain;
}
button:after {
opacity: 1;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
line-height: 0;
background: url(close.svg) no-repeat;background-size: contain;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
button:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:hover {
opacity: 1;
}
.open button {
opacity: 1;
}
.open button:before {
opacity: 0;
width: 0;
}
.open button:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg);
-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}
nav {
z-index: 1;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
nav:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #776968;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.open nav {
top: 0;
}
.open nav:before {
}
ul.menu {
color: white;
}
ul.menu > li {
opacity: 0;
text-align: right;
}
.open ul.menu li {
opacity: 1;
position: relative;
padding-left: 32px;
}
.chevron {cursor: pointer;display: inline-block;position: absolute;left: 0;width: 32px;text-align: center;}
.chevron:before {
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #fff;
content: '';
display: inline-block;
height: 16px;
position: relative;
top: 0.30em;
left:-50px;
transform: rotate(-135deg);
vertical-align: top;
width: 16px;
opacity: 1;
}
.submenu{
display:none;
opacity:0;
position: fixed;
left:0;
top: 0;
right: 40%;
bottom:0;
z-index: 10;
font-weight: 100;
}
.submenu .submenu {
right: 60vw;
}
.submenu .chevron:before {height: 10px;width: 10px;}
.item-opened ~ .submenu{
opacity:1;
display:inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
z-index: 0;
}
.submenu li{
text-align: right;
font-size: 16px;
padding:0;
}
.submenu .submenu li{
text-align: right;
font-size: 18px;
padding:0;
}
article {
padding: 24px;
max-width: 600px;
margin: 60px auto;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.open article {
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
transition: -webkit-transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
}
/* Da bootstrap */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h-100 {
height: 100%!important;
}
.position-relative {
position: relative!important;
}
.align-items-center {
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
}
.justify-content-end {
-webkit-box-pack: end!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
<div class="nav-component">
<div class="container position-relative d-flex align-items-center justify-content-end">
<button class="menu-toggle">OPEN MENU</button>
</div>
<nav>
<div class="container position-relative d-flex align-items-center justify-content-end h-100">
<ul class="menu">
<li class="menu-item">
Lorem ipsum title 1
<span class="chevron"></span>
<ul class="submenu">
<li>
Lorem ipsum dolor
<span class="chevron"></span>
<ul class="submenu">
<li>Sub sub menu</li>
<li>Sub sub menu</li>
</ul>
</li>
<li>FIRST MENU</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 2
<span class="chevron"></span>
<ul class="submenu">
<li>2222 Lorem ipsum dolor</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 3
<span class="chevron"></span>
<ul class="submenu">
<li>333333 Lorem ipsum dolor</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

I see that question already has answer, just guess my version also could be useful for someone
Open/close function below gives opportunity to work with different numbers of submenu's levels and don't write new listener for each new level:
document.querySelectorAll('.chevron').forEach(item => {
item.addEventListener('click', event => {
item.closest('ul').querySelectorAll('.chevron.item-opened').forEach(openItem => {
if (item == openItem) return false; // skip current item to toggle it after
openItem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
})
item.closest('ul') allow work with only current and lower levels of menu, e.g., if you click on second level menu it will close second and third levels but keep first level opened.
I changed your code a bit to show how it works with more levels of submenus:
var nav = document.querySelector('.nav-component');
var menuToggle = document.querySelector('.menu-toggle');
menuToggle.addEventListener("click", function() {
nav.classList.toggle('open');
document.querySelectorAll('.chevron.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
}, false);
document.querySelectorAll('.chevron').forEach(item => {
item.addEventListener('click', event => {
item.closest('ul').querySelectorAll('.chevron.item-opened').forEach(openitem => {
if (item == openitem) return false;
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
})
#charset "UTF-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica", sans-serif;
font-weight: 100;
}
a {text-decoration: none;color: #fff;}
p {
font-size: 20px;
line-height: 28px;
margin: 0 0 18px;
}
p span {
position: relative;
display: block;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
margin-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}
p span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
margin: auto;
background-color: #000000;
width: 24px;
height: 24px;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3px;
}
p span:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
bottom: 0;
left: -6px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent white transparent;
}
h1 {
font-size: 40px;
font-weight: normal;
line-height: 44px;
text-align: center;
margin-bottom: 18px;
}
h3 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
padding: 6px 20px;
font-size:18px;
line-height: 1.5;
}
button {
opacity: 1;
background-color: transparent;
position: relative;
z-index: 2;
top: 24px;
right: 20px;
border: none;
width: 150px;
height: 32px;
outline: none;
cursor: pointer;
position:absolute;
top: 10px;
left:50%;
right: 0;
background: blue;
zoom: 1.2;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
right: auto;
width: 100%;
background: url(burger.svg) no-repeat;background-size: contain;
}
button:after {
opacity: 1;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
line-height: 0;
background: url(close.svg) no-repeat;background-size: contain;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
button:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:hover {
opacity: 1;
}
.open button {
opacity: 1;
}
.open button:before {
opacity: 0;
width: 0;
}
.open button:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg);
-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}
nav {
z-index: 1;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
nav:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #776968;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.open nav {
top: 0;
}
.open nav:before {
}
ul.menu {
color: white;
}
ul.menu > li {
opacity: 0;
text-align: right;
display: flex;
flex-direction: row-reverse;
}
.open ul.menu li {
opacity: 1;
position: relative;
padding-left: 32px;
}
.chevron {
cursor: pointer;
display: inline-block;
position: relative;
width: 32px;
text-align: center;
}
.chevron:before {
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #fff;
content: '';
display: inline-block;
height: 16px;
position: relative;
top: 0.30em;
transform: rotate(-135deg);
vertical-align: top;
width: 16px;
opacity: 1;
}
.submenu{
display:none;
opacity:0;
z-index: 10;
font-weight: 100;
}
.submenu .submenu {
right: 60vw;
}
.submenu .chevron:before {height: 10px;width: 10px;}
.item-opened ~ .submenu{
opacity:1;
z-index: 0;
margin-right: 60px;
display: block;
}
.submenu li{
text-align: right;
font-size: 16px;
padding:0;
display: flex;
flex-direction: row-reverse;
}
.submenu .submenu li{
text-align: right;
font-size: 18px;
padding:0;
}
article {
padding: 24px;
max-width: 600px;
margin: 60px auto;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.open article {
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
transition: -webkit-transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
}
/* Da bootstrap */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h-100 {
height: 100%!important;
}
.position-relative {
position: relative!important;
}
.align-items-center {
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
}
.justify-content-end {
-webkit-box-pack: end!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
<div class="nav-component">
<div class="container position-relative d-flex align-items-center justify-content-end">
<button class="menu-toggle">OPEN MENU</button>
</div>
<nav>
<div class="container position-relative d-flex align-items-center justify-content-end h-100">
<ul class="menu">
<li class="menu-item">
Title 1
<span class="chevron"></span>
<ul class="submenu">
<li>
Title 1-1
<span class="chevron"></span>
<ul class="submenu">
<li>Title 1-1-1</li>
<li>Title 1-1-2</li>
</ul>
</li>
<li>
Title 1-2
<span class="chevron"></span>
<ul class="submenu">
<li>Title 1-2-1</li>
<li>
Title 1-2-2
<span class="chevron"></span>
<ul class="submenu">
<li>Title 1-2-2-1</li>
<li>Title 1-2-2-2</li>
</ul>
</li>
<li>
Title 1-2-3
<span class="chevron"></span>
<ul class="submenu">
<li>Title 1-2-3-1</li>
<li>
Title 1-2-3-2
<span class="chevron"></span>
<ul class="submenu">
<li>Title 1-2-3-2-1</li>
<li>Title 1-2-3-2-2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Title 1-3</li>
</ul>
</li>
<li class="menu-item">
Title 2
<span class="chevron"></span>
<ul class="submenu">
<li>Title 2-1</li>
</ul>
</li>
<li class="menu-item">
Title 3
<span class="chevron"></span>
<ul class="submenu">
<li>Title 3-1</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

You are showing the element with classname of chevron, but then hiding elements with classname of menu-item. The right fix here would be just using the same classname.
Full Working Demo at JSBin
var nav = document.querySelector('.nav-component');
var menuToggle = document.querySelector('.menu-toggle');
var menuItem = document.querySelector('.menu-item');
var itemOpened = document.querySelector('.item-opened');
menuToggle.addEventListener("click", function() {
nav.classList.toggle('open');
document.querySelectorAll('.menu-item.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
document.querySelectorAll('.chevron').forEach(item => {
item.addEventListener('click', event => {
document.querySelectorAll('.chevron.item-opened').forEach(openitem => {
openitem.classList.remove('item-opened');
});
item.classList.toggle('item-opened');
})
})
}, false);
#charset "UTF-8";
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background-color: #fff;
font-family: "Helvetica", sans-serif;
font-weight: 100;
}
a {text-decoration: none;color: #fff;}
p {
font-size: 20px;
line-height: 28px;
margin: 0 0 18px;
}
p span {
position: relative;
display: block;
font-size: 16px;
line-height: 20px;
padding: 12px 20px;
margin-bottom: 24px;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
}
p span:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -12px;
margin: auto;
background-color: #000000;
width: 24px;
height: 24px;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3px;
}
p span:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
bottom: 0;
left: -6px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 8px 6px;
border-color: transparent transparent white transparent;
}
h1 {
font-size: 40px;
font-weight: normal;
line-height: 44px;
text-align: center;
margin-bottom: 18px;
}
h3 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
padding: 6px 20px;
font-size:18px;
}
button {
opacity: 1;
background-color: transparent;
position: relative;
z-index: 2;
top: 24px;
right: 20px;
border: none;
width: 150px;
height: 32px;
outline: none;
cursor: pointer;
position:absolute;
top: 10px;
left:50%;
right: 0;
background: blue;
zoom: 1.2;
}
button:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
right: auto;
width: 100%;
background: url(burger.svg) no-repeat;background-size: contain;
}
button:after {
opacity: 1;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
line-height: 0;
background: url(close.svg) no-repeat;background-size: contain;
-webkit-transition: opacity 0.4s ease-out;
transition: opacity 0.4s ease-out;
}
button:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:hover {
opacity: 1;
}
.open button {
opacity: 1;
}
.open button:before {
opacity: 0;
width: 0;
}
.open button:after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate(360deg);
transform: translate3d(0, 0, 0) rotate(360deg);
-webkit-transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}
nav {
z-index: 1;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
nav:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #776968;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.open nav {
top: 0;
}
.open nav:before {
}
ul.menu {
color: white;
}
ul.menu > li {
opacity: 0;
text-align: right;
}
.open ul.menu li {
opacity: 1;
position: relative;
padding-left: 32px;
}
.chevron {cursor: pointer;display: inline-block;position: absolute;left: 0;width: 32px;text-align: center;}
.chevron:before {
border-style: solid;
border-width: 3px 3px 0 0;
border-color: #fff;
content: '';
display: inline-block;
height: 16px;
position: relative;
top: 0.30em;
left:-50px;
transform: rotate(-135deg);
vertical-align: top;
width: 16px;
opacity: 1;
}
.submenu{
display:none;
opacity:0;
position: fixed;
left:0;
top: 0;
right: 40%;
bottom:0;
z-index: 10;
font-weight: 100;
}
.submenu .submenu {
right: 60vw;
}
.submenu .chevron:before {height: 10px;width: 10px;}
.item-opened ~ .submenu{
opacity:1;
display:inline-flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
z-index: 0;
}
.submenu li{
text-align: right;
font-size: 16px;
padding:0;
}
.submenu .submenu li{
text-align: right;
font-size: 18px;
padding:0;
}
article {
padding: 24px;
max-width: 600px;
margin: 60px auto;
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
}
.open article {
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 0.2s 0.41s ease-out;
transition: -webkit-transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out;
transition: transform 0.2s 0.41s ease-out, -webkit-transform 0.2s 0.41s ease-out;
}
/* Da bootstrap */
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.h-100 {
height: 100%!important;
}
.position-relative {
position: relative!important;
}
.align-items-center {
-webkit-box-align: center!important;
-ms-flex-align: center!important;
align-items: center!important;
}
.justify-content-end {
-webkit-box-pack: end!important;
-ms-flex-pack: end!important;
justify-content: flex-end!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
<div class="nav-component">
<div class="container position-relative d-flex align-items-center justify-content-end">
<button class="menu-toggle">OPEN MENU</button>
</div>
<nav>
<div class="container position-relative d-flex align-items-center justify-content-end h-100">
<ul class="menu">
<li class="menu-item">
Lorem ipsum title 1
<span class="chevron"></span>
<ul class="submenu">
<li>
Lorem ipsum dolor
<span class="chevron"></span>
<ul class="submenu">
<li>Sub sub menu</li>
<li>Sub sub menu</li>
</ul>
</li>
<li>FIRST MENU</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 2
<span class="chevron"></span>
<ul class="submenu">
<li>2222 Lorem ipsum dolor</li>
</ul>
</li>
<li class="menu-item">
Lorem ipsum title 3
<span class="chevron"></span>
<ul class="submenu">
<li>333333 Lorem ipsum dolor</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>

Css3 animation glitch error Chrome and Firefox

I have this sidebar menu with css and bootstrap:
(please reduce size of the iframe to see the menu button)
http://jsfiddle.net/s8hts3v7/11/
If you toggle the sidebar menu you can detect some glitch and the sidebar is not smoothing in the animation.
This bad effect or glitch error it is even more detectable with Firefox.
The classes that I used for this menu are:
/*sidebar nav*/
.navbar-toggle {
background: #CFD8DC;
color: #666;
}
.navbar-toggle .icon-bar {
background: #666;
width: 17px;
height: 3px;
}
#sidebar-wrapper {
background: rgba(0,0,0,.5);
bottom: 0;
z-index: 500;
-webkit-transition-property: background,top,right,bottom,left;
transition-property: background,top,right,bottom,left;
-webkit-transition-duration: .5s,0,0,0,0;
transition-duration: .5s,0,0,0,0;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
#sidebar-wrapper.active {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#sidebar-menu {
margin-left: -250px;
left: 0;
width: 250px;
background: #f5f5f5;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.5s ease-in 0s;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-ms-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 50px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
background: white;
text-indent: initial;
padding-left: 12px;
}
.sidebar-brand img {
width: 134px;
}
.sidebar-brand #menu-close {
font-size: 26px;
font-weight: 200;
display: inline-block;
vertical-align: middle;
color: #9E9E9E;
cursor: pointer;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
display: inline-block;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#sidebar-wrapper.active #sidebar-menu {
left: 250px;
width: 250px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
How can i fix this?

Comment or remove background: rgba(0,0,0,.5); on #sidebar-wrapper (it is overlaying body when toggled):
Link to your JSFiddle
Firefox:
Chrome:
$(document).ready(function() {
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
});
html {
-webkit-font-smoothing: antialiased;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #737373;
font-size: 14px;
-webkit-font-smoothing: antialiased;
background: #E9E9E9 !important;
}
/*sidebar nav*/
.navbar-toggle {
background: #CFD8DC !important;
color: #666 !important;
}
.navbar-toggle .icon-bar {
background: #666 !important;
width: 17px !important;
height: 3px !important;
}
#sidebar-wrapper {
/* background: rgba(0,0,0,.5); */
bottom: 0;
z-index: 500;
-webkit-transition-property: background, top, right, bottom, left;
transition-property: background, top, right, bottom, left;
-webkit-transition-duration: .5s, 0, 0, 0, 0;
transition-duration: .5s, 0, 0, 0, 0;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
#sidebar-wrapper.active {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#sidebar-menu {
margin-left: -250px;
left: 0;
width: 250px;
background: #f5f5f5;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.5s ease-in 0s;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-ms-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 50px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
background: white;
text-indent: initial;
padding-left: 12px;
}
.sidebar-brand img {
width: 134px;
}
.sidebar-brand #menu-close {
font-size: 26px;
font-weight: 200;
display: inline-block;
vertical-align: middle;
color: #9E9E9E;
cursor: pointer;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
display: inline-block;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#sidebar-wrapper.active #sidebar-menu {
left: 250px;
width: 250px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="fotieditor">
<div class="container-fluid">
<button id="menu-toggle" type="button" class="navbar-toggle toggle pull-left" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="sidebar-wrapper">
<div id="sidebar-menu">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<i id="menu-close" class="fa fa-times-circle-o"></i>
<img src="https://rp-static.com/www_mantaspersonalizadas/svg/mantas-personalizadas.svg" alt="">
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</body>

How can this menu be fixed so it can be responsive?

I have this menu: (the snippet is quite long), please look at the snippet in fullscreen...
$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 90%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translateX(-100%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_wrapper">
<div id="header">
<div class="header_logo">
JD
</div>
<div class="header_menu">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger">
</div>
</div>
</div>
It looks nice, but the problem is the smaller screens, it covers the logo and burger, i had an idea for smaller screens to be like this:
but i don't know how to achieve this, maybe i have some mistakes in code, or my concept is wrong.... Please help.

$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('.header_menu').toggleClass('hidden');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 90%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translateX(-100%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
#media (max-width: 700px) {
.hidden {
display: none;
}
.header_menu {
min-height: 200px;
width: 100%;
top: 64px;
}
.burger {
background-color: #000;
}
#menu li {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_wrapper">
<div id="header">
<div class="header_logo">
JD
</div>
<div class="header_menu hidden">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger">
</div>
</div>
</div>

You can achieve this, using bootstrap library. Try like this , hope it will help.
$(document).ready(function() {
$('.burger').click(function() {
$(this).toggleClass('open');
$('.header_menu').toggleClass('is_open');
$('.header_menu_sm').toggleClass('is_open');
$('span').toggleClass('close');
$('#menu').toggleClass('menu_open');
});
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800,900,800italic,700);
#import url(https://fonts.googleapis.com/css?family=Lobster);
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
::selection {
background: transparent;
color: #999;
}
body {
margin: 0;
padding: 0;
}
::-scrollbar {
display: none;
}
* {
box-sizing: border-box;
}
#header_wrapper {
width: 100%;
position: fixed;
}
#header {
width: 80%;
margin: 1rem auto;
position: relative;
display: flex;
justify-content: space-between;
}
.header_logo {
margin: 0;
left: 0;
display: inline-block;
font-family: "Raleway";
font-weight: bold;
color: #ffffff;
background-color: #111;
padding: .2em;
font-size: 40px;
}
.header_logo::-moz-selection {
background: transparent;
}
.header_logo a {
text-decoration: none;
color: white;
}
.header_logo::-o-selection {
background: transparent;
}
.header_logo::-webkit-selection {
background: transparent;
}
.header_logo::selection {
background: transparent;
}
.burger {
border: 0;
position: absolute;
right: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 5px solid currentColor;
width: 40px;
top: 39%;
transform: translateX(-50%);
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 5px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: 0ms;
transition-delay: 1500ms;
}
.burger:after {
content: "";
display: block;
margin-bottom: 5px;
border-bottom: 5px solid currentColor;
width: 100%;
transition: 0ms;
transition-delay: 1500ms;
}
.burger.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.open:before {
border-bottom: 5px solid #fff;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.open:after {
border-bottom: 5px solid #fff;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.hidden-lg.open {
border-bottom: none;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger.hidden-lg.open:before {
border-bottom: 5px solid #000;
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger.hidden-lg.open:after {
border-bottom: 5px solid #000;
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
transform-origin: center;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.header_menu {
width: 100%;
position: absolute;
background: #000;
top: 0;
right: 0;
left: 100%;
height: 100%;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu.is_open {
transform: translate(-90%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
.header_menu_sm {
width: 90%;
position: absolute;
background: #000;
margin-top: 10%;
right: 0;
left: 100%;
height: auto;
pointer-events: none;
transition: transform 300ms ease-in-out;
transition-delay: 1200ms;
}
.header_menu_sm.is_open {
transform: translate(-100%,15%);
pointer-events: auto;
transition: transform 300ms ease-in-out;
transition-delay: 400ms;
}
span {
position: absolute;
top: 50%;
left: 2%;
display: block;
color: #fff;
font-family: "Raleway";
font-weight: bold;
transform: translateY(-50%);
transition: all 300ms ease-in;
transition-delay: 1400ms;
}
span.close {
opacity: 0;
transition: all 300ms ease-in;
}
#menu {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu li {
list-style: none;
display: inline-block;
margin-left: 1em;
z-index: 99999;
}
#menu_sm {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
top: 50%;
left: 100%;
transform: translateY(0%);
text-decoration: none;
transition: transform 1000ms ease-in-out;
transition-delay: 400ms;
}
#menu_sm.menu_open {
transform: translateX(-100%) translateY(-50%);
transition: transform 400ms ease-in-out;
transition-delay: 600ms;
background-color: transparent;
}
#menu_sm li {
list-style: none;
display: block;
margin-left: 1em;
z-index: 99999;
}
#menu li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
#menu_sm li a {
text-decoration: none;
color: white;
font-family: "Raleway";
text-transform: uppercase;
font-weight: bold;
z-index: 99999;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="script.js"></script>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div class="header_logo ">
JD
</div>
<div class="header_menu hidden-md hidden-xs hidden-sm">
<span>MENU</span>
<ul id="menu">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
<div class="burger hidden-md hidden-xs hidden-sm">
</div>
<div class="burger hidden-lg hidden-xl">
</div>
</div>
</div>
<div class="header_menu_sm hidden-lg hidden-xl">
<span>MENU</span>
<ul id="menu_sm">
<li>Home
</li>
<li>About me
</li>
<li>Work
</li>
<li>Tools
</li>
<li>Blog
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
</div>
</body>
</html>

How to move the sidebar to the right without changing the functionality

The code I am using is below.
All I need to do is move the sidebar to the right without changing the functionality. I managed to do this by setting the CSS margin-left but it affected the functionality of the sidebar.
#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;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-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: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.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:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
MyWeb
</a>
</li>
<li>
Dashboard
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
Sidebar
</div>
</div>
</div>
</div>

You have left:250px. Why not replace that with right:0?
http://www.bootply.com/MQS5QZjHi4

change your css to:
#wrapper {
padding-right: 0;
-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 {
padding-right: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 250px;
width: 0;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #000;
-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: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.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:768px) {
#wrapper {
padding-right: 250px;
}
#wrapper.toggled {
padding-right: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
good luck

Change position of sidebar fixed to absolute,
and then use margin-left
#sidebar-wrapper{
position: absolute;
margin-left: 900px;
}
Thanks

Try using float:right. But It will affect the height of #menu-toggle parent container. For this add a empty div with a style of clear:both like below.
<div class="col-lg-12">
Sidebar
<div style="clear:both"></div>
</div>

Creating a moving bar (inside the nav bar) which moves to the element the user hovers on?

I'm trying to create a nav bar which consists of the regular navigation elements and an indication bar which is located below the current page. My goal is to make this bar move under whichever element the user hovers on and automatically resize itself according to a pre-defined size (according to the word length maybe?). I built the nav bar itself, but I'm kind of clueless how to achieve this effect. Should I always calculate the current position of the mouse and add the difference between the current location and the hover location? Regarding to the resizability, this is a secondary goal, less significant.
This is what I've done so far:
Html:
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples</li>
<li>bananas</li>
<li>tomatos</li>
<li>onions</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
CSS:
#nav_ul a{
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul{
display: inline-block;
list-style-type: none;
}
#nav_ul li{
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover{
color: #4ad1fd;
}
#container{
position: relative;
left: 167px;
height: auto;
width: 530px;
top: 5px;
}
#bar{
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
JSfiddle
Something like in this image:

You're trying to create a lavalamp menu, checkout the example below...
/* ---- reset ------*/
html, body, div, a {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
/* --- basic styles ----*/
body {
font-family: "Unica One";
font-size: 1.5em;
background: #f2f2f2;
text-shadow: 0 1px 0 white; }
/* --- for this example ----*/
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; }
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; }
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; }
/* ----- line example -----*/
.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}
<div class="ph-line-nav nav">
Home
About
Gallery
Contact
<div class="effect"></div>
</div>
Find more here http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/

Here's a jQuery solution: (JSFiddle for if the code snippet doesn't work)
function BarMove(el) {
var bar = $('#bar');
var width = el.outerWidth();
var left = el.offset().left;
bar.animate({
width: width,
left: left
});
}
var Current = $('#nav_ul li a.current'); // Set the current page
BarMove(Current);
$('#nav_ul li a').hover(function () {
BarMove($(this));
}, function () {
BarMove(Current);
});
#nav_ul a {
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul {
display: inline-block;
list-style-type: none;
}
#nav_ul li {
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover {
color: #4ad1fd;
}
#container {
position: relative;
left: 0;
height: auto;
width: 530px;
top: 5px;
}
#bar {
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples
</li>
<li>bananas
</li>
<li>tomatos
</li>
<li>onions
</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
It's not exact, so you'll need to tweak the numbers but functionality is what you're after as far as I'm aware.

In your CSS, you have #nav_ul a:hover so you could add border-bottom-style: solid; border-color:<color> and you would have a bar appear under your items. It wouldn't slide, or be animated. It will, however, put a colored bar under what ever they are hovering over.

We Keep Coding

JavaScript is the programming language of the Web.

Jquery drop down hover menu only applied to first <li> - javascript

Related

Why does my submenu overlap another child element?

Css3 animation glitch error Chrome and Firefox

How can this menu be fixed so it can be responsive?

How to move the sidebar to the right without changing the functionality

Creating a moving bar (inside the nav bar) which moves to the element the user hovers on?

Categories

Resources