Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Trình đơn nhiều cấp mở rộng
URL: https://www.javascriptbank.com/expanding-navigation-menu-onclick.html
Hiệu ứng tạo một trình đơn nhiều cấp trên trang web, và ở mỗi thời điểm, hiệu ứng chỉ cho phép người dùng chọn một trình đơn phụ để xem mà thôi.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Trình đơn nhiều cấp » Trình đơn nhiều cấp mở rộng
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>