We Keep Coding

Close the overlay fullscreen menu when anchor link is clicked

I am not good in Javascript, and I know this is very easy for some of you.
I adopted the overlay fullscreen menu from Codepen. I am trying to figured it out how I can close the overlay fullscreen menu when I clicked the anchor link.
snippet here
#import "http://webfonts.ru/import/notcourier.css";
body {
background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower {
width: 340px;
margin: 10% auto;
padding: 50px;
background: white;
opacity: 0.8;
color: black;
box-shadow: inset 0 0 0 1px black;
border: 30px solid white;
}
.lower:hover {
background: black;
color: white;
box-shadow: inset 0 0 0 1px white;
border: 30px solid black;
}
input {
display: none;
}
.lower label {
font-family: 'NotCourierSans';
text-transform: uppercase;
font-size: 40px;
text-align: center;
}
.lower label:hover {
cursor: pointer;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
}
.overlay label {
width: 58px;
height: 58px;
position: absolute;
right: 20px;
top: 20px;
background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor: pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
</div>
can anyone help me to close the overlay fullscreen menu by adding javascript on the code?

$( ".target" ).click(function() {
$("#op").prop('checked', false);
});
body {
background: url('http://cs625217.vk.me/v625217712/1a11c/0QgZ5V0MWEo.jpg');
}
.lower {
width: 340px;
margin: 10% auto;
padding: 50px;
background: white;
opacity: 0.8;
color: black;
box-shadow: inset 0 0 0 1px black;
border: 30px solid white;
}
.lower:hover {
background: black;
color: white;
box-shadow: inset 0 0 0 1px white;
border: 30px solid black;
}
input {
display: none;
}
.lower label {
font-family: 'NotCourierSans';
text-transform: uppercase;
font-size: 40px;
text-align: center;
}
.lower label:hover {
cursor: pointer;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.9);
}
.overlay label {
width: 58px;
height: 58px;
position: absolute;
right: 20px;
top: 20px;
background: url('https://tympanus.net/Development/FullscreenOverlayStyles/img/cross.png');
z-index: 100;
cursor: pointer;
}
.overlay nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
font-size: 54px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: 54px;
}
.overlay ul li a {
font-weight: 300;
display: block;
color: white;
text-decoration: none;
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: 'NotCourierSans';
text-transform: uppercase;
}
.overlay ul li a:hover,
.overlay ul li a:focus {
color: #849368;
}
.lower~.overlay-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
#op:checked~.overlay-hugeinc {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.overlay-hugeinc nav {
-moz-perspective: 300px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
#op:checked~.overlay-hugeinc nav ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#op:not(:checked)~.overlay-hugeinc nav ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">click the text</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav>
<ul>
<li><a class="target" href="#">Home</a></li>
<li><a class="target" href="#">About</a></li>
<li><a class="target" href="#">Work</a></li>
<li><a class="target" href="#">Clients</a></li>
<li><a class="target" href="#">Contact</a></li>
</ul>
</nav>
</div>

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>

How can I make my navbar completely responsive?

