Home > OS >  My code hamburger menu doesn't close after I click an anchor tag
My code hamburger menu doesn't close after I click an anchor tag

Time：11-15

I am new to front end, so I am trying to make my hamburger menu close when I click on some of the menu to navigate to the same page but another place. Kindly help me with what to do. below are my code for my projects. It is a portfolio I built for myself, thanks

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <title>David Bankole Abel</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/50d8f330a2.js" crossorigin="anonymous"></script>
</head>

<body>
 <div class="container">
  <nav>
  <ul class="nav-links">
    <li><a href="index.html">About</a></li>
    <li><a href="#container-frames">Projects</a></li>
    <li><a href="#contact-us">Get in touch</a></li>
  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div> 
  </div>
</nav>

<section class="intro">

  <h1>Let's find the solution that best fits you...</h1>

</section>

<section class=portfolio>
  <p>Hello, I'm David, a designer and developer from Lagos.
  My dream is to build solutions for global problem, while providing for young people a place to learn and explore their naturally creative side. </p>
</section>

<a name="container-frames"></a>
<div class="container-frames">
  <h6>Selected works</h6>
  <div class="column">
   <a href="https://532services.ng" target="_blank">
     <img src="532serv.jpg"  height="188" alt="ecommerce"></a>
     <h5>Preorder site</h5>
   </div>
   <div class="column">
     <a href="https://1drv.ms/u/s!AgmcHhJeK0Xow14h3ARPShMs_Ado?e=e4Yp1c" target="_blank">
       <img src="ttsunity.jpg" height="188" alt="ecommerce"></a>
       <h5>Mobile game APK</h5>
     </div>
     <div class="column">
      <a href="https://www.figma.com/files/recent" target="_blank">
       <img src="Lambdap.png" height="188" alt="design"></a>
       <h5>UI designs</h5>
     </div>
   </div>

   <a name="contact-us"></a>
   <section class="contact-us">
    <h3>Get in touch</h3>
    <form action="https://formspree.io/f/xnqorqrg" method="POST" id="my-form">      
      <input name="name" type="text" class="feedback-input" placeholder="Name" />   
      <input name="email" type="text" class="feedback-input" placeholder="Email" />
      <textarea name="text" class="feedback-input" placeholder="Enter Message"></textarea>
      <button type="submit">SUBMIT</button>
    </form>
    <div id="status"></div>
  </section>
  </div>

  <footer>
    <a href="https://web.facebook.com/profile.php?id=1412559194" target="_blank" class="fab fa-facebook"></a>
    <a href="https://github.com/davidbankys" target="_blank" class="fab fa-github"></a>
    <a href="https://twitter.com/davidbankys" target="_blank" class="fab fa-twitter"></a>
    <a href="https://www.linkedin.com/in/david-abel-bb222b78/" target="_blank" class="fab fa-linkedin-in"></a>
    <p class="foot">&copy;2021 - David B. Abel</p>
  </footer>

  <script src="app.js"></script>
</body>
</html>

-- CSS here

@font-face {
 font-family: silka;
 src: url(silka/Silka-Bold.otf);
 font-style: normal;
 font-weight: 700;   
}

@font-face {
 font-family: silka;
 src: url(silka/Silka-Light.otf);
 font-style: normal;
 font-weight: 300;
}

* {
  padding: 0;
  margin-left: 0%;
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0px;
  height: 100%;
}

nav {
  font-family: silka;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}

.container {
  min-height: 100%
}

h5 {
 margin-left: 10px;
}

h1 {
  font-family: Silka;
  font-weight: 700;
  color: #220077;
  font-size: 550%;
  margin-left: 190px;
  margin-right: 190px;
}

p {
  font-family: Silka;
  font-weight: 300;
  color: #220077;
  text-align: left;
  font-size: 150%;
  margin-left: 190px;
  margin-right: 190px;
}

.nav-links{
  display: flex;
  justify-content: space-evenly;
  width: 40%;
  list-style: none;
}
.nav-links a{
  font-family: silka;
  color: #220077;
  text-decoration: none;
  font-size: 16px;
  padding: 14px 16px;
}
.burger{
  display: none;
  cursor: pointer;
}
.burger div{
  width: 25px;
  height: 3px;
  background-color: #007722;
  margin: 5px;
  transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
  .nav-links {
    width: 100%;
  }
}

