CODEWITHSUNDEEP
javascripthtmlcssmenunav
Jakob
Jakob

Reputation: 167

Closing nav menu after clicking list item (javascript, css, html)

I built a navigation menu for mobile user. I want the menu to close as soon as i click on a list item. How is that possible?

$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('header nav').toggleClass('active');
  });
});
header {
  display: block;
  left: 0px;
  border-radius: 0px;
  width: 100%;
  height: 50px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  top: 0;
  right: 0;
  background: white;
  z-index: 2;
}

header nav {
  position: fixed;
  width: 100%;
  height: calc(100vh - 50px);
  background-color: #ffffff;
  top: 50px;
  left: 0;
  transition: 0.5s;
}

header nav.active {
  left: -100%;
}

header nav ul li {
  float: none;
  display: block;
  padding-bottom: 15px;
  text-align: center;
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: lighter;
}

header nav ul li a {
  font-size: 25px;
}

header nav ul a li:hover {
  padding-top: 0px;
  color: #3ECB8A;
}

.menu-toggle {
  display: block;
  margin-right: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>

  <nav id="main-nav" class="active">
    <ul>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#about">
        <li>About</li>
      </a>
      <a href="#work">
        <li>Work</li>
      </a>
      <a href="#contact">
        <li>Contact</li>
      </a>
    </ul>
  </nav>

  <div class="menu-toggle">
    <i class="fa fa-bars">icon</i>
  </div>

</header>

Upvotes: 0

Views: 903

Answers (1)

Andrew
Andrew

Reputation: 1140

You can listen for a click on a link and toggle the active class as you are doing to show/hide the menu. For example:

$('header nav a').click(function(){
    $('header nav').toggleClass('active');
  })

Upvotes: 1

Related Questions