Close responsive menu after click

Hermano · December 31, 2016

Hi,

I have a responsive fixed top menu that opens after clicking on the Menu icon.
Now, I would like to close the menu automatically when one clicks on one of the menu items (when the size of screen is smaller than 680px). Otherwise it covers part of the section that slides up.
When the menu is closed only the menu icon may be visible.

I have used the code from the following link: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
</style>
</head>
<body>

<ul class="topnav" id="myTopnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

</body>
</html>

justsomeguy · January 3, 2017

It sounds like you should also run that function when they click on a menu item.

smus · January 17, 2017

Seems that you have to simply use the same function for menu items (onclick)

<li><a class="active" href="#home" onclick="myFunction()">Home</a></li>

Edited January 17, 2017 by smus

Sign In

Close responsive menu after click

Recommended Posts

Hermano

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

smus

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity