Responsive Navbar: Menu Not Disappearing (CSS and JS) - javascript

Building a responsive menu bar. The problem is when you click the hamburger lines and the page options appear, when you click the links, the menu doesn't disappear. I've tried adding and removing a class disappear{display:none}, and I've also tried building a for loop but neither works. I know I'm way overthinking this, what options should I explore to fix it?
(Note that you may have to shrink your screen down to less than 600px in width to see the hamburger menu if it isn't currently available to click)
lkl;
const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
document.getElementsByClassName('.links').forEach(item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>


the problem was using getElementsByClassName like this document.getElementsByClassName('.links').forEach you can not use forEach and .linke css selector with getElementsByClassName use querySelectorAll
const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
document.querySelectorAll('.links').forEach(item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
})
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>


when using getElementsByClassName you shouldn't use . while specifying the class.
getElementsByClassName returns HTMLCollection that doesn't have forEach loop, so you need to convert it into array as:
const linksArray = [...links];
or
const linksArray = Array.from( links );
You can also use querySelectorAll(".links")
const toggleBtn = document.getElementById("nav_check");
const menuBtn = document.getElementById("nav_icon");
toggleBtn.addEventListener("click", function() {
if (!menuBtn.classList.contains("open")) {
menuBtn.classList.add("open");
} else {
menuBtn.classList.remove("open");
}
});
const links = document.getElementsByClassName("links");
const linksArray = [...links];
linksArray.forEach((item) => {
item.addEventListener("click", (event) => {
document.getElementById("nav_check").checked = false;
menuBtn.classList.remove("open");
});
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
background: #d3d3d3;
}
.navBar {
width: 100%;
height: 3.3rem;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #0A2463;
position: fixed;
color: #fafafa;
}
.nav_btn {
display: none;
}
.nav_links>a {
padding: .5rem;
margin: auto;
text-decoration: none;
color: #fafafa;
}
.nav_links>a:hover {
color: #ED1250;
}
#nav_check,
#nav_icon {
display: none;
}
.resume {
color: #ED1250;
border-radius: 4px;
border: solid #ED1250 1px;
padding: .5rem;
margin-right: .5rem;
}
.resume:hover {
background: rgb(237, 18, 80, .2);
color: #fafafa;
}
.social {
display: none;
}
#media (max-width:600px) {
.navBar {
height: 3.3rem;
}
.nav_btn {
display: inline-block;
float: right;
}
#nav_icon {
display: block;
width: 60px;
height: 45px;
position: fixed;
right: 1rem;
top: -3rem;
margin: 50px auto;
z-index: 6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border: solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),
#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-weight: 400;
line-height: 4.5rem;
font-size: 3rem;
background: #0A2463;
}
.menu_textWrapper {
display: flex;
flex-direction: column !important;
width: 18rem;
background: #0A2463;
}
.links:hover::after {
content: "»";
font-size: 2.5rem;
}
#nav_check:not(:checked)~menu {
display: none;
}
.navBar>#nav_check:checked~.menu {
display: flex;
flex-direction: column;
}
}
/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>


const toggleBtn = document.getElementById('nav_check');
const menuBtn = document.getElementById('nav_icon');
toggleBtn.addEventListener("click", function(){
if(!menuBtn.classList.contains("open")){
menuBtn.classList.add('open');
}else{
menuBtn.classList.remove('open');
}
});
[].forEach.call( document.getElementsByClassName('links'), item => {
item.addEventListener('click', event => {
document.getElementById('nav_check').checked = false;
menuBtn.classList.remove('open');
})
});
* {
box-sizing: border-box;
}
body {
margin: 0px;
background:#d3d3d3;
}
.navBar {
width: 100%;
height:3.3rem;
display:flex;
justify-content:flex-end;
align-items:center;
background-color: #0A2463;
position: fixed;
color:#fafafa;
}
.nav_btn {
display:none;
}
.nav_links > a {
padding: .5rem;
margin:auto;
text-decoration: none;
color:#fafafa;
}
.nav_links > a:hover {
color:#ED1250;
}
#nav_check, #nav_icon {
display: none;
}
.resume{
color:#ED1250;
border-radius:4px;
border:solid #ED1250 1px;
padding:.5rem;
margin-right:.5rem;
}
.resume:hover {
background:rgb(237, 18, 80,.2);
color:#fafafa;
}
.social{
display:none;
}
#media (max-width:600px) {
.navBar{
height:3.3rem;
}
.nav_btn {
display: inline-block;
float:right;
}
#nav_icon{
display:block;
width: 60px;
height: 45px;
position: fixed;
right:1rem;
top:-3rem;
margin: 50px auto;
z-index:6;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
border:solid orange 2px;
}
#nav_icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #fafafa;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav_icon span:nth-child(1) {
top: 0px;
}
#nav_icon span:nth-child(2),#nav_icon span:nth-child(3) {
top: 18px;
}
#nav_icon span:nth-child(4) {
top: 36px;
}
#nav_icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav_icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav_icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav_icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display:none;
flex-direction:column;
align-items: center;
justify-content: center;
text-transform:uppercase;
font-weight:400;
line-height:4.5rem;
font-size:3rem;
background:#0A2463;
}
.menu_textWrapper{
display:flex;
flex-direction:column !important;
width:18rem;
background:#0A2463;
}
.links:hover::after{
content:"»";
font-size:2.5rem;
}
#nav_check:not(:checked) ~ menu {
display:none;
}
.navBar > #nav_check:checked ~ .menu {
display:flex;
flex-direction:column;
}
}/*closing bracket for media query*/
<div class="navBar">
<input type="checkbox" id="nav_check">
<div class="nav_btn">
<label for="nav_check" class="hamburgerLines" id="nav_icon">
<span></span>
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="menu">
<div class="menu_textWrapper">
<div class="nav_links">
About
Projects
Contact
<span class="resume">Resume</span>
</div>
</div>
</div>
</div>
please use:
[].forEach.call( document.querySelectorAll('a'), function(el) {
// whatever with the current node
});

Related

I am trying to get my Javascript to cooperate and open my hamburger icon with my links inside

