CODEWITHSUNDEEP
javascripthtml
Koorsp
Koorsp

Reputation: 1

How to close navbar menu when click on a menu option

This is the navbar html code:

    <nav id="navbar">
        <ul class="menu">
            <li class="logo"><a href="#"><img src="img/LOGO JS BLANCO PNG.png"></a></li>
            <li class="item"><a href="#home">Home</a></li>
            <li class="item"><a href="#about">About</a></li>
            <li class="item"><a href="#portfolio">Portfolio</a></li>
            <li class="item"><a href="#knowledge">Knowledge</a></li>
            <li class="item"><a href="#experience">Experience</a></li>
            <li class="item"><a href="#contact">Contact</a></li>
            <li class="toggle"><a href="#nowhere"><i class="fas fa-bars"></i></a></li>
        </ul>
    </nav>

This is the navbar js code:

const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");

/* Toggle mobile menu */
function toggleMenu() {
  if (menu.classList.contains("active")) {
    menu.classList.remove("active");
    toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
  } else {
    menu.classList.add("active");
    toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
  }
}

/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
  item.addEventListener("keypress", toggleItem, false);
}

I want navbar to be closed when I click on a menu option. Any solution here? thanks

Upvotes: 0

Views: 37

Answers (1)

epascarello
epascarello

Reputation: 207501

You can add the click to the menu instead of just the .toggle link

const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");

/* Toggle mobile menu */
function toggleMenu() {
  menu.classList.toggle("active");
  const icon = toggle.querySelector("a i.fas");
  icon.classList.toggle('fa-bars');
  icon.classList.toggle('fa-times');
}

/* Event Listeners */
menu.addEventListener("click", toggleMenu, false);
#navbar .item {
  display: none;
}


#navbar .menu.active .item {
  display: list-item;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<nav id="navbar">
  <ul class="menu">
    <li class="logo">
      <a href="#"><img src="img/LOGO JS BLANCO PNG.png"></a>
    </li>
    <li class="item"><a href="#home">Home</a></li>
    <li class="item"><a href="#about">About</a></li>
    <li class="item"><a href="#portfolio">Portfolio</a></li>
    <li class="item"><a href="#knowledge">Knowledge</a></li>
    <li class="item"><a href="#experience">Experience</a></li>
    <li class="item"><a href="#contact">Contact</a></li>
    <li class="toggle"><a href="#nowhere"><i class="fas fa-bars"></i></a></li>
  </ul>
</nav>

Upvotes: 1

Related Questions