Version complète: jsB@nk » Menu » Multilevel menu » Développer le menu de navigation onClick
URL: https://www.javascriptbank.com/expanding-navigation-menu-onclick.html
Il s'agit d'un simple effondrement élargir menu. L'ancrage des balises qui permettent de développer chaque menu sont ajoutés par les JavaScript, De sorte que le code HTML ne contient pas d'événements ou de balises HTML inutiles. La structure du menu est défini à puces et les listes ordonnées d'éléments.
Version complète: jsB@nk » Menu » Multilevel menu » Développer le menu de navigation 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>