The JavaScript Source: Navigation : Expanding Menu

Home

Expanding Menu

This is a simple expanding 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.

The JavaScript Source: Navigation : Expanding Menu
Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

 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; }  /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com version date: 06/02/03 :: If want to use this code, feel free to do so, but please leave this message intact. (Travis Beckham) */ // Node Functions if(!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 & Properties var 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 type="text/javascript" src="expandingMenu.js"></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> <p><div align="center"> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </div><p>
Did you use this script? Do you like this site? Please link to us!

Add a comment, suggestion, or correction

Sign up for the JavaScript Weekly

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Whitepapers and eBooks

IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepaper: Using Oracle In-Memory Database Cache to Accelerate the Oracle Database
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT
Internet.com eBook: IT Manager's Guide to Social Networking

Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3�New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies
Video: Microsoft Partner Program Benefits
Video: Windows Azure Debugging Tips

SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports
IBM Webcast: Speed Business Innovation with Reduced Cost and Risk
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Downloads & Free Trials: Microsoft's New Efficiency Resource Center
Microsoft SQL Server 2008 Trial Software Evaluation
Get the Windows 7 SDK

Free Trial: Red Gate SQL Backup Pro 6
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products
All About Botnets

HP PartnerOne: Your customers don't want just any solution. They want the right solution.
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES