uncheck a checkbox when click on a link

yotube
Author - yotube
August 21, 2022
0

Issue

I have made this navbar responsive for mobile screens with a checkbox. The problem is when i click on one of the link on navbar it doesn't uncheck the checkbox so navbar is not closing when you click on a link from the nav. How can i make it disappear when clicked on screen or a link (like when you click on download) from navbar? here is codepen.



*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  width: 100%;
  height: 100%;
}
p{
  font-size: 1.3em;
  margin: auto;
  width: 90vw;
  text-align:justify;
}
nav{
  height: 80px;
  background:#212121;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 50px 0px 100px;
}
nav .logo{
  font-size: 33px;
  color:white;
  font-weight: 600px;
  cursor: pointer;
  display: block;
}
nav ul li{
  margin: 0px 5px;
  margin-top: 10px;
}
nav ul{
  display: flex;
  list-style: none;
} 
nav ul li a{
  color: #fff;
  text-decoration: none !important;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 8px 25px;
  border-radius: 5px;
  transition: all 0.4s ease;
}
nav ul li a:hover{
background-color: white;
color:#1b1b1b;
}
#click{
  display:none ;
}
#click:checked ~ .menu-btn i::before{
  content: "\f00d";
}
nav .menu-btn i{
  color:white;
  font-size:22px;
  cursor: pointer;
  display: none;
}
@media (max-width:740px){
nav ul{
  position: fixed;
  top:80px;
  right:-100% ;
  background: rgb(45, 45, 45);
  height: 100vh;
  width: 100%;
  display: block;
  transition: all 0.3s ease;
  text-align: right;
  z-index: 10 !important;
}
#click:checked ~ ul{
  right: 0;
  transition: all 0.3s ease;
}

nav .menu-btn i{
  display: block;
}
nav ul li{
  border-radius: 5px;
  border-bottom:2px solid rgb(104, 104, 104);
}

nav ul li a{
 line-height: 50px;
 font-size: 20px;
 display: block;
 
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/b904d616ca.js" crossorigin="anonymous"></script>
  <title>Document</title>
</head>
<body>
  <nav>
    <div class="logo">Ino</div>
    <input type="checkbox" id="click">
    <label for="click" class="menu-btn">
      <i class="fas fa-bars"></i>
    </label>
    <ul>
      <li class="1"><a href="#">contact us</a></li>
      <li class="2"><a href="#">services</a></li>
      <li class="3"><a href="#download">download</a></li>
      <li class="4"><a href="#">home</a></li>
    </ul>
  </nav>
  <h1>Placerat vestibulum lectus mauris ultrices eros in cursus turpis</h1><br>
  <p>asdsads Lorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim sodales ut eu sem. Interdum velit euismod in pellentesque. Erat imperdiet sed euismod nisi porta. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam vulputate ut pharetra sit amet aliquam id. Ut porttitor leo a diam sollicitudin tempor. Urna et pharetra pharetra massa massa ultricies. Convallis tellus id interdum velit laoreet id. Fermentum odio eu feugiat pretium nibh. Placerat vestibulum lectus mauris ultrices eros in cursus turpisLorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim sodales ut eu sem. Interdum velit euismod in pellentesque. Erat imperdiet sed euismod nisi porta. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam vulputate ut pharetra sit amet aliquam id. Ut porttitor leo a diam sollicitudin tempor. Urna et pharetra pharetra massa massa ultricies. Convallis tellus id interdum velit laoreet id. Fermentum odio eu feugiat pretium nibh. Placerat vestibulum lectus mauris ultrices eros in cursus turpisLorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim sodales ut eu sem. Interdum velit euismod in pellentesque. Erat imperdiet sed euismod nisi porta. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam vulputate ut pharetra sit amet aliquam id. Ut porttitor leo a diam sollicitudin tempor. Urna et pharetra pharetra massa massa ultricies. Convallis tellus id interdum velit laoreet id. Fermentum odio eu feugiat pretium nibh. Placerat vestibulum lectus mauris ultrices eros in cursus turpis</p><br>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in fermentum posuere urna nec. Ullamcorper eget nulla facilisi etiam dignissim diam. Ante metus dictum at tempor. Tempor nec feugiat nisl pretium fusce. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Gravida dictum fusce ut placerat orci nulla. Massa enim nec dui nunc mattis enim ut. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. In iaculis nunc sed augue. Amet est placerat in egestas erat imperdiet sed euismod. Nec nam aliquam sem et tortor consequat. Purus faucibus ornare suspendisse sed nisi lacus sed. Odio facilisis mauris sit amet massa. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Vitae congue mauris rhoncus aenean vel elit. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Ornare lectus sit amet est placerat in.</p><br>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in fermentum posuere urna nec. Ullamcorper eget nulla facilisi etiam dignissim diam. Ante metus dictum at tempor. Tempor nec feugiat nisl pretium fusce. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Gravida dictum fusce ut placerat orci nulla. Massa enim nec dui nunc mattis enim ut. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. In iaculis nunc sed augue. Amet est placerat in egestas erat imperdiet sed euismod. Nec nam aliquam sem et tortor consequat. Purus faucibus ornare suspendisse sed nisi lacus sed. Odio facilisis mauris sit amet massa. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Vitae congue mauris rhoncus aenean vel elit. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Ornare lectus sit amet est placerat in.</p><br><br>
    <h2>Diam vulputate ut pharetra sit amet aliquam id</h2>
    <br><br><br><h1>Placerat vestibulum lectus mauris ultrices eros in cursus turpis</h1><br>
  <p>asdsads Lorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim sodales ut eu sem. Interdum velit euismod in pellentesque. Erat imperdiet sed euismod nisi porta. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam vulputate ut pharetra sit amet aliquam id. Ut porttitor leo a diam sollicitudin tempor. Urna et pharetra pharetra massa massa ultricies. Convallis tellus id interdum velit laoreet id. Fermentum odio eu feugiat pretium nibh. Placerat vestibulum lectus mauris ultrices eros in cursus turpisLorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim sodales ut eu sem. Interdum velit euismod in pellentesque. Erat imperdiet sed euismod nisi porta. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam vulputate ut pharetra sit amet aliquam id. Ut porttitor leo a diam sollicitudin tempor. Urna et pharetra pharetra massa massa ultricies. Convallis tellus id interdum velit laoreet id. Fermentum odio eu feugiat pretium nibh. Placerat vestibulum lectus mauris ultrices eros in cursus turpisLorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim 
  <h1><a id="download"; href="#">download here</a></h1>
  </body>




Solution

First, you need to add an eventListener to check if an anchor is clicked within the navbar. Unfortunately, you need to add it to every anchor. To make it easier and shorter we use querySelectorAll('nav a') to select all those anchors. This however returns a Node-List and we have to use the forEach iteration:

document.querySelectorAll('nav a').forEach(el =>
  //iteration function
)

within the iteration function we can use the eventListener for click events to apply it to every single element of the Node-List:

el.addEventListener('click', function() {
  // your function
})

last but not least, we add the actual function that unchecks the checkbox:

element.checked = false;

The entire function should look like this:



document.querySelectorAll('nav a').forEach(el =>
  el.addEventListener('click', function() {
    document.querySelector('#click').checked = false;
  })
);

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  width: 100%;
  height: 100%;
}
p{
  font-size: 1.3em;
  margin: auto;
  width: 90vw;
  text-align:justify;
}
nav{
  height: 80px;
  background:#212121;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 50px 0px 100px;
}
nav .logo{
  font-size: 33px;
  color:white;
  font-weight: 600px;
  cursor: pointer;
  display: block;
}
nav ul li{
  margin: 0px 5px;
  margin-top: 10px;
}
nav ul{
  display: flex;
  list-style: none;
} 
nav ul li a{
  color: #fff;
  text-decoration: none !important;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 8px 25px;
  border-radius: 5px;
  transition: all 0.4s ease;
}
nav ul li a:hover{
background-color: white;
color:#1b1b1b;
}
#click{
  display:none ;
}
#click:checked ~ .menu-btn i::before{
  content: "\f00d";
}
nav .menu-btn i{
  color:white;
  font-size:22px;
  cursor: pointer;
  display: none;
}
@media (max-width:740px){
nav ul{
  position: fixed;
  top:80px;
  right:-100% ;
  background: rgb(45, 45, 45);
  height: 100vh;
  width: 100%;
  display: block;
  transition: all 0.3s ease;
  text-align: right;
  z-index: 10 !important;
}
#click:checked ~ ul{
  right: 0;
  transition: all 0.3s ease;
}

nav .menu-btn i{
  display: block;
}
nav ul li{
  border-radius: 5px;
  border-bottom:2px solid rgb(104, 104, 104);
}

