JavaScript Multi-level Navigation Menu with States-Remember

This JavaScript code example will create a multi-level navigation menu on your web pages (in the live demo of this JavaScript code example, we have 3 levels; and obviously you can add as many levels as you want).

The advantages of this JavaScript code example are in following good ideas: just one root of menus opened at the same time; besides, this JavaScript menu navigation script uses cookie to store the states of menus, they will keep the old states every time the web pages will be refreshed.

Sampled by ©


Each collapsible link has 2 DIV tags, one is the main link that opens or closes the collapsible links and the other is for the collapsible links. In the first DIV tag the text [onClick="openClose('MN',mainNum,'a1')" class="main"] should not be changed and in the second DIV tag the text [id="a1" class="sublinks"] is required. As you add more collapsible links the identifier 'a1' should be incremented for all new links in both DIV tags, for example a2 for link 2, a3 for link 3 etc. Also for each collapsible link there is a SPAN tag that changes the + sign to - when the menu is expanded. For each SPAN tag also there is text (id="tick_a1"). This identifier also needs to be changed by matching the identifier 'a1' to the DIV identifier.

Each group of sub-links under each main link also should have text [openClose('SB',subNum1,'b1')" class="main"]. The text [subNum1] should also be incremented with each main link. For example for the main link a1, the sub-links should be ['SB',subNum1,'b1'], ['SB',subNum1,'b2'] etc. and for main link a2, the sub-link should be ['SB',subNum2,'c1'], ['SB',subNum2,'c2'] etc.

Everything else can be modified as per your requirements. Lastly, you can get rid of these comments in your documents.

2000+ free JavaScripts