Navigation menu to Burger Menu-CodePudding

I am trying to make my nav bar menu responsive. I tried to implement it through several ways but the burger button I am not able to click on it. I start to think maybe I need to like a jquery link or make sure of the node in my machine .

This is the HTML :

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Showpra</title> </head> <body>
<nav class="main-nav">
    <div class="logo">Nav</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Connect</a></li>
   </ul>
   <div class="burger">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
   </div>
</nav>

    
<scrip src="script.js"></scrip>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> </body> </html>

This is the CSS :

        @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');

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

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #444;
    font-family: 'Muli', sans-serif;
}

.logo
{
    color: white;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links {
    display: flex;
    background-color: coral;
    justify-content: space-around;
    width: 30%
}

.nav-links li {
    list-style: none;
}


.nav-links a{
    color:cyan;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger{
    display: none;
    cursor: pointer;
}

.burger div{
    width:25px;
    height: 5px;
    background-color: white;
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width:768px){

    body {
        overflow-x: hidden;
    }
   .nav-links {
       position: absolute;
       right: 50%; 
       height: 92vh; 
       top: 8vh;
       background-color: coral;
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 50%;
       transform: translateX(100%);
       transition: transform 0.5s ease-in;

    }

    .nav-links li{
        opacity: 10;
    }

    .burger {
        display: block;
    }
   }

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

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

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

.toggle .line1 {
    transform: rotate(-45deg) traslate(-5px, 6px);
}

.toggle .line2 {
       opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) traslate(-5px, 6px);  
}

This is the javaScript :

        document.addEventListener('DOMContentLoaded', nav)
    function nav(){
        const burger = document.querySelector('.burger');
        const nav = document.querySelector('.main-nav');
        burger.addEventListener('click', ()=>{
            nav.classList.toggle('show')
        })
    }

What do you think is the problem

CodePudding user response：

change your js to click once, the menu show , double click and it hides

    function nav() {
  var x = document.getElementById("burger");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

you can check a detailed article about responsive hamburger menu in https://learnjsx.com/category/1/posts/responsive-css-import

CodePudding user response：

The DOMContentLoaded event has probably already fired before the listener is attached. If you don't want to use the onclick attribute, the best practice to check for document.readyState as in the example below. Also, FYI you don't have a show class in your css, so the code below toggles, the class, but the class doesn't actually do anything.

if (document.readyState !== 'loading') {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.main-nav');
  burger.addEventListener('click', () => {
    nav.classList.toggle('show')
  })
}

@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #444;
  font-family: 'Muli', sans-serif;
}

.logo {
  color: white;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.nav-links {
  display: flex;
  background-color: coral;
  justify-content: space-around;
  width: 30%
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  color: cyan;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 14px;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 5px;
  background-color: white;
  margin: 5px;
  transition: all 0.3s ease;
}

@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 50%;
    height: 92vh;
    top: 8vh;
    background-color: coral;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 10;
  }
  .burger {
    display: block;
  }
}

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

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

.toggle .line1 {
  transform: rotate(-45deg) traslate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) traslate(-5px, 6px);
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Showpra</title>
</head>

<body>
  <nav class="main-nav">
    <div class="logo">Nav</div>
    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Connect</a></li>
    </ul>
    <button onclick="toggleNav">Click</button>
    <div class="burger">
      <div class="line line1"></div>
      <div class="line line2"></div>
      <div class="line line3"></div>
    </div>
  </nav>


  <scrip src="script.js"></scrip>

CodePudding user response：

    @import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');

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

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #444;
    font-family: 'Muli', sans-serif;
}

.logo
{
    color: white;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links {
    display: flex;
    background-color: coral;
    justify-content: space-around;
    width: 30%
}

.nav-links li {
    list-style: none;
}


.nav-links a{
    color:cyan;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger{
    display: none;
    cursor: pointer;
}

.burger div{
    width:25px;
    height: 5px;
    background-color: white;
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width:768px){

    body {
        overflow-x: hidden;
    }
   .nav-links {
       position: absolute;
       right: 50%; 
       height: 92vh; 
       top: 8vh;
       background-color: coral;
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 50%;
       transform: translateX(100%);
       transition: transform 0.5s ease-in;

    }

    .nav-links li{
        opacity: 10;
    }

    .burger {
        display: block;
    }
   }

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

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

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

.toggle .line1 {
    transform: rotate(-45deg) traslate(-5px, 6px);
}

.toggle .line2 {
       opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) traslate(-5px, 6px);  
}

#hamburger {
    font-size: 36px;
    color: #eee;
}

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<title>Showpra</title>
<body>
<nav class="main-nav">
    <div class="logo">Nav</div>
    <div id="hamburger" class="fa fa-bars" onclick="nav()"> </div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li>
        <li><a href="#">Connect</a></li>
   </ul>
</nav> 
<scrip src="script.js"></scrip>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> </body> </html>
<script>
    function nav(){
        $('.nav-links').toggle();
    }
</script>