Jump to content

Responsive Topnav example not closing after choice


Recommended Posts

Hello,

With reference to your "Responsive TopNav" example here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav it works fine for the most part, except that when the "hamburger" icon is used it does not close down again after making a selection.

I have included my own slightly modified version of your example, simplified so there are only "home" and "news" menu items, and the hamburger icon will appear when reducing the width below 1000px.

How can this be modified to collapse the hamburger links upon making a selection? Thanks... Jon

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
    position: absolute;
    left: 0;
    top: 0;
  width: 100%;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

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

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

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

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

<h2 id="home">Home</h2>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
<h2 id="news">News</h2>
asdf<br>
asdf<br>
asdf<br>

</body>
</html>

 

Link to post
Share on other sites

Hello,

it works. Just add more <br> between the navigation items

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
    position: absolute;
    left: 0;
    top: 0;
  width: 100%;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 1000px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

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

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

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

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

<h2 id="home">Home</h2>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
<h2 id="news">News</h2>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
</body>
</html>

 

Link to post
Share on other sites
  • 2 weeks later...

Hi Witt,

Thanks for your reply, but the problem still exists... The menu works fine when it comes to navigating to the correct anchor point (e.g. "#news").

The problem is that, even after a selection is made, the hamburger menu stays expanded until you hit the icon again... at least that's the behavior I see.

With your extra "asdf<br>" lines, the hamburger menu is still expanded, but just scrolls off the top of the screen, so you can't see it. 

Try it... use your example, decrease width until the hamburger menu appears, select it, then "News". You should navigate to "#News" but then scroll back to the top of the page and you should see what mean.

Thanks.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...