New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Switch Menu

Author: Martial B | Homepage

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.

Demo: Click on below menu items.


Directions Developer's View

Step 1: Insert the below code to the <HEAD> of your page:

Select All

Step 2: And herein lies the HTML code for the menu itself. Add the below where you want the menu to appear on your page:

Select All

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.

Enjoy this fully DOMesticated script!