Expanding Menu | JavaScriptSource

Expanding Menu

Travis Beckham Feb 17, 2006
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!!!

Did you use this script?  Do you like this site?  Please link to us!

Leave a Response


Hi, I started using your older version of this expanding menu. I really like it as it is simple, straight text. I have been able to fully customize it for the several multiple levels as well as the style of it but one thing I cannot do and wish I could is make it so when you click on a sub-menu item or a sub sub menu item the menu does not close up. There appears to be two types of links within the code,, the link that expands the menu item to show the child nodes and the links from the child nodes that actually open up a web page. It is possible due to the refresh of the page that it resets the menu but I would like to know if there is anyway the menu can remember what was clicked so that section can stay open as it is aggravating to have to keep clicking it open. Thank you... I truly dislike trying to code in JS, that is why I typically hunt for free code. This menu I have had since 2003 :)

beth Nov 10, 2015

hi ,, thanx for the code its work with me but how i can modify this code to be multi levels rather than one level , i need this code to be expanded for 4 levels and thanx again

sara May 12, 2012

Thanks for the script![br /][br /]Any way to keep the menu expanded when a sub is clicked and the page changes?

Teri Apr 8, 2009

Rich,[br /][br /]you can fix that by changing the css,[br /][br /]in the menu style:[br /][br /] width: 100px;[br /][br /][br /][br /]either just delete the width or adjust to what you need

Shana Apr 8, 2009

Good day,[br /][br /]I was able to use the code for my navigation needs so thank you.[br /][br /]The only issue I am having is figuring out how to adjust the length of the menu header and the menu sub headers. I'm very new to js and could use some guidence.[br /][br /]How do I make each line longer so it wont wrap to the next line. Here's an exapmle of a title I'm using, "Abbreviations Used in this Manual".[br /][br /]Currently, it comes out like this:[br /][br /]Abbreviations[br /] Used in this[br /] Manual[br /][br /]Thanks

Rich Heyn Dec 15, 2008