mouse toggled event isn't responsive on element that supposed to act as nav drop down menu-CodePudding

My navbar has 3 elements, image, burger-btn styling, and <ul> of 3 items.
When my browser width is 700px or below, I'm hiding my <ul> and the burger-btn element will be in its place. When I click the button I need a drop-down menu that lists out my unordered list. But, my button isn't doing what it's supposed to do.

I tried console.log to check whether my eventListner is picking up the mouse click or not, and my function is fired. I'm getting "clicked" when I click the hamburger element.

const hambrugerBtn = document.getElementById("hamburgur");
const nav_list = document.getElementById("nav_list");

function toggledevent() {
  hambrugerBtn.classList.toggle("show");
  console.log("clicked");
  // hambrugerBtn.style.backgroundColor = "red";
}

hambrugerBtn.addEventListener("click", toggledevent);

.hamburgur {
  border: 0;
  background-color: transparent;
  width: 10px;
}

.nav_list {
  display: none;
}

.nav_list.show {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 700px) {
  .hamburger {
    display: none;
    /* height: 0px; */
  }
  .nav_list {
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
  }
}

<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>
<nav>
  <img  id="funnylogo" src="images/funny_logo-removebg-preview.png" alt="About Section" />
  <button  id="hamburgur">
        <i ></i>
      </button>
  <ul  id="nav_list">
    <li>
      <a href="#about_me_heading"> About Me</a>
    </li>
    <li><a href=""> Profile</a></li>
    <li><a href="contact/contact.html"> For Contact</a></li>
  </ul>
</nav>

CodePudding user response：

You made a mistake in the dropdown selector. Give the button the show class, not the drop-down menu that is placed in the code immediately after the button. This is the .show .nav-list selector.

const hambrugerBtn = document.getElementById("hamburgur");
const nav_list = document.getElementById("nav_list");

function toggledevent() {
  hambrugerBtn.classList.toggle("show");
  console.log("clicked");
  // hambrugerBtn.style.backgroundColor = "red";
}

hambrugerBtn.addEventListener("click", toggledevent);

.hamburgur {
  border: 0;
  background-color: transparent;
  width: 10px;
}

.nav_list {
  display: none;
}

.show .nav_list {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 700px) {
  .hamburger {
    display: none;
    /* height: 0px; */
  }
  .nav_list {
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
  }
}

<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>
<nav>
  <img  id="funnylogo" src="images/funny_logo-removebg-preview.png" alt="About Section" />
  <button  id="hamburgur">
        <i ></i>
      </button>
  <ul  id="nav_list">
    <li>
      <a href="#about_me_heading"> About Me</a>
    </li>
    <li><a href=""> Profile</a></li>
    <li><a href="contact/contact.html"> For Contact</a></li>
  </ul>
</nav>