I recently made an Apple navbar, but I have some trouble with getting it to be responsive. https://codepen.io/51LV3R/pen/OJRxNdj is link for the navbar. The searchbar which is supposed to be in the center transforms after I close it on a mobile device. Does anyone know how can I fix that? As you can see at the bottom of the HTML code, I tried using jQuery. Also, can I add HTML elements through DOM wherever I want? Because I want on click to searchbar to show the button 'cancel' much like the Apple one does. Thanks for help. https://www.apple.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cubing Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav">
<ul class="nav-list nav-list-mobile">
<li class="nav-item">
<div class="mobile-menu">
<span class="line line-top"></span>
<span class="line line-bottom"></span>
</div>
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<!-- nav list nav mobile -->
<ul class="nav-list nav-list-larger">
<li class="nav-item nav-item-hidden">
</li>
<li class="nav-item">
Mac
</li>
<li class=" nav-item">
iPad
</li>
<li class="nav-item">
iPhone
</li>
<li class="nav-item">
Watch
</li>
<li class="nav-item" >
TV
</li>
<li class="nav-item">
Music
</li>
<li class="nav-item">
Support
</li>
<li class="nav-item">
</li>
<li class="nav-item v2">
</li>
<li class="searchbox" id="searchbox">
<form>
<button class="confirm" disabled></button>
<input type="text" class="search" id="box" placeholder="Search here" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false">
<span class="close-btn" onclick="navbarRemove();">
<span class="close-btn-left"></span>
<span class="close-btn-right"></span>
</span>
</form>
</li>
</ul>
<!-- nav list nav mobile -->
</nav>
</div>
</header>
<script src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($('html').width() <= 767) {
$('#search').click(function(){
$('.nav-link').addClass('hide-item')
$('.searchbox').addClass('active')
$('.nav-link').removeClass('activev2')
})
$('.close-btn').click(function(){
$('.nav-link').removeClass('hide-item')
$('.searchbox').removeClass('active')
$('.nav-link').addClass('activev2')
})
}else{
}
})
</script>
</body>
</html>
*,
*::before,
*::after{
margin: 0;
padding: 0;
}
html{
font-size: 10px;
font-family: 'SF Pro Display', sans-serif;
}
a{
display: block;
text-decoration: none;
}
.container{
max-width: 98rem;
margin: 0 auto;
padding: 0 2.2rem;
}
header{
position: fixed;
top: 0;
z-index: 1400;
width: 100%;
height: 4.4rem;
background-color: rgba(0,0,0,.8);
backdrop-filter: blur(2rem);
}
.nav-list{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 -0.5rem;
}
.nav-list-mobile{
display: none;
}
.nav-link{
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link:hover{
opacity: .7;
transition: .3s!important;
}
.nav-link.hide-item{
transform: scale(0);
transition: .5s;
}
.nav-link.activev2{
transition: .5s;
transform: scale(1);
}
.nav-link.activev2:hover{
transition: .3s!important;
}
.n1.activev2{
transition-delay: 0.0005s!important;
}
.n2.activev2{
transition-delay: 0.0025s!important;
}
.n3.activev2{
transition-delay: 0.005s!important;
}
.n4.activev2{
transition-delay: 0.025!important;
}
.n5.activev2{
transition-delay: 0.05s!important;
}
.n6.activev2{
transition-delay: 0.1s!important;
}
.n7.activev2{
transition-delay: 0.15s!important;
}
.n8.activev2{
transition-delay: 0.2s!important;
}
.n9.activev2{
transition-delay: 0.25s!important;
}
.n10.activev2{
transition-delay: 0.3s!important;
}
.n10{
transition-delay: 0.0005s!important;
}
.n9{
transition-delay: 0.0025s!important;
}
.n8{
transition-delay: 0.005s!important;
}
.n7{
transition-delay: 0.025!important;
}
.n6{
transition-delay: 0.05s!important;
}
.n5{
transition-delay: 0.1s!important;
}
.n4{
transition-delay: 0.15s!important;
}
.n3{
transition-delay: 0.2s!important;
}
.n2{
transition-delay: 0.25s!important;
}
.n1{
transition-delay: 0.3s!important;
}
.nav-link-apple{
width: 1.6rem;
height: 3.5rem;
background: url("img/apple.svg") center no-repeat;
}
.nav-link-search{
width: 1.6rem;
height: 4.4rem;
background: url("img/search.svg") center no-repeat;
font-size: 1.4rem;
color: #e4e1e1;
padding: 0 1rem;
transition: opacity .5s;
}
.nav-link-search:hover{
opacity: .7;
}
.nav-link-bag{
width: 1.4rem;
height: 4.4rem;
background: url("img/bag.svg") center no-repeat;
}
.searchbox{
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
visibility: hidden;
transition: .6s;
}
.searchbox.active{
opacity: 1;
visibility: visible;
transition-delay: .6s;
transform: translate(-50%, -45%);
}
.searchbox input{
width: 100%;
height: 44px;
background: transparent;
outline: none;
border: none;
color: #fff;
font-size: 18px;
}
.searchbox input:focus{
outline: none;
border: none;
}
.close-btn{
opacity: .7;
transition: .5s;
}
.close-btn-left{
position: absolute;
margin-top: 2rem;
transform: rotate(45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn-right{
position: absolute;
margin-top: 2rem;
transform: rotate(-45deg);
width: 1.7rem;
height: 1px;
background-color: #979696;
cursor: pointer;
}
.close-btn:hover{
opacity: 1.6;
}
.confirm{
width: 18px;
height: 18px;
background: url("img/idkv2.svg") center no-repeat;
font-size: 1.4rem;
fill: #e4e1e1;
border: none;
outline: none;
transform: translate(-160%, 180%);
}
#media screen and (max-width: 767px){
header{
height: 4.8rem;
transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),
height .56s cubic-bezier(0.32, 0.08, 0.24, 1);
}
header .container{
padding: 0;
}
.nav-list{
margin-top: 0;
}
.nav-list-mobile{
display: flex;
}
.nav-item{
width: 4.8rem;
height: 4.8rem;
display: flex;
justify-content: center;
}
.nav-item-hidden{
display: none;
}
.mobile-menu{
position: relative;
z-index: 1500;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.v2{
display: none;
}
.line{
position: absolute;
width: 1.7rem;
height: 1px;
background-color: #fff;
transition: margin-top .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.line-top{
margin-top: 4px;
}
.line-bottom{
margin-top: -.8rem;
}
.active .line-top{
margin-top: 0;
transform: rotate(45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
.active .line-bottom{
margin-top: 0;
transform: rotate(-45deg);
transition: transform .3192s .1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
}
header.active{
height: 100%;
background-color: #000;
}
.nav-link-apple{
width: 1.8rem;
height: 4.8rem;
position: relative;
z-index: 1500;
}
.nav-link-bag{
width: 1.6rem;
height: 4.8rem;
transition: opacity 1.5s;
}
.nav{
position: relative;
}
.nav-link{
font-size: 1.7rem;
padding: 0;
margin: auto 0;
}
.nav-list-larger{
position: fixed;
top: 0;
left: 0;
width: 0;
height: 0;
display: block;
padding: 10.5rem 5rem;
z-index: 1000;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.active .nav-list-larger{
width: 100%;
height: 100vh;
opacity: 1;
visibility: visible;
}
.active .nav-link-bag{
opacity: 0;
transition: opacity .3s;
}
.nav-list-larger .nav-item{
width: 100%;
justify-content: flex-start;
border-bottom: 2px solid rgba(255,255,255,.1);
}
.nav-list-larger .nav-item:nth-child(9){
border-bottom: none;
}
.active .nav-list-larger .nav-item{
animation: fadeIn .5s ease-in-out;
}
.close-btn{
display: none;
}
.n9{
display: none;
}
.searchbox{
display: flex;
justify-content: center;
align-items: center;
margin-top: 8rem;
opacity: 1;
visibility: visible;
background: #1D1D1F;
height: 40px;
border-radius: 4px;
width: 400px;
transition: none;
}
.searchbox-active{
display: none;
opacity: 0;
visibility: none;
transform: translate(0)!important;
transition: none;
}
#keyframes fadeIn {
from{
opacity: 0;
}
to{
opacity: 1;
}
}
}
#keyframes appear {
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
const selectElement = (element) => document.querySelector(element);
selectElement('.mobile-menu').addEventListener('click', () => {
selectElement('header').classList.toggle('active');
});
function navbar(){
document.querySelector('html').style.transition = ".2s"
document.querySelector('html').style.background = "rgba(0,0,0,0.5)"
setTimeout(()=> {
document.querySelector('#box').focus()
}, 1000)
}
function navbarRemove(){
document.querySelector('html').style.transition = "0"
document.querySelector('html').style.background = "none"
document.getElementById("nav-link").style.transform = "scale(1)";
}

Like I said the problem was in transitions.
Remove the transition option of .6s from .searchbox in general css and add 1s transition in media queries where max-width: 767px. See the codepen: https://codepen.io/codeweapon/pen/oNzGLZB
.searchbox{
position: absolute;
top: 0;
left: 50%;
transform: translate(-47%, -45%);
width: 600px;
height: 44px;
opacity: 0;
visibility: hidden;
/* transition: .6s; */
}
#media screen and (max-width: 767px){
.searchbox{
display: flex;
justify-content: center;
align-items: center;
margin-top: 8rem;
opacity: 1;
visibility: visible;
background: #1D1D1F;
height: 40px;
border-radius: 4px;
width: 400px;
transition: 1s; /*add transition of 1s */
}
}

jQuery slider converted to vanilla JavaScript not working

I'm building a slider and I want to avoid jQuery.
So I'm trying to convert some jQuery code to vanilla JavaScript.
Here's the jQuery:
setInterval(function() {
var $curr = $('#slider1 input[type=radio]:checked');
var $next = $curr.next('input');
if(!$next.length) $next = $('#slider1 input[type=radio]').first();
$next.prop('checked', true);
}, 2000);
My code is below, but it's not working.
What's going wrong?
setInterval(() => {
let $curr = document.querySelectorAll('#slider1 input[type=radio]:checked'),
$next = $curr.nextSibling;
if (!$next.length) {
$next = document.querySelectorAll('#slider1 input[type=radio]').firstChild;
}
$next.setAttribute('checked', true);
}, 3000);
.csslider {
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: left;
position: relative;
margin-bottom: 22px;
}
.csslider>input {
display: none;
}
.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
margin-left: -900%;
}
.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
margin-left: -800%;
}
.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
margin-left: -700%;
}
.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
margin-left: -600%;
}
.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
margin-left: -500%;
}
.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
margin-left: -400%;
}
.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
margin-left: -300%;
}
.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
margin-left: -200%;
}
.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
margin-left: -100%;
}
.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
margin-left: 0%;
}
.csslider>ul {
position: relative;
width: 820px;
height: 420px;
z-index: 1;
font-size: 0;
line-height: 0;
background-color: #3A3A3A;
border: 10px solid #3A3A3A;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider>ul>li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
.csslider>ul>li.scrollable {
overflow-y: scroll;
}
.csslider>.navigation {
position: absolute;
bottom: -8px;
left: 50%;
z-index: 10;
margin-bottom: -10px;
font-size: 0;
line-height: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider>.navigation>div {
margin-left: -100%;
}
.csslider>.navigation label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 4px;
padding: 4px;
background: #3A3A3A;
}
.csslider>.navigation label:hover:after {
opacity: 1;
}
.csslider>.navigation label:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
background: #71ad37;
border-radius: 50%;
padding: 6px;
opacity: 0;
}
.csslider>.arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider.inside .navigation label {
border: 1px solid #7e7e7e;
}
.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after {
opacity: 1;
}
.csslider>.arrows {
position: absolute;
left: -31px;
top: 50%;
width: 100%;
height: 26px;
padding: 0 31px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider>.arrows label {
display: none;
position: absolute;
top: -50%;
padding: 13px;
box-shadow: inset 2px -2px 0 1px #3A3A3A;
cursor: pointer;
-moz-transition: box-shadow 0.15s, margin 0.15s;
-o-transition: box-shadow 0.15s, margin 0.15s;
-webkit-transition: box-shadow 0.15s, margin 0.15s;
transition: box-shadow 0.15s, margin 0.15s;
}
.csslider>.arrows label:hover {
box-shadow: inset 3px -3px 0 2px #71ad37;
margin: 0 0px;
}
.csslider>.arrows label:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/*#region MODULES */
/*#endregion */
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
}
ul,
ol {
padding-left: 40px;
}
html,
body {
height: 100%;
overflow-x: hidden;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
}
body {
padding-bottom: 60px;
}
h1 {
font-weight: 700;
font-size: 310%;
}
h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
}
#slider1 {
margin: 20px;
font-family: 'Lato';
}
#slider1>ul>li:nth-of-type(3) {
background: red;
}
#slider1>input:nth-of-type(3):checked~ul #bg {
width: 80%;
padding: 22px;
-moz-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
-webkit-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
#slider1>input:nth-of-type(3):checked~ul #bg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: 0.5s 0.9s;
-o-transition: 0.5s 0.9s;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
#slider1>input:nth-of-type(6):checked~ul #dex-sign {
-moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
animation: sign-anim 3.5s 0.5s steps(85) forwards;
}
#bg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
}
#bg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: green;
-webkit-filter: blur(7px);
}
#bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
#bg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
}
.scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}
#center {
text-align: center;
margin-top: 25%;
}
#center a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
}
/*___________________________________ LINK ___________________________________ */
a.nice-link {
position: relative;
color: #71ad37;
}
h1 a.nice-link:after {
border-bottom: 1px solid #a5ff0e;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 100%;
width: 0;
max-width: 100%;
background: #3A3A3A;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
/*___________________________________ SIGN ___________________________________ */
#dex-sign {
width: 255px;
height: 84px;
position: absolute;
left: 33%;
top: 45%;
opacity: 0.7;
background: white 0 0 no-repeat;
}
#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}
#-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
<div class="csslider infinity" id="slider1">
<input type="radio" name="slides" checked="checked" id="slides_1" />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" />
<input type="radio" name="slides" id="slides_4" />
<input type="radio" name="slides" id="slides_5" />
<input type="radio" name="slides" id="slides_6" />
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5</li>
<li>Slide 6</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
<label class="goto-first" for="slides_1"></label>
<label class="goto-last" for="slides_6"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
</div>
</div>
</div>
View on Codepen.
Edit
I came up with this solution:
setInterval(function() {
var currentID = document.querySelector('input[name="slides"]:checked').id;
var idNoArr = currentID.split('');
var intIdNo = parseInt(idNoArr[1]);
var nextIdNo = intIdNo + 1;
var NextId = idNoArr[0] + '' + nextIdNo;
var NextInput = document.getElementById(NextId);
if (!NextInput) {
NextId = idNoArr[0] + '_1';
}
document.getElementById(NextId).checked = true;
}, 1000);

