How Can I Change My Menu To The Toggle Menu?

My menu opens automatically on mouse hover and it closes the menu when the mouse isn't hovering anymore, But this functionality is not the desired one , I actually want to change m

Solution 1:

You can also do this without jquery, but personally I'd add something to indicate something has a submenu, as you now have to try to find out.

let hovering = false;

function toggle(element) {
  const nodes = getChildNodes(element.parentElement);
  const parentNodes = getChildNodes(element.parentElement.parentElement);
  if(parentNodes.length > 1) {
    parentNodes.forEach(function(parentNode) {
      const parentChildNodes = getChildNodes(parentNode);
      if(parentChildNodes.length > 1 && parentChildNodes[1].style.display === 'block' && parentChildNodes[1] !== nodes[1])  {
        parentChildNodes[1].style.display = 'none';
      }
    });
  }
  if(nodes[1].style.display === 'block') {
    nodes[1].style.display = 'none';
  } else {
    nodes[1].style.display = 'block';
  }
}

function getChildNodes(node) {
  let children = new Array();
  for(const child in node.childNodes) {
    if(node.childNodes[child].nodeType == 1) {
      children.push(node.childNodes[child]);
    }
  }
  return children;
}

window.onload = function() {
  // For clicks inside the element
  document.getElementById('menuElement').onclick = function(e) {
    // Make sure the event doesn't bubble from your element
    if (e) { e.stopPropagation(); } 
    else { window.event.cancelBubble = true; }
    // Place the code for this element here
  };

  // For clicks elsewhere on the page
  document.onclick = function() {
    const uls = document.getElementById('nav').getElementsByTagName('ul');
    for (i = 0; i < uls.length; i++) {
      uls[i].style.display = 'none';
    }
  };
};

#ABT-Container  {
  font-family: 'Roboto', sans-serif;
  background: transparent;
  width:100%; float:right;
}

a {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: #333;
}

#nav {
  float: right;
  font-family: 'Roboto', sans-serif;
  padding: 2px 6px 0;
  line-height: 100%;
  border-radius: 1em;
  background: white; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
  background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #FFFFFF,  #FFFFFF); /* for firefox 3.6+ */
  border: solid 1px white;
}

#nav li {
  font-family: 'Roboto', sans-serif;
  margin: 0 5px;
  padding: 0 0 8px;
  float: right;
  position: relative;
  list-style: none;
}

/* main level link */
#nav a {
  font-family: 'Roboto', sans-serif;
  color: #353535;
  text-decoration: none;
  display: block;
  padding:  8px 20px;
  margin: 0;
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
}

/* level 2 list */
#nav ul {
  font-family: 'Roboto', sans-serif;
  background: #FFFFFF; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF'); /* for IE */
  background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #fff,  #FFFFFF); /* for firefox 3.6+ */
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 35px;
  right: 0;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}

/* dropdown */
#nav ul li {
  font-family: 'Roboto', sans-serif;
  float: none;
  margin: 0;
  padding: 0;
}

#nav ul a {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}

/* level 3+ list */
#nav ul ul {
  font-family: 'Roboto', sans-serif;
  right: 181px;
  top: -3px;
}

/* rounded corners for first and last child */
#nav ul li:first-child > a {
  -webkit-border-top-right-radius: 1px;
  -moz-border-radius-topleft: 1px;
  -webkit-border-top-left-radius: 1px;
  -moz-border-radius-topright: 1px;
}

#nav ul li:last-child > a {
  -webkit-border-bottom-right-radius: 1px;
  -moz-border-radius-bottomleft: 1px;
  -webkit-border-bottom-left-radius: 1px;
  -moz-border-radius-bottomright: 1px;
}

/* clearfix */
#nav:after {
  font-family: 'Roboto', sans-serif;
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#nav {
  font-family: 'Roboto', sans-serif;
  display: inline-block;
}

html[xmlns] #nav {
  font-family: 'Roboto', sans-serif;
  display: block;
}

* html #nav {
  height: 1%;
}

.menu_line{
  width: 25px;
  height: 2px;
  background-color: black;
  color: black;
  margin: 4px 0;
}

<nav class="navbar">
  <div id="ABT-Container">
    <ul id="nav">
      <li class="w3-animate-right" id="menuElement">
        <a href="#" onclick="toggle(this)">
          <p class="menu_line"></p>
          <p class="menu_line"></p>
          <p class="menu_line"></p>
        </a>
        <ul>
          <li>
            <a href="#" onclick="console.log('about us clicked')">About US</a>
            <ul>
              <li></li>
            </ul>
          </li>
          <li>
            <a href="#" onclick="toggle(this)">Multi-Levels</a>
            <ul>
              <li>
                <a href="#" onclick="toggle(this)">Sales</a>
                <ul>
                  <li>
                    <a href="#" onclick="console.log('support clicked')">Support</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#" onclick="console.log('another link clicked')">Another Link</a>
              </li>
              <li>
                <a href="#" onclick="console.log('department clicked')">Department</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" onclick="toggle(this)">Multi-Levels2</a>
            <ul>
              <li>
                <a href="#" onclick="toggle(this)">Sales2</a>
                <ul>
                  <li>
                    <a href="#" onclick="console.log('support2 clicked')">Support2</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#" onclick="toggle(this)">Sales3</a>
                <ul>
                  <li>
                    <a href="#" onclick="console.log('support clicked3')">Support3</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#" onclick="console.log('another link2 clicked')">Another Link2</a>
              </li>
              <li>
                <a href="#" onclick="console.log('department clicked2')">Department2</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>                 
</nav>

Edit: Now also closing on clicking somewhere not on the menu.