Full version: jsB@nk » Menu » Multilevel menu » Expanding Navigation Menu onClick
URL: https://www.javascriptbank.com/expanding-navigation-menu-onclick.html
This is a simple expand collapse menu. The anchor tags that expand each menu are added by JavaScript, so the HTML code doesn't contain any event handlers or unnecessary HTML tags. The structure of the menu is defined with unordered and ordered lists elements.
Full version: jsB@nk » Menu » Multilevel menu » Expanding Navigation Menu onClick
URL: https://www.javascriptbank.com/expanding-navigation-menu-onclick.html
<style type="text/css">ul#menu { width: 100px; list-style-type: none; border-top: solid 1px #b9a894; margin: 0; padding: 0;}ul#menu ol { display: none; text-align: right; list-style-type: none; margin: 0; padding: 5px;}ul#menu li, ul#menu a { font-family: verdana, sans-serif; font-size: 11px; color: #785a3c;}ul#menu li { border-bottom: solid 1px #b9a894; line-height: 15px;}ul#menu ol li { border-bottom: none;}ul#menu ol li:before { content: "-";}ul#menu a { text-decoration: none; outline: none;}ul#menu a:hover { color: #539dbc;}ul#menu a.active { color: #be5028;}</style><script language="javascript">/*Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.comversion date: 06/02/03 :: If want to use this code, feel free to do so,but please leave this message intact. (Travis Beckham) */// Node Functionsif(!window.Node){ var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};}function checkNode(node, filter){ return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());}function getChildren(node, filter){ var result = new Array(); var children = node.childNodes; for(var i = 0; i < children.length; i++){ if(checkNode(children[i], filter)) result[result.length] = children[i]; } return result;}function getChildrenByElement(node){ return getChildren(node, "ELEMENT_NODE");}function getFirstChild(node, filter){ var child; var children = node.childNodes; for(var i = 0; i < children.length; i++){ child = children[i]; if(checkNode(child, filter)) return child; } return null;}function getFirstChildByText(node){ return getFirstChild(node, "TEXT_NODE");}function getNextSibling(node, filter){ for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){ if(checkNode(sibling, filter)) return sibling; } return null;}function getNextSiblingByElement(node){ return getNextSibling(node, "ELEMENT_NODE");}// Menu Functions & Propertiesvar activeMenu = null;function showMenu() { if(activeMenu){ activeMenu.className = ""; getNextSiblingByElement(activeMenu).style.display = "none"; } if(this == activeMenu){ activeMenu = null; } else { this.className = "active"; getNextSiblingByElement(this).style.display = "block"; activeMenu = this; } return false;}function initMenu(){ var menus, menu, text, a, i; menus = getChildrenByElement(document.getElementById("menu")); for(i = 0; i < menus.length; i++){ menu = menus[i]; text = getFirstChildByText(menu); a = document.createElement("a"); menu.replaceChild(a, text); a.appendChild(text); a.href = "#"; a.onclick = showMenu; a.onfocus = function(){this.blur()}; }}if(document.createElement) window.onload = initMenu;</script><ul id="menu"> <li>Menu Item 1 <ol> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> </ol> </li> <li>Menu Item 2 <ol> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Sub Item 2.2</a></li> <li><a href="#">Sub Item 2.3</a></li> </ol> </li> <li>Menu Item 3 <ol> <li><a href="#">Sub Item 3.1</a></li> <li><a href="#">Sub Item 3.2</a></li> <li><a href="#">Sub Item 3.3</a></li> </ol> </li> <li>Menu Item 4 <ol> <li><a href="#">Sub Item 4.1</a></li> <li><a href="#">Sub Item 4.2</a></li> <li><a href="#">Sub Item 4.3</a></li> </ol> </li> <li>Menu Item 5 <ol> <li><a href="#">Sub Item 5.1</a></li> <li><a href="#">Sub Item 5.2</a></li> <li><a href="#">Sub Item 5.3</a></li> </ol> </li></ul>