How do i make hamburger menu close on link click

732 views javascript
7

I want my hamburger menu to close after a link is clicked, not sure how to do this. I have a horizontal hamburger navigation menu and i need to find a way to close it as soon as a link inside of the navigation is clicked on.

My code:

This Javascript is used to make the menu open and close on click, but nothing makes it close when i click on an item inside of the opened Hamburger menu.

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
/* Makes Hamburger Heading Visible On Mobile Only */
  .topnav .icon, #myTopnav, .active {
    visibility: visible;
    z-index: 10000;
  }

/* Width Of Hamburger Navigation */
  .topnav {
    width: 100%;
  }

/* Removes Desktop Heading & Navigation */
  .nav, .top-heading {
    display: none;
  }

/* Header Color */
  #fn {
    color: #ffffff;
    font-size: 32px;
  }

  /* Background And Overflow Of Hamburger Navigation */
  .topnav {
    background: linear-gradient(to top, #ff6699 0%, #ff9999 100%);
    overflow: hidden;
  }

/* Link Style Inside Hamburger Navigation */
  .topnav a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 26px 16px;
    text-decoration: none;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 28px;
  }

/* Link Properties On Hover */
  .topnav a:hover {
    background-color: #ffffff;
    color: black;
  }

/* Active Highlight Of Current Page */
  .active {
    background: linear-gradient(to top, #ff6699 0%, #ff9999 100%);
    color: #ffffff;
  }

/* Closed Hamburger Properties */
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
}

/* Open Hamburger Properties */
.topnav.responsive {position: relative;}
 .topnav.responsive a.icon {
   position: absolute;
   right: 0%;
   top: 0;
 }

 /* Open Link Properties */
 .topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
 }
}
<!-- Hamburger Menu (for mobile) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

      <div class="topnav" id="myTopnav" >
        <a href="index.html" class="active" class="nav-item" id="fn">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="#" class="nav-item">#</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
    </div>

answered question

1 Answer

3

Just toggle between adding / removing that class from the selected element:

var x = document.getElementById("myTopnav");
function myFunction() {
        x.classList.toggle("responsive")
    }

When toggling, you actually do add on the first click, remove on the second click, thus toggle on / off the additional class. In your code, you just add += a new class, named "responsive" to the element, but you don't remove that newly created class anywhere when you click on the menu a second time.

posted this

Have an answer?

JD

Please login first before posting an answer.