Hamburger menu toggle JS & CSS

Question

I don't know why when l click the hamburger icon, it does not toggle a drop-down menu of the navigation list. I don't know what I am missing exactly.

My main idea is when l click the hamburger icon it should toggle the navigation menu in display: inline-block. But when l click on it no response is made via console.log

 const buttonToggle = document.querySelector(".togglebtn"); console.log(buttonToggle); const navList = document.querySelector(".nav-items"); console.log(navList); buttonToggle.addEventListener("click", () => { navList.classList.toggle("active"); });

 .container { display: grid; height: 100vh; grid-template-areas: "nav nav nav nav" "main main main main" "content1 content1 content2 content2" "footer footer footer footer"; } /* Navigation */ .name { /* padding-top: 1em; */ position: relative; bottom: -37px; font-weight: bolder; font-family: 'Fjalla One', sans-serif; font-size: 30px; margin-left: .5em; color: white; } nav { grid-area: nav; height: 100px; background: #070705; color: white; font-family: 'Staatliches', cursive; justify-content: space-between; } nav li { display: inline-block; list-style: none; margin: .7em; text-align: left; } nav a { color: white !important; text-decoration: none !important; text-transform: uppercase; font-weight: bold; font-family: 'Space Mono', monospace; } .togglebtn { display: none; } .nav-items { display: inline-block; position: sticky; left: 760px; margin-right:3em; } .nav-items.active { display: inline-grid; background-color: grey; margin: 5em; } nav img { float: right; margin-top: 0.4em; }

 <nav> <div class="name">TECH/NOLOGY</div> <ul class="nav-items"> <li><a href="">Home</a></li> <li><a href="">Products</a></li> <li><a href="">Support</a></li> <li><a href="login/index.html">Account</a></li> </ul> <a href="" class="toggle"> <img src="https://placekitten.com/100/100" class="togglebtn"> </a> </nav>

Answer 1

Two issues as mentioned in the comments above:

Your toggle button is hidden
You are using <a> where you should be using a <button> . More info: https://bitsofco.de/anchors-vs-buttons/

Remove:

.togglebtn {
  display: none;
}

And change the toggle from:

<a href="" class="toggle">
  <img src="https://placekitten.com/100/100" class="togglebtn">
</a>

to:

<button type="button" class="togglebtn">
  <img src="https://placekitten.com/100/100">
</button>

Full example:

<html>
  <head>
    <style>
      .container {
        display: grid;
        height: 100vh;
        grid-template-areas: 
        "nav nav nav nav"
        "main main main main"
        "content1 content1 content2 content2"
        "footer footer footer footer";
      }

      /* Navigation */
      .name {
      /*   padding-top: 1em; */
        position: relative;
        bottom: -37px;
        font-weight: bolder;
        font-family: 'Fjalla One', sans-serif;
        font-size: 30px;
        margin-left: .5em;
        color: white;
      }
      nav {
        grid-area: nav;
        height: 100px;
        background: #070705;
        color: white;
        font-family: 'Staatliches', cursive;
        justify-content: space-between;
      }
      nav li {
        display: inline-block;
        list-style: none;
        margin: .7em;
        text-align: left;
      }
      nav a {
        color: white !important;
        text-decoration: none !important;
        text-transform: uppercase;
        font-weight: bold;
        font-family: 'Space Mono', monospace;
      }
      .nav-items {
        display: inline-block;
        position: sticky;
        left: 760px;
        margin-right:3em;
      }
      .nav-items.active {
        display: inline-grid;
        background-color: grey;
        margin: 5em;
      }
      nav img {
        float: right;
        margin-top: 0.4em;
      }
    </style>
  </head>
  <body>
    <nav>
      <div class="name">TECH/NOLOGY</div>
      <ul class="nav-items">
        <li><a href="">Home</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Support</a></li>
        <li><a href="login/index.html">Account</a></li>
      </ul>
      <button type="button" class="toggle">
        <img src="https://placekitten.com/100/100" class="togglebtn">
      </button>
    </nav>
    
    <script>
      const buttonToggle = document.querySelector(".togglebtn");
      console.log(buttonToggle);
      const navList = document.querySelector(".nav-items");
      console.log(navList);

      buttonToggle.addEventListener("click", () => {
        navList.classList.toggle("active");
      });
    </script>
  </body>
</html>

Hamburger menu toggle JS & CSS

Question

1 answers

solution1
0 ACCPTED 2022-07-05 14:31:11

Hamburger menu toggle JS & CSS

Question

1 answers

solution1 0 ACCPTED 2022-07-05 14:31:11

solution1
0 ACCPTED 2022-07-05 14:31:11