@media screen and (max-width: 601px) {
  html,body{
    overflow-x: hidden! important;
    position: relative;
  }
  .nav-links {
   position: absolute;
   right: 0px;
   height: 265vh;
   top: -3vh;
   background-color: #007722;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   transform: translateX(100%);
   transition: transform 0.5s ease-in;
   padding-top: 0;
 }
 .burger {
  position: absolute;
  top: 0;
  right: 0;
 }

 .nav-links li{
  opacity: 0;
}

.nav-links a{
  font-family: silka;
  text-decoration: none;
  font-size: 24px;
  padding: 10px 12px;
  color: #fff;
}

.logoo{
  font-family: silka;
  border-radius: 30px;
  margin-left: -98px;
  height: 35px;
  width: 35px;
  margin-bottom: 10px;
}

h5{
 margin-left: 20px;
}

h1 {
  font-family: silka;
  color: #220077;
  font-size: 280%;
  margin-left: 20px;
  margin-right: 20PX;
}

.contact-us form { 
 max-width:90%;
 margin:10px auto;
}

.feedback-input {
  color:black;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:300;
  font-size: 12px;
  border-radius: 2px;
  line-height: 11px;
  background-color: transparent;
  border:2px solid #220077;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #220077; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 50%;
  background:#220077;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:12px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:350;
}
[type="submit"]:hover { background:#007722; }


p {
  font-family: silka;
  color: #220077;
  font-size: 150%;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 20px;
  margin-right: 20px;
}

nav {
  background-color: #fff;
}
.burger{
  display: block;
}
.burger div{
  background-color: #007722;
 }
}

.nav-active{
  transform: translate(0%);
}

@keyframes navLinkFade{
  from{
    opacity: 0;
    transform: translateX(50px);
  }

  to{
    opacity: 1;
    transform: translate(0px);
  }

}

.toggle .line1{
 transform: rotate(-45deg) translate(-5px,6px);
 background-color: #fff;
}
.toggle .line2{
  opacity: 0;
  background-color: #fff;
}
.toggle .line3{
  transform: rotate(45deg) translate(-5px,-6px);
  background-color: #fff;
}

.name {
  color: #220077;
  font-weight: bold;
  margin-left: 8%;  
}

.column {
  float: left;
  width: 32%;
  margin: 1px;
  text-align: left;
  padding: 2px;
  margin-left: 10px;
  height: auto; 
  border-radius: 8px;
}

.container-frames {
  background-color: #220077;
}

h5{
  font-family: silka;
  font-weight: 700;
  font-size: 18;
  color: #fff;
  text-decoration: none;  
}

h6{
  font-family: silka;
  font-weight: 700;
  font-size: 24px;
  margin-left: 190px;
  padding-top: 50px;
  color: #fff;
}


/* Clear floats after the columns */
.container-frames:after {
  content: "";
  display: table;
  clear: both;
  background-color: #220077;
  border-radius: 8px;
}

.contact-us {
  font-family: silka;
}

.contact-us h3 {
  font-size: 24px;
  font-family: silka;
  color: #220077;
  margin-left: 210px;
  text-decoration: none;
}


#status{
  width: 90%;
  max-width: 400px;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  border-radius: 8px;
}
#status.success{
  background-color: rgb(211, 250, 153);
  animation: status 4s ease forwards;
}
#status.error{
  background-color: rgb(250, 129, 92);
  color: white;
  animation: status 4s ease forwards;
}
@keyframes status{
  0%{
    opacity: 1;
    pointer-events: all;
  }
  90%{
    opacity: 1;
    pointer-events: all;
  }
  100%{
    opacity: 0;
    pointer-events: none;
  }
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }

  h6 {
    font-family: silka;
    font-weight: 700;
    font-size: 24px;
    margin-left: 20px;
    padding-top: 50px;
  }

  .contact-us h3 {
    margin-left: 20px;
  }

}

img {
 margin: 10px;
 width: 90%;
 border-radius: 4px;
}
body { background:#ffffff; }
form { 
 max-width:70.5%;
 margin:10px auto;
}

.feedback-input {
  color:black;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:300;
  font-size: 12px;
  border-radius: 2px;
  line-height: 11px;
  background-color: transparent;
  border:2px solid #220077;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #220077; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 50%;
  background:#220077;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:12px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:350;
}
[type="submit"]:hover { background:#007722; }


footer {
  font-family: silka;
  width: 100%;
  padding: 12px;
  bottom: 0;
  position: fixed;
  background-color:#007722;
}

.foot{
  font-family: silka;
  font-weight: 300;
  font-size: 14px;
  margin-left: 10px;
}

.fab {
  padding: 10px;
  font-size: 13px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px 10px 10px;
  border-radius: 50%;
  background: #fff;
}

.fab:hover { 
  background-color: #007722;;
}


.fa-facebook {
  background: #fff;
  text-decoration: none;
}

.fa-twitter {
  background: #fff;
  text-decoration: none;
}
.fa-linkedin-in {
  background: #fff;
  text-decoration: none;
}
.fa-github {

  background: #fff;
  text-decoration: none;
}

here is the Javascript for the code

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');


    burger.addEventListener('click', () => {
        //Toggle Nav
        nav.classList.toggle('nav-active');

            //Animate links
     navLinks.forEach((link, index) => {
      if (link.style.animation) {
       link.style.animation = '';

     }else {
       link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7   1}s`;
     }
   });
      //Burger Animation
      burger.classList.toggle('toggle');
    });
}


navSlide();

window.addEventListener("DOMContentLoaded", function() {

    // get the form elements defined in your form HTML above
    
    var form = document.getElementById("my-form");
    //var button = document.getElementById("my-form-button");
    var status = document.getElementById("satus");

    // Success and Error functions for after the form is submitted
    
    function success() {
      form.reset();
      status.classList.add('success');
      status.innerHTML = "Thanks!";
    }

    function error() {
      status.classList.add('error');
      status.innerHTML = "Oops! There was a problem.";
    }

    // handle the form submission event

    form.addEventListener("submit", function(ev) {
      ev.preventDefault();
      var data = new FormData(form);
      ajax(form.method, form.action, data, success, error);
    });
  });

  // helper function for sending an AJAX request

  function ajax(method, url, data, success, error) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.onreadystatechange = function() {
      if (xhr.readyState !== XMLHttpRequest.DONE) return;
      if (xhr.status === 200) {
        success(xhr.response, xhr.responseType);
      } else {
        error(xhr.status, xhr.response, xhr.responseType);
      }
    };
    xhr.send(data);
  }

    enter code here

CodePudding user response：

This is solution. I added an event listener for the click event on all the ul items (li) and made function after click (on li) remove class .nav-active.

document.querySelectorAll('ul.nav-links li').forEach(element => element.addEventListener('click', () => {
      document.querySelector('ul.nav-links').classList.remove('nav-active');
   })
);

Page link：https//www.codepudding.com/os/191080.html

Prev:Styling a div based on the flex wrap property using javaScript
Next:Form in div element not aligning in one row
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding