We Keep Coding

How Do I Close The Hamburger Menu When Navigating Back And Forth Between Web Pages?

I've got some Javascript running on my website (the works really well) that enables my menu to close the hamburger menu after a link in it has been clicked.
var elements = document.getElementsByTagName('li');
var closeHamp = function() {
document.getElementsByClassName('cp_menuicon')[0].click();
};
　for (var i = 0; i < elements.length; i++) {
　　elements[i].addEventListener('click', closeHamp, false);
}
I'd like to set up the hamburger menu so that it will also close automatically when navigating back and forth (using the back and forward buttons). Would this involve using this if(performance.getEntriesByType("navigation")[0].type == "back_forward") script? Any knowledge that you could share with me on how to achieve this would be very much appreciated.
The code for my menu:
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>
The CSS:
.body {background-color: white;
font-family: sans-serif;
}
.searchbar {float: right;
}
.image {text-align: center;
}
.setsumei {margin-left: 20px;
margin-right: 20px;
}
.footer {width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {content: "";
display: block;
}
.site-footer,
.page-wrap:after {height: 20px;
}
.site-footer {text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {list-style: none;
}
a {text-decoration: none;
color: black;
}
.cp_cont {height: auto;
}
/* menu */
.cp_offcm03 {position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {height: 100%;
}
.cp_offcm03 li {display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {display: none;
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {display: none;
}
/* content */
.cp_container {position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {display: block;
margin-right: 0;
}
.cp_offcm03 a {padding: 20px;
}
/* menu toggle */
.cp_mobilebar {display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {display: block;
opacity: .6;
}
#h-menu_black {display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {overflow: hidden;
position: fixed;
}
}

Closing Mobile Menu When Link is Clicked

I would like to be able to set my mobile menu so that the menu closes when a link is clicked. If I were to go back to the same page after jumping to another page, I'd like the menu to be closed. Currently, the mobile menu seems to stay open when I go back to a page where I've opened it.
This would require javascript? If there's anyone who could help me achieve this I'd much appreciate it.
<!DOCTYPE html>
<html lang="en; ja;">
<body style="background-color: white; font-family: sans-serif;">
<title>小泉・ホームページ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</div>
</ul>
</nav>
</header>
<br><div class="image" style="margin: 10px;">
<img src="photos/Home_Page/Travel/Homepage_Travel_Japanese.jpg" alt="Travel" width="85%">
<div class=" responsive-image-container"><img src="photos/Home_Page/Yokai/Homepage_yokai_Japanese.jpg" alt="Yokai" width="42.4%"> <img src="photos/Home_Page/Kongoji/Kongoji_homepage_Japanese.jpg" alt="Kongoji" width="42.4%">
</div>
<div class=" responsive-image-container"><img src="photos/Home_Page/Tamagawa_Onsen/Homepage_Tamagawa_Onsen_Japanese.jpg" alt="Tamagawa_Onsen" width="42.4%"> <img src="photos/Home_Page/About_Koizumi/Homepage_Koizumi_Japanese.jpg" alt="Koizumi" width="42.4%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© | English</footer></div>
</div>
<style>
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 10px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media only screen and (max-width: 1050px) and (min-width: 480px) {
.responsive-image-container{
display: flex;
flex-direction: column;
text-align: center;
}
img{width:85%;}
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px) and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>

Instead of using the href attribute inside of html do it with js.
this can be a very useful link for you:
https://www.codegrepper.com/code-examples/html/how+to+open+a+new+html+page+on+button+click+in+javascript

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>

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>

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>