CODEWITHSUNDEEP
javascripthtmldrop-down-menuanchornavbar
amit
amit

Reputation: 719

How to get responsive navbar menu to automatically close after anchor link clicked?

I have a one-page layout for my homepage. (http://www.humipack.in )It has several sections with anchors and the main menu items pointing out to those anchors down that same page. Now, when a link is clicked from the sub menu of the responsive navbar icon menu, it stays open.

Is there any config that allows the responsive menu to be closed just after a click has been produced to anchor locations in the same page?

EDIT: Below is my HTML Code

 <body>


<!-- Navbar -->
<div class="w3-top">
  <div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" 
title="Toggle Navigation Menu" >
<i class="fa fa-bars"></i> </a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">HOME</a>
<a href="#about" class="w3-bar-item w3-button w3-padding-large w3-hide-small">ABOUT US</a>

<div class="w3-dropdown-hover w3-hide-small">
  <button class="w3-padding-large w3-button" title="More" >PRODUCTS <i class="fa fa-caret-down"></i></button>     
  <div class="w3-dropdown-content w3-bar-block w3-card-4">
    <a href="#products" class="w3-bar-item w3-button">White Silica Gel</a>
    <a href="#" class="w3-bar-item w3-button">Blue Silica Gel</a>
    <a href="#" class="w3-bar-item w3-button">Orange Silica Gel</a>
    <a href="#" class="w3-bar-item w3-button">Silica Gel Beads</a>

  </div>
</div>

<a href="#tour" class="w3-bar-item w3-button w3-padding-large w3-hide-small">EXTRAS</a>
<a href="#contact" class="w3-bar-item w3-button w3-padding-large w3-hide-small">CONTACT</a>
<a href="javascript:void(0)" class="w3-padding-large w3-hover-red w3-hide-small w3-right">
<i class="fa fa-search"></i></a>
  </div>
</div>

<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
  <a href="#about" class="w3-bar-item w3-button w3-padding-large">ABOUT</a>
  <a href="#products" class="w3-bar-item w3-button w3-padding-large">PRODUCTS</a>
  <a href="#contact" class="w3-bar-item w3-button w3-padding-large">CONTACT</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large">MERCH</a>
</div>

<script>

// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
} else { 
    x.className = x.className.replace(" w3-show", "");
}
}


</script>


</body>

Upvotes: 0

Views: 656

Answers (2)

amit
amit

Reputation: 719

I added a new function myFunction1 as below:

// Used to toggle the menu on small screens when clicking on the sub menu 
item
function myFunction1() {
var x = document.getElementById("navDemo");
x.className = x.className.replace(" w3-show", "");
if (x.className.indexOf("w3-hide-small") == -1) {
    x.className += " w3-hide-small";
} else { 
    x.className = x.className.replace(" w3-hide-small", "");
}
}

and modified the myFunction() as below:

// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");

//added the below line of code
x.className = x.className.replace(" w3-hide-small", "");

if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
} else { 
    x.className = x.className.replace(" w3-show", "");
}
}

and also in the sub menu item ABOUT href added the following onClick :

 <a href="#about javascript:void(0)" onclick="myFunction1()" class="w3-bar-item w3-button w3-padding-large">ABOUT</a>

Upvotes: 1

Zeta
Zeta

Reputation: 11

I think, when you click on this anchor. You should toogle the navbar like..

$('.nav-collapse').toggle();

You can do it if you are using JQuery, anyway... Could you please post any code to help you?

Upvotes: 0

Related Questions