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;

functiontoggle(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';
  }
}

functiongetChildNodes(node) {
  let children = newArray();
  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 elementdocument.getElementById('menuElement').onclick = function(e) {
    // Make sure the event doesn't bubble from your elementif (e) { e.stopPropagation(); } 
    else { window.event.cancelBubble = true; }
    // Place the code for this element here
  };

  // For clicks elsewhere on the pagedocument.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: 2px6px0;
  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;
}

#navli {
  font-family: 'Roboto', sans-serif;
  margin: 05px;
  padding: 008px;
  float: right;
  position: relative;
  list-style: none;
}

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

/* level 2 list */#navul {
  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: 01px1pxrgba(0, 0, 0, .8);
  -moz-box-shadow: 01px1pxrgba(0, 0, 0, .8);
  box-shadow: 01px1pxrgba(0, 0, 0, .8);
}

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

#navula {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
  text-shadow: 01px1pxrgba(255, 255, 255, .9);
}

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

/* rounded corners for first and last child */#navulli: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;
}

#navulli: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: 4px0;
}

<navclass="navbar"><divid="ABT-Container"><ulid="nav"><liclass="w3-animate-right"id="menuElement"><ahref="#"onclick="toggle(this)"><pclass="menu_line"></p><pclass="menu_line"></p><pclass="menu_line"></p></a><ul><li><ahref="#"onclick="console.log('about us clicked')">About US</a><ul><li></li></ul></li><li><ahref="#"onclick="toggle(this)">Multi-Levels</a><ul><li><ahref="#"onclick="toggle(this)">Sales</a><ul><li><ahref="#"onclick="console.log('support clicked')">Support</a></li></ul></li><li><ahref="#"onclick="console.log('another link clicked')">Another Link</a></li><li><ahref="#"onclick="console.log('department clicked')">Department</a></li></ul></li><li><ahref="#"onclick="toggle(this)">Multi-Levels2</a><ul><li><ahref="#"onclick="toggle(this)">Sales2</a><ul><li><ahref="#"onclick="console.log('support2 clicked')">Support2</a></li></ul></li><li><ahref="#"onclick="toggle(this)">Sales3</a><ul><li><ahref="#"onclick="console.log('support clicked3')">Support3</a></li></ul></li><li><ahref="#"onclick="console.log('another link2 clicked')">Another Link2</a></li><li><ahref="#"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.