nav ul li a{
 line-height: 50px;
 font-size: 20px;
 display: block;
 
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/b904d616ca.js" crossorigin="anonymous"></script>
  <title>Document</title>
</head>
<body>
  <nav>
    <div class="logo">Ino</div>
    <input type="checkbox" id="click">
    <label for="click" class="menu-btn">
      <i class="fas fa-bars"></i>
    </label>
    <ul>
      <li class="1"><a href="#">contact us</a></li>
      <li class="2"><a href="#">services</a></li>
      <li class="3"><a href="#download">download</a></li>
      <li class="4"><a href="#">home</a></li>
    </ul>
  </nav>
  <h1>Placerat vestibulum lectus mauris ultrices eros in cursus turpis</h1><br>
  <p>asdsads Lorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim sodales ut eu sem. Interdum velit euismod in pellentesque. Erat imperdiet sed euismod nisi porta. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam vulputate ut pharetra sit amet aliquam id. Ut porttitor leo a diam sollicitudin tempor. Urna et pharetra pharetra massa massa ultricies. Convallis tellus id interdum velit laoreet id. Fermentum odio eu feugiat pretium nibh. Placerat vestibulum lectus mauris ultrices eros in cursus turpisLorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim sodales ut eu sem. Interdum velit euismod in pellentesque. Erat imperdiet sed euismod nisi porta. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam vulputate ut pharetra sit amet aliquam id. Ut porttitor leo a diam sollicitudin tempor. Urna et pharetra pharetra massa massa ultricies. Convallis tellus id interdum velit laoreet id. Fermentum odio eu feugiat pretium nibh. Placerat vestibulum lectus mauris ultrices eros in cursus turpisLorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim sodales ut eu sem. Interdum velit euismod in pellentesque. Erat imperdiet sed euismod nisi porta. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam vulputate ut pharetra sit amet aliquam id. Ut porttitor leo a diam sollicitudin tempor. Urna et pharetra pharetra massa massa ultricies. Convallis tellus id interdum velit laoreet id. Fermentum odio eu feugiat pretium nibh. Placerat vestibulum lectus mauris ultrices eros in cursus turpis</p><br>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in fermentum posuere urna nec. Ullamcorper eget nulla facilisi etiam dignissim diam. Ante metus dictum at tempor. Tempor nec feugiat nisl pretium fusce. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Gravida dictum fusce ut placerat orci nulla. Massa enim nec dui nunc mattis enim ut. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. In iaculis nunc sed augue. Amet est placerat in egestas erat imperdiet sed euismod. Nec nam aliquam sem et tortor consequat. Purus faucibus ornare suspendisse sed nisi lacus sed. Odio facilisis mauris sit amet massa. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Vitae congue mauris rhoncus aenean vel elit. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Ornare lectus sit amet est placerat in.</p><br>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat in fermentum posuere urna nec. Ullamcorper eget nulla facilisi etiam dignissim diam. Ante metus dictum at tempor. Tempor nec feugiat nisl pretium fusce. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Gravida dictum fusce ut placerat orci nulla. Massa enim nec dui nunc mattis enim ut. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. In iaculis nunc sed augue. Amet est placerat in egestas erat imperdiet sed euismod. Nec nam aliquam sem et tortor consequat. Purus faucibus ornare suspendisse sed nisi lacus sed. Odio facilisis mauris sit amet massa. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Vitae congue mauris rhoncus aenean vel elit. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Ornare lectus sit amet est placerat in.</p><br><br>
    <h2>Diam vulputate ut pharetra sit amet aliquam id</h2>
    <br><br><br><h1>Placerat vestibulum lectus mauris ultrices eros in cursus turpis</h1><br>
  <p>asdsads Lorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim sodales ut eu sem. Interdum velit euismod in pellentesque. Erat imperdiet sed euismod nisi porta. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam vulputate ut pharetra sit amet aliquam id. Ut porttitor leo a diam sollicitudin tempor. Urna et pharetra pharetra massa massa ultricies. Convallis tellus id interdum velit laoreet id. Fermentum odio eu feugiat pretium nibh. Placerat vestibulum lectus mauris ultrices eros in cursus turpisLorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim sodales ut eu sem. Interdum velit euismod in pellentesque. Erat imperdiet sed euismod nisi porta. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Diam vulputate ut pharetra sit amet aliquam id. Ut porttitor leo a diam sollicitudin tempor. Urna et pharetra pharetra massa massa ultricies. Convallis tellus id interdum velit laoreet id. Fermentum odio eu feugiat pretium nibh. Placerat vestibulum lectus mauris ultrices eros in cursus turpisLorem dolor sed viverra ipsum nunc. Eu augue ut lectus arcu bibendum at varius vel. Nunc sed velit dignissim 
  <h1><a id="download"; href="#">download here</a></h1>
  </body>





Answered By - tacoshy
Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
Share to other apps
Copy Post Link
To Top