TIP - To keep your main (html) - page neat and easy to read, you can put the head or body javascript into an external .js file (minus html tags) and reference it from your page thus -
<script language="JavaScript1.2" src="MY.js"type="text/javascript"></script>



- What's New
- What's hot
- Revised Scripts
- More Zone
- Usage Terms
- DHTML FAQs
- Scripts FAQs
Coding Forums


Right-click - 'select all' (ctrl-a) then copy (ctrl-c) and paste to 'HEAD' of your page.




Right-click - 'select all' (ctrl-a) then copy (ctrl-c) and paste to 'BODY' of your page.




Note: Modified Jan 21st, 04' by DD. Added "sitewide" and "local" cookie persistence feature.
Description: Switch Menu is a unique navigational script with characteristics of a folding tree. It dynamically expands the chosen menu item when clicked on while contracting the rest. This script is DOM based, so it works in IE5/NS6/Opera7+ while degrading well with older browsers such as IE4/NS4. For the later the menu will appear fully expanded from the start.
New: Switch Menu now supports persistence (so it remembers which menu item was last expanded) whenever you revisit the page. To sweeten the deal, you can choose between "sitewide" and "local" persistence, with the former remembering the menu state across your entire site. This is useful if you have the exact same Switch Menu script on multiple pages on your site (ie: as a navigational bar), and it makes sense for the persistence to last from page to page.
Customization So you're now wondering how flexible the script is when it comes to customizing the menu to your liking. The good news is, quite.
Physical changes (adding/deleting items) to the menu are all done in the code of Step 2. Study it for a while, and you'll soon see the required structure. All menu items must be added within the "masterdiv' DIV. For each item, wrap the containing links in a SPAN tag with a unique incrementing ID starting with "sub1", (ie: "sub1", "sub2" etc), and use this ID within the onClick event handler to expand/contract it. As you can see in the demo, an image can be used for the menu item itself instead of plain text.
To make cosmetic changes to the menu, it is recommended you do so via CSS, by editing the style sheet of Step 1.