There are several issues, including:
nextSibling isn't limited to inputs, and may even select white space between elements.
Elements don't have a length property.
Setting an attribute only sets the default state, not the current state.
I recommend selecting a list of all the inputs with querySelectorAll and then cycling through them using an index. To cycle the index within the appropriate bounds, I'm using the remainder of the current index divided by the total number of inputs.
Edit:
I see that your jQuery code determines which input is checked before changing the slide. This allows the automatic rotation to pick up where the user left off after they manually select a slide. I've modified my code accordingly.
You might also consider some functionality to stop or delay the automatic rotation if the user manually selects a slide. When someone clicks to a specific slide, I often choose to delay the automatic rotation for a few seconds or even have it stop completely. Just an idea.
Here's a working example:
// select node list of all inputs
var allInputs = document.querySelectorAll('#slider1 input[type=radio]');
// function to determine index of "checked" input in the list
function getCheckedIndex(list) {
for (let i = 0; i < list.length; i++) {
if (list[i].checked) {
return i;
}
}
}
// start the interval
setInterval(() => {
// determine index of "checked" input
let index = getCheckedIndex(allInputs);
// determine the next index
index = (index + 1) % allInputs.length;
// set the "checked" property
allInputs[index].checked = true;
}, 1000);
.csslider {
-moz-perspective: 1300px;
-ms-perspective: 1300px;
-webkit-perspective: 1300px;
perspective: 1300px;
display: inline-block;
text-align: left;
position: relative;
margin-bottom: 22px;
}
.csslider>input {
display: none;
}
.csslider>input:nth-of-type(10):checked~ul li:first-of-type {
margin-left: -900%;
}
.csslider>input:nth-of-type(9):checked~ul li:first-of-type {
margin-left: -800%;
}
.csslider>input:nth-of-type(8):checked~ul li:first-of-type {
margin-left: -700%;
}
.csslider>input:nth-of-type(7):checked~ul li:first-of-type {
margin-left: -600%;
}
.csslider>input:nth-of-type(6):checked~ul li:first-of-type {
margin-left: -500%;
}
.csslider>input:nth-of-type(5):checked~ul li:first-of-type {
margin-left: -400%;
}
.csslider>input:nth-of-type(4):checked~ul li:first-of-type {
margin-left: -300%;
}
.csslider>input:nth-of-type(3):checked~ul li:first-of-type {
margin-left: -200%;
}
.csslider>input:nth-of-type(2):checked~ul li:first-of-type {
margin-left: -100%;
}
.csslider>input:nth-of-type(1):checked~ul li:first-of-type {
margin-left: 0%;
}
.csslider>ul {
position: relative;
width: 820px;
height: 420px;
z-index: 1;
font-size: 0;
line-height: 0;
background-color: #3A3A3A;
border: 10px solid #3A3A3A;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider>ul>li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
.csslider>ul>li.scrollable {
overflow-y: scroll;
}
.csslider>.navigation {
position: absolute;
bottom: -8px;
left: 50%;
z-index: 10;
margin-bottom: -10px;
font-size: 0;
line-height: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider>.navigation>div {
margin-left: -100%;
}
.csslider>.navigation label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 4px;
padding: 4px;
background: #3A3A3A;
}
.csslider>.navigation label:hover:after {
opacity: 1;
}
.csslider>.navigation label:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
background: #71ad37;
border-radius: 50%;
padding: 6px;
opacity: 0;
}
.csslider>.arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider.inside .navigation label {
border: 1px solid #7e7e7e;
}
.csslider>input:nth-of-type(1):checked~.navigation label:nth-of-type(1):after,
.csslider>input:nth-of-type(2):checked~.navigation label:nth-of-type(2):after,
.csslider>input:nth-of-type(3):checked~.navigation label:nth-of-type(3):after,
.csslider>input:nth-of-type(4):checked~.navigation label:nth-of-type(4):after,
.csslider>input:nth-of-type(5):checked~.navigation label:nth-of-type(5):after,
.csslider>input:nth-of-type(6):checked~.navigation label:nth-of-type(6):after,
.csslider>input:nth-of-type(7):checked~.navigation label:nth-of-type(7):after,
.csslider>input:nth-of-type(8):checked~.navigation label:nth-of-type(8):after,
.csslider>input:nth-of-type(9):checked~.navigation label:nth-of-type(9):after,
.csslider>input:nth-of-type(10):checked~.navigation label:nth-of-type(10):after,
.csslider>input:nth-of-type(11):checked~.navigation label:nth-of-type(11):after {
opacity: 1;
}
.csslider>.arrows {
position: absolute;
left: -31px;
top: 50%;
width: 100%;
height: 26px;
padding: 0 31px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider>.arrows label {
display: none;
position: absolute;
top: -50%;
padding: 13px;
box-shadow: inset 2px -2px 0 1px #3A3A3A;
cursor: pointer;
-moz-transition: box-shadow 0.15s, margin 0.15s;
-o-transition: box-shadow 0.15s, margin 0.15s;
-webkit-transition: box-shadow 0.15s, margin 0.15s;
transition: box-shadow 0.15s, margin 0.15s;
}
.csslider>.arrows label:hover {
box-shadow: inset 3px -3px 0 2px #71ad37;
margin: 0 0px;
}
.csslider>.arrows label:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
.csslider.infinity>input:first-of-type:checked~.arrows label.goto-last,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(0),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(1),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(10) {
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity>input:last-of-type:checked~.arrows label.goto-first,
.csslider>input:nth-of-type(1):checked~.arrows>label:nth-of-type(2),
.csslider>input:nth-of-type(2):checked~.arrows>label:nth-of-type(3),
.csslider>input:nth-of-type(3):checked~.arrows>label:nth-of-type(4),
.csslider>input:nth-of-type(4):checked~.arrows>label:nth-of-type(5),
.csslider>input:nth-of-type(5):checked~.arrows>label:nth-of-type(6),
.csslider>input:nth-of-type(6):checked~.arrows>label:nth-of-type(7),
.csslider>input:nth-of-type(7):checked~.arrows>label:nth-of-type(8),
.csslider>input:nth-of-type(8):checked~.arrows>label:nth-of-type(9),
.csslider>input:nth-of-type(9):checked~.arrows>label:nth-of-type(10),
.csslider>input:nth-of-type(10):checked~.arrows>label:nth-of-type(11),
.csslider>input:nth-of-type(11):checked~.arrows>label:nth-of-type(12) {
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
}
ul,
ol {
padding-left: 40px;
}
html,
body {
height: 100%;
overflow-x: hidden;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
}
body {
padding-bottom: 60px;
}
h1 {
font-weight: 700;
font-size: 310%;
}
h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
}
#slider1 {
margin: 20px;
font-family: 'Lato';
}
#slider1>ul>li:nth-of-type(3) {
background: red;
}
#slider1>input:nth-of-type(3):checked~ul #bg {
width: 80%;
padding: 22px;
-moz-transition: 0.5s 0.5s;
-o-transition: 0.5s 0.5s;
-webkit-transition: 0.5s 0.5s;
transition: 0.5s 0.5s;
}
#slider1>input:nth-of-type(3):checked~ul #bg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: 0.5s 0.9s;
-o-transition: 0.5s 0.9s;
-webkit-transition: 0.5s 0.9s;
transition: 0.5s 0.9s;
}
#slider1>input:nth-of-type(6):checked~ul #dex-sign {
-moz-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-o-animation: sign-anim 3.5s 0.5s steps(85) forwards;
-webkit-animation: sign-anim 3.5s 0.5s steps(85) forwards;
animation: sign-anim 3.5s 0.5s steps(85) forwards;
}
#bg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
}
#bg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: green;
-webkit-filter: blur(7px);
}
#bg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
}
#bg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
}
.scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}
#center {
text-align: center;
margin-top: 25%;
}
#center a {
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
}
/*___________________________________ LINK ___________________________________ */
a.nice-link {
position: relative;
color: #71ad37;
}
h1 a.nice-link:after {
border-bottom: 1px solid #a5ff0e;
}
a.nice-link:after {
text-align: justify;
display: inline-block;
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #a5ff0e;
min-height: 100%;
width: 0;
max-width: 100%;
background: #3A3A3A;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
a.nice-link:hover {
color: #71ad37;
}
a.nice-link:hover:after {
width: 100%;
}
/*___________________________________ SIGN ___________________________________ */
#dex-sign {
width: 255px;
height: 84px;
position: absolute;
left: 33%;
top: 45%;
opacity: 0.7;
background: white 0 0 no-repeat;
}
#dex-sign:hover {
opacity: 1;
-webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}
#-webkit-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#-moz-keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
#keyframes sign-anim {
to {
background-position: 0 -7140px;
}
}
<div class="csslider infinity" id="slider1">
<input type="radio" name="slides" id="slides_1">
<input type="radio" name="slides" id="slides_2">
<input type="radio" name="slides" id="slides_3" checked>
<input type="radio" name="slides" id="slides_4">
<input type="radio" name="slides" id="slides_5">
<input type="radio" name="slides" id="slides_6">
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5</li>
<li>Slide 6</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
<label class="goto-first" for="slides_1"></label>
<label class="goto-last" for="slides_6"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
<label for="slides_5"></label>
<label for="slides_6"></label>
</div>
</div>
</div>

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

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>