CODEWITHSUNDEEP
javascripthtmlcssmenunavigation
Chaz Steiner
Chaz Steiner

Reputation: 527

Add Javascript to down ARROW BUTTON to open and close sub menu

I've been trying for hours with this javascript navigation, I've researched many sites, including w3schools, codepen, and css tricks, and many others, I've spent hours reading through stack, and everything has helped a lot, now I'm almost finished, and I need some help making this menu work.

Essentially, it is a sub navigation menu that stays open when you click the down ARROW BUTTON and closes when you click anywhere on the page. Sometimes it works, and sometimes it doesn't.

The menu has two links: Forum 1 / down ARROW BUTTON and Forum 2 / down ARROW BUTTON

I can get Forum 1 down ARROW BUTTON to open the subnavigation sometimes, by clicking the down ARROW BUTTON, but I cannot get Forum 2 down ARROW BUTTON to trigger sub navigation at all.

I'm not sure if it is the way I have the css, or what.

I'm providing the full menu with css, html, and javascript,

Like I said, I can get the first down ARROW BUTTON to open the sub navigation sometimes, but that is about it. Can you help me get this working please?

Here is the styling for the navigation menu

 body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #18143c; 
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 7px 14px 16px;
  text-decoration: none;
}

.subnav {
  float: left;
  overflow: auto;
}

.subnav .subnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 5px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  margin-right:26px;
}

.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: #46485c;
}

.subnav-content-1 {
 display: none;
  position: absolute;
  left: 0;
  background-color: #46485c;
  width: 100%;
  z-index: 1;
  overflow:auto;
}

.subnav-content-1 a {
  float: left;
  color: white;
  text-decoration: none;
  padding: 10px 10px;
}

.subnav-content-1 a:hover {
  background-color: #eee;
  color: black;
}

.show {display: block;}

Here is the HTML for the navigation menu

<div class="navbar">
    <a href="#home"style="padding-left:6px;">Forums 1</a>
  <div class="subnav">
  <button onclick="myFunction()" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
     <div id="myDropdown" class="subnav-content-1">
      <a href="#"style="margin-left:16px;">Test Main</a>
      <a href="#">Test link 1</a>
      <a href="#">Test link 1</a>
       <a href="#">Test link 1</a>
    </div>
  </div> 
    <a href="#home"style="padding-left:6px;">Forums 2</a>
  <div class="subnav">
  <button onclick="myFunction()" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
     <div id="myDropdown" class="subnav-content-1">
      <a href="#"style="margin-left:16px;">Test Main</a>
      <a href="#">Test link 2</a>
      <a href="#">Test link 2</a>
       <a href="#">Test link 2</a>
    </div>
  </div> 
</div>

And here is the javascript

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.subnavbtn')) {
    var dropdowns = document.getElementsByClassName("subnav-content-1");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

here is a link to the page on W3schools where I've been working on this menu. https://www.w3schools.com/code/tryit.asp?filename=GC3LUF0TLS6S

What I am trying to do is, get the menu working were, when you click the dropdown ARROW BUTTON, it opens the sub navigation menu, then to close sub navigation, you just click anywhere on the page.

This almost works!! Please help me get it working right.

Upvotes: 0

Views: 2346

Answers (1)

Rubens
Rubens

Reputation: 61

Hi man I found a fix for you, I don't know if it is what you need but it gets that job done:

First change the id's for each dropdown as they are conflicting when js is called, then call that js function with a the id number of each dropdown:

<div class="navbar">
    <a href="#home"style="padding-left:6px;">Forums 1</a>
  <div class="subnav">
  <button onclick="**myFunction(1)**" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
     <div id="**myDropdown1**" class="subnav-content-1">
      <a href="#"style="margin-left:16px;">Test Main</a>
      <a href="#">Test link 1</a>
      <a href="#">Test link 1</a>
       <a href="#">Test link 1</a>
    </div>
  </div> 
    <a href="#home"style="padding-left:6px;">Forums 2</a>
  <div class="subnav">
  <button onclick="**myFunction(2)**" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
     <div id="**myDropdown2**" class="subnav-content-1">
      <a href="#"style="margin-left:16px;">Test Main</a>
      <a href="#">Test link 2</a>
      <a href="#">Test link 2</a>
       <a href="#">Test link 2</a>
    </div>
  </div> 
</div>

Then you should add a parameter to you js function to know which dropdown to toggle: 

function myFunction(n) {    
    document.getElementById("myDropdown"+n).classList.toggle("show");
}

Upvotes: 2

Related Questions