Here is the code I am trying to get to cooperate with one another. I just need my Javascript to help in opening my hamburger icon menu. Currently, my hamburger icon works. It will create an "x" when clicked on, but it's just that my menu does not display when I click on the hamburger icon as it should.
* JAVASCRIPT *
export const navAnimation = function () {
const hamburgerDiv = document.querySelector(".nav--hamburger");
const hamburgerIcon = document.querySelector(".hamburger");
const nav = document.querySelector(".nav--ul");
const blur = document.querySelector(".blur");
hamburgerDiv.addEventListener("click", () => {
// nav.classList.toggle("hidden");
hamburgerIcon.classList.toggle("hidden");
cross.classList.toggle("hidden");
nav.classList.toggle("move-in");
nav.classList.toggle("move-out");
// blur.classList.toggle("hidden");
blur.classList.toggle("move-in");
blur.classList.toggle("move-out");
});
};
navAnimation();
// Hamburger Icon //
$(document).ready(function(){
$('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
* HTML *
<header class="header">
<div class="blur move-out"></div>
<div class="header--logo">
<img src="images/Logo-2.png" alt="Site logo" class="logo"/>
</div>
<nav class="nav">
<div class="nav--hamburger">
<div id="nav-icon1" class = "hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul class="nav--ul move-out">
<li class="nav--li--item">
<a class="nav--li--anchor" href="#home">
<span class="order"></span>HOME
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#about">
<span class="order"></span>ABOUT
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#services"
><span class="order"></span>SERVICES
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="booking">
<span class="order"></span>BOOKING
</a>
</li>
<li class="nav--li--item">
<a class="nav--li--anchor" href="#footer">
<span class="order"></span>CONTACT US
</a>
</li>
</ul>
</nav>
</header>
* CSS *
<style>
#nav-icon1 {
width: 55px;
position: relative;
margin: 0px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #551a00;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 10px;
}
#nav-icon1 span:nth-child(3) {
top: 20px;
}
#nav-icon1.open span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1.open span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nav {
font-family: "Bellefair", serif;
color: #fff;
font-size: var(--step-0);
font-weight: 700;
position: absolute;
top: 0;
right: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: end;
width: 80%;
overflow: hidden;
}
.nav--ul {
list-style-type: none;
letter-spacing: 2px;
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
min-height: 100vh;
align-items: start;
width: 100%;
position: relative;
z-index: 2;
padding-left: 2rem;
}
.nav--li--anchor {
color: #fff;
text-decoration: none;
}
.nav--li--anchor:hover {
cursor: pointer;
}
.cross {
position: absolute;
top: 3%;
right: 10%;
transform: translate(-3%, -10%);
}
.blur {
width: 80%;
left: 20%;
position: absolute;
min-height: 118.3vh;
background-color: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
z-index: 2;
}
.hidden {
visibility: hidden;
}
.move-in {
animation: scale-in-hor-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
</style>

Close nav on link click

My nav closes when a user clicks the "X" or hits the esc key, I would like it to close when a user clicks a link as well. The nav is constructed as such;
<div class="top-bar">
<button class="top-bar__nav-toggle hamburger" id="top-nav-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="top-bar__nav collapsed" id="top-bar__nav">
<ul class="top-bar__nav-list nav-ul">
<li>
<a class="navlink" href="#">Home</a>
</li>
<li>
<a class="navlink" href="#Portfolio">Work</a>
</li>
<li>
<a class="navlink" href="#About">About</a>
</li>
<li>
<a class="navlink" href="#Contact">Contact</a>
</li>
</ul>
</nav>
</div>
is styled as such;
body {
background: gray;
}
.top-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-right: 2vw;
}
.top-bar__nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
font-size: 50px;
min-width: 5vw;
text-align: center;
transition: 0.25s;
}
.hamburger {
height: 4vw;
position: relative;
}
.hamburger span {
background: white;
border-radius: 25%;
height: 2px;
position: absolute;
transform: translate(-50%, -50%);
width: 4vw;
}
.hamburger:focus span {
background: rgb(91, 196, 221);
outline: none;
}
.hamburger:hover span {
background: rgb(91, 196, 221);
}
.hamburger span:nth-child(1) {
top: 20%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(2) {
top: 50%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(3) {
top: 80%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger.closed span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.nav-ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.top-bar__nav {
background: transparent;
max-height: 400px;
overflow: hidden;
transition: 0.25s;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
transition: all ease-in-out 1s;
}
.top-bar__nav-list {
list-style: none;
}
.top-bar__nav-list li {
text-align: center;
}
.collapsed .top-bar__nav-list a {
font-size: 2vw;
}
.top-bar__nav-list a {
border-bottom: 2px solid transparent;
color: white;
display: inline-block;
font-size: 6vw;
padding-left: 3vw;
text-decoration: none;
transition: 0.25s;
}
.top-bar__nav-list a:hover {
color: rgb(91, 196, 221);
}
.top-bar__nav-list a:focus {
color: rgb(91, 196, 221);
outline: none;
}
#media screen and (max-width: 500px) {
.top-bar__nav-list {
align-items: flex-end;
background: white;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
padding-right: 4vw;
position: fixed;
transition: all ease-in-out 1s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
right: 0;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
max-height: 0;
}
.top-bar__nav-list.collapsed {
padding-right: 6vw;
}
.nav-ul li a {
color: gray;
}
.top-bar__nav-toggle {
display: inline-block;
body {
background: gray;
}
.top-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-right: 2vw;
}
.top-bar__nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
font-size: 50px;
min-width: 5vw;
text-align: center;
transition: 0.25s;
}
.hamburger {
height: 4vw;
position: relative;
}
.hamburger span {
background: white;
border-radius: 25%;
height: 2px;
position: absolute;
transform: translate(-50%, -50%);
width: 4vw;
}
.hamburger:focus span {
background: rgb(91, 196, 221);
outline: none;
}
.hamburger:hover span {
background: rgb(91, 196, 221);
}
.hamburger span:nth-child(1) {
top: 20%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(2) {
top: 50%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(3) {
top: 80%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger.closed span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.nav-ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.top-bar__nav {
background: transparent;
max-height: 400px;
overflow: hidden;
transition: 0.25s;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
transition: all ease-in-out 1s;
}
.top-bar__nav-list {
list-style: none;
}
.top-bar__nav-list li {
text-align: center;
}
.collapsed .top-bar__nav-list a {
font-size: 2vw;
}
.top-bar__nav-list a {
border-bottom: 2px solid transparent;
color: white;
display: inline-block;
font-size: 6vw;
padding-left: 3vw;
text-decoration: none;
transition: 0.25s;
}
.top-bar__nav-list a:hover {
color: rgb(91, 196, 221);
}
.top-bar__nav-list a:focus {
color: rgb(91, 196, 221);
outline: none;
}
#media screen and (max-width: 500px) {
.top-bar__nav-list {
align-items: flex-end;
background: white;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
padding-right: 4vw;
position: fixed;
transition: all ease-in-out 1s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
right: 0;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
max-height: 0;
}
.top-bar__nav-list.collapsed {
padding-right: 6vw;
}
.nav-ul li a {
color: gray;
}
.top-bar__nav-toggle {
display: inline-block;
}
and its functionality comes from this code;
(function () {
if (document.querySelector("#top-nav-toggle")) {
var navToggle = document.querySelector("#top-nav-toggle");
function watchNavClose(e) {
var topNav = document.querySelector(".top-bar");
if (!e.path.includes(topNav)) {
openCloseNav();
document.documentElement.removeEventListener("click", watchNavClose);
}
}
function openCloseNav() {
var navToggle = document.querySelector("#top-nav-toggle");
if (!navToggle.classList.contains("closed")) {
navToggle.classList.add("closed");
document.querySelector("#top-bar__nav").classList.remove("collapsed");
document.querySelector("html").addEventListener("click", watchNavClose);
document.body.style.overflowY = 'hidden';
} else {
document.querySelector("#top-bar__nav").classList.add("collapsed");
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
}
}
document.addEventListener('keydown', e => {
if ( e.keyCode === 27 ) {
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
document.querySelector("#top-bar__nav").classList.add("collapsed");
}
})
navToggle.addEventListener("click", openCloseNav);
}
})
();
I am mostly building through tutorials and such and I have tried figuring it out through similar questions here, but I am new to this and couldn't figure out how to translate it to my code. Any help is appreciated.

Added separate event listners for the <a> tag using querySelectorAll and run a function which closes nav on listening to click event
(function() {
if (document.querySelector("#top-nav-toggle")) {
var navToggle = document.querySelector("#top-nav-toggle");
function watchNavClose(e) {
var topNav = document.querySelector(".top-bar");
if (!e.path.includes(topNav)) {
openCloseNav();
document.documentElement.removeEventListener("click", watchNavClose);
}
}
function openCloseNav() {
var navToggle = document.querySelector("#top-nav-toggle");
if (!navToggle.classList.contains("closed")) {
navToggle.classList.add("closed");
document.querySelector("#top-bar__nav").classList.remove("collapsed");
document.querySelector("html").addEventListener("click", watchNavClose);
document.body.style.overflowY = 'hidden';
} else {
document.querySelector("#top-bar__nav").classList.add("collapsed");
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
}
}
document.addEventListener('keydown', e => {
if (e.keyCode === 27) {
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
document.querySelector("#top-bar__nav").classList.add("collapsed");
}
})
navToggle.addEventListener("click", openCloseNav);
document.querySelectorAll(".navlink")[0].addEventListener("click", closeNav);
document.querySelectorAll(".navlink")[1].addEventListener("click", closeNav);
document.querySelectorAll(".navlink")[2].addEventListener("click", closeNav);
document.querySelectorAll(".navlink")[3].addEventListener("click", closeNav);
function closeNav() {
var navToggle = document.querySelector("#top-nav-toggle");
document.querySelector("#top-bar__nav").classList.add("collapsed");
document.documentElement.removeEventListener("click", watchNavClose);
document.body.style.overflowY = "scroll";
navToggle.classList.remove("closed");
}
}
})
();
body {
background: gray;
}
.top-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-right: 2vw;
}
.top-bar__nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
font-size: 50px;
min-width: 5vw;
text-align: center;
transition: 0.25s;
}
.hamburger {
height: 4vw;
position: relative;
}
.hamburger span {
background: white;
border-radius: 25%;
height: 2px;
position: absolute;
transform: translate(-50%, -50%);
width: 4vw;
}
.hamburger:focus span {
background: rgb(91, 196, 221);
outline: none;
}
.hamburger:hover span {
background: rgb(91, 196, 221);
}
.hamburger span:nth-child(1) {
top: 20%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(2) {
top: 50%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(3) {
top: 80%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger.closed span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.nav-ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.top-bar__nav {
background: transparent;
max-height: 400px;
overflow: hidden;
transition: 0.25s;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
transition: all ease-in-out 1s;
}
.top-bar__nav-list {
list-style: none;
}
.top-bar__nav-list li {
text-align: center;
}
.collapsed .top-bar__nav-list a {
font-size: 2vw;
}
.top-bar__nav-list a {
border-bottom: 2px solid transparent;
color: white;
display: inline-block;
font-size: 6vw;
padding-left: 3vw;
text-decoration: none;
transition: 0.25s;
}
.top-bar__nav-list a:hover {
color: rgb(91, 196, 221);
}
.top-bar__nav-list a:focus {
color: rgb(91, 196, 221);
outline: none;
}
#media screen and (max-width: 500px) {
.top-bar__nav-list {
align-items: flex-end;
background: white;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
padding-right: 4vw;
position: fixed;
transition: all ease-in-out 1s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
right: 0;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
max-height: 0;
}
.top-bar__nav-list.collapsed {
padding-right: 6vw;
}
.nav-ul li a {
color: gray;
}
.top-bar__nav-toggle {
display: inline-block;
body {
background: gray;
}
.top-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-right: 2vw;
}
.top-bar__nav-toggle {
background: transparent;
border: none;
cursor: pointer;
display: none;
font-size: 50px;
min-width: 5vw;
text-align: center;
transition: 0.25s;
}
.hamburger {
height: 4vw;
position: relative;
}
.hamburger span {
background: white;
border-radius: 25%;
height: 2px;
position: absolute;
transform: translate(-50%, -50%);
width: 4vw;
}
.hamburger:focus span {
background: rgb(91, 196, 221);
outline: none;
}
.hamburger:hover span {
background: rgb(91, 196, 221);
}
.hamburger span:nth-child(1) {
top: 20%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(2) {
top: 50%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger span:nth-child(3) {
top: 80%;
transition: top 125ms 250ms, transform 125ms;
}
.hamburger.closed span:nth-child(1) {
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(2) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.hamburger.closed span:nth-child(3) {
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
transition: top 125ms, transform 125ms 250ms;
}
.nav-ul {
display: flex;
justify-content: center;
list-style-type: none;
padding: 0;
}
.top-bar__nav {
background: transparent;
max-height: 400px;
overflow: hidden;
transition: 0.25s;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
transition: all ease-in-out 1s;
}
.top-bar__nav-list {
list-style: none;
}
.top-bar__nav-list li {
text-align: center;
}
.collapsed .top-bar__nav-list a {
font-size: 2vw;
}
.top-bar__nav-list a {
border-bottom: 2px solid transparent;
color: white;
display: inline-block;
font-size: 6vw;
padding-left: 3vw;
text-decoration: none;
transition: 0.25s;
}
.top-bar__nav-list a:hover {
color: rgb(91, 196, 221);
}
.top-bar__nav-list a:focus {
color: rgb(91, 196, 221);
outline: none;
}
#media screen and (max-width: 500px) {
.top-bar__nav-list {
align-items: flex-end;
background: white;
flex-direction: column;
height: 100%;
max-height: 100%;
overflow: hidden;
padding-right: 4vw;
position: fixed;
transition: all ease-in-out 1s;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
right: 0;
width: 100%;
}
.top-bar__nav.collapsed .top-bar__nav-list {
max-height: 0;
}
.top-bar__nav-list.collapsed {
padding-right: 6vw;
}
.nav-ul li a {
color: gray;
}
.top-bar__nav-toggle {
display: inline-block;
}
<div class="top-bar">
<button class="top-bar__nav-toggle hamburger" id="top-nav-toggle">
Close
</button>
<nav class="top-bar__nav collapsed" id="top-bar__nav">
<ul class="top-bar__nav-list nav-ul">
<li>
<a class="navlink" href="#">Home</a>
</li>
<li>
<a class="navlink" href="#Portfolio">Work</a>
</li>
<li>
<a class="navlink" href="#About">About</a>
</li>
<li>
<a class="navlink" href="#Contact">Contact</a>
</li>
</ul>
</nav>
</div>

How can I disable scrolling when my hamburger menu is open?

I am working on a website with a hamburger menu that fills the entire page when clicked. The only problem is the page behind still scrolls when the nav is open, and I can't figure out how to disable scrolling while the menu is open. I have tried changing overflow-y: hidden, but it doesn't seem to work.
Here is the HTML for the menu:
<div id="menu">
<div class="logotext">
ONWORD
</div>
<input type="checkbox" id="myInput">
<label for="myInput">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</label>
<aside>
<div class="aside-section aside-left">
<div class="aside-content">
<p> Languages of the land</p>
</div>
</div>
<div class="aside-section aside-right">
<ul class="aside-list">
<li>Start Learning</li>
<li>Language Map</li>
<li>History</li>
<li>Stories</li>
<li>Contact</li>
</ul>
</div>
</aside>
</div>
Here is the CSS:
.logotext a {
font-family: "Raleway", sans-serif;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
left: 1%;
z-index: 99999;
color: white;
position: absolute;
padding-left: 19px;
padding-right: 19px;
padding-top: 22px;
transition: 0.5s;
}
.logotext a:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.aside-section {
top: 0;
bottom: 0;
position: absolute;
z-index: 99998;
overflow: hidden;
}
.aside-left {
display: none;
width: 40%;
left: 0;
background-color: white;
background-image: url(../img/menu1.jpeg);
background-position: center;
background-size: cover;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-right {
width: 100%;
right: 0;
background-color: #000000;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 160px;
text-align: left;
padding-left: 50px;
z-index: 99998;
}
.aside-content {
margin-top: 150px;
padding: 0 40px;
position: relative;
color: #000000;
text-align: center;
z-index: 99998;
}
.aside-list li {
margin-bottom: 20px;
z-index: 99998;
padding-bottom: 7px;
}
.aside-anchor::after {
content: "";
position: absolute;
bottom: 0;
background-color: #000000;
left: 0;
right: 0;
height: 2px;
border-radius: 3px;
}
.aside-anchor::before {
border-radius: 3px;
content: "";
position: absolute;
bottom: 0;
background-color: #f5eded;
left: 0;
height: 1px;
z-index: 1;
width: 50%;
-webkit-transition: transform 0.2s ease-in-out;
-o-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.aside-anchor:hover:before {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
background-color: #dd8800;
}
.aside-anchor {
padding-bottom: 5px;
color: #fff;
text-decoration: none;
font-size: 14px;
position: relative;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ aside .aside-left {
transform: translateY(0%);
}
input[type="checkbox"]:checked ~ aside .aside-right {
transform: translateX(0%);
}
input[type="checkbox"]:checked ~ label .bar {
background-color: #fff;
}
input[type="checkbox"]:checked ~ label .top {
-webkit-transform: translateY(0px) rotateZ(45deg);
-moz-transform: translateY(0px) rotateZ(45deg);
-ms-transform: translateY(0px) rotateZ(45deg);
-o-transform: translateY(0px) rotateZ(45deg);
transform: translateY(0px) rotateZ(45deg);
}
input[type="checkbox"]:checked ~ label .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
input[type="checkbox"]:checked ~ label .middle {
width: 0;
}
.middle {
margin: 0 auto;
}
label {
top: 10px;
display: inline-block;
padding: 7px 10px;
background-color: transparent;
cursor: pointer;
margin: 10px;
position: absolute;
z-index: 99999;
text-align: right;
right: 1%;
transition: 0.5s;
}
label:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.bar {
display: block;
background-color: #ffffff;
width: 30px;
height: 3px;
border-radius: 5px;
margin: 5px auto;
transition: background-color 0.4s ease-in, transform 0.4s ease-in,
width 0.4s ease-in;
z-index: 99999;
}
.aside-section h1 {
margin: 0;
position: relative;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
font-size: 35px;
font-family: 'BritishShorthair';
}
.aside-section p {
font-size: 90px;
text-align: center;
line-height: 130px;
font-family: 'BritishShorthair';
margin-top: 0px;
color: white;
}
#media (min-width: 992px) {
h1 {
font-size: 40px;
}
.aside-left {
display: block;
}
.aside-right {
width: 60%;
}
}

When you said you set overflow-y: hidden. Did you do this on the body?

Responsive navbar menu (hamburger menu) doesn't open by clicking

Got a navbar but the problem is when I open (click) it on mobile phone or in responsive environment (when the hamburger menu shows up), it does not open by clicking on it, the links are not showing. Below is the code that I'm using for it. Used the necessary links but not working. Everything is fine, the only problem that is occurring is with that hamburger menu.
$('.navTrigger').click(function() {
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.nav').addClass('affix');
console.log("OK");
} else {
$('.nav').removeClass('affix');
}
});
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
text-align: center;
z-index: 1;
}
.nav div.logo {
float: left;
width: auto;
height: auto;
padding-left: 0.9rem;
}
.nav div.logo a {
text-decoration: none;
color: #fff;
}
.nav div.logo a:hover {
color: #00E676;
}
.nav div.main_list {
height: 65px;
float: right;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav div.main_list ul li {
width: auto;
height: 65px;
padding: 2px;
padding-right: 0.9rem;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
font-size: 80%;
font-weight: bold;
}
.nav div.main_list ul li a:hover {
color: #00b3ee;
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
}
.navTrigger {
display: none;
}
.nav {
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 1;
}
/* Media query section */
#media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
margin: 0;
}
}
#media screen and (max-width:768px) {
.navTrigger {
display: block;
}
.nav div.logo {
margin-left: 15px;
}
.nav div.main_list {
width: 100%;
height: 0;
overflow: hidden;
}
.nav div.show_list {
height: auto;
display: none;
}
.nav div.main_list ul {
flex-direction: column;
width: 100%;
height: 100vh;
right: 0;
left: 0;
bottom: 0;
background-color: #111;
/*same background color of navbar*/
background-position: center top;
}
.nav div.main_list ul li {
width: 100%;
text-align: right;
}
.nav div.main_list ul li a {
text-align: center;
width: 100%;
font-size: 3rem;
padding: 20px;
}
.nav div.media_button {
display: block;
}
}
.navTrigger {
cursor: pointer;
width: 30px;
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
bottom: 0;
}
.navTrigger i {
background-color: #fff;
border-radius: 2px;
content: '';
display: block;
width: 100%;
height: 4px;
}
.navTrigger i:nth-child(1) {
-webkit-animation: outT 0.8s backwards;
animation: outT 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(2) {
margin: 5px 0;
-webkit-animation: outM 0.8s backwards;
animation: outM 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
-webkit-animation: outBtm 0.8s backwards;
animation: outBtm 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
-webkit-animation: inT 0.8s forwards;
animation: inT 0.8s forwards;
}
.navTrigger.active i:nth-child(2) {
-webkit-animation: inM 0.8s forwards;
animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
-webkit-animation: inBtm 0.8s forwards;
animation: inBtm 0.8s forwards;
}
#-webkit-keyframes inM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes inM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes outM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes outM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes inT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes inT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes outT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes outT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes inBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes inBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
#-webkit-keyframes outBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes outBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
.affix {
padding: 0;
background-color: #111;
}
.myH2 {
text-align: center;
font-size: 4rem;
}
.myP {
text-align: justify;
padding-left: 15%;
padding-right: 15%;
font-size: 20px;
}
#media all and (max-width:700px) {
.myP {
padding: 2%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="img" class="ha">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="chk2.png" class="hello">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS AT HEGTAVIC</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>

I have tried your code and modified in fallowing way. It is working fine.
$(document).ready(function(){
$('.navTrigger').on('click',function (){
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
});

Make hamburger menu fadeout work

I am doing a "hamburger" menu, responsive style, with a menu that will cover the page the viewer is at.
I got all HTML/CSS figured out, but I wanted to add fade in and fade out effects.
Fade in works with jquery code but the menu isn't fading out. Already tried some ideas that were on SO but none works.
Any help? Fiddle: https://jsfiddle.net/f19kz640/
Sorry for bad eng...
HTML
<header>
<div id="topbar"> <!-- top bar -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="menu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
</div>
</header>
CSS
body{
background-color: #000;
}
#menu{
z-index: 5;
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.95);
position: fixed;
font-size: 1.5em;
text-align: center;
right: 0px;
top: 0px;
opacity: 0;
display: table;
}
.hidden{
display: none;
visibility: none;
}
#menu ul{
margin: 0;
padding: 0;
z-index: 10;
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
#menu ul li{
cursor: pointer;
text-decoration: none;
}
#menu ul li:hover{
background-color: #006973;
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#menu ul a{
letter-spacing: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
color: #fff;
list-style: none;
text-transform: uppercase;
padding: 0px;
line-height: 75px;
padding: 10px 700px;
text-decoration: none;
}
#menu ul a:hover{
text-decoration: none;
color: #fff ;
}
#nav-icon {
z-index: 20;
width: 50px;
height: 35px;
position: relative;
margin: 35px 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: absolute;
height: 5px;
width: 40px;
background: #bada33;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
/* Icon 3 */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon span:nth-child(4) {
top: 24px;
}
#nav-icon.open span:nth-child(1) {
top: 8px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 8px;
width: 0%;
left: 50%;
}
Javascript/JQuery
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
if($('#menu').css('opacity') == '0'){
$('#menu').css('opacity','1');
$('#menu').fadeIn(300).css('display','table');
}else{
$('#menu').css('opacity','0');
$('#menu').fadeOut(300).css('display','none');
}
});
});

You could easily simplify things a great deal:
$(document).ready(function(){
$('#nav-icon').click(function(){
$(this).toggleClass('open');
$('#menu').fadeToggle(300);
});
});
Updated Fiddle
There's no reason to play with opacity properties or display properties, it's all part of the jQuery fade() function, which you can merely toggle.

Categories

Resources