How to create dynamic two-level menu

Space is precious, and two-level menus or directories are more easy to read. So how to show two-level menu and open second-level menu "on demand"? Guess... yep, that's easy too. Simply put, make two images for each first-level menu item. One image for just first-level menu item, and second one for expanded submenu. Like
and
You will have only first level menu items, each one represented with a short image. After that add onClick reaction for each menu item to replace it dynmamically with expanded one. And the last but not least, provide image map for each menu item. This way when expanded, submenu items will be links to whatever pages you want. And don't forget to close other items in menu, or you will end up with several expanded items.

Notice, please, that there is no HTML pages submenuXX.wrong.html on this site, so this example points out nowhere. Just place your correct html links there (and your images as well). Don't forget to compress your images, using GifWizard, you can get 100-200 bytes images, which is very reasonable.

And here is an example:


Click on any "Menu X" below:



And here is the code to implement this:

<script language="JavaScript"> var menus; function contract(n) { var i; for ( i=0; i<menus.length; i++ ) menus[i].src = 'menu'+(i+1)+(i==n?'.gif':'x.gif'); } </script> ... <map name=test1> <area shape=rect coords="0,16,70,28" href="submenu11.wrong.html"> <area shape=rect coords="0,29,70,42" href="submenu12.wrong.html"> <area shape=rect coords="0,43,70,56" href="submenu13.wrong.html"> </map> <map name=test2> <area shape=rect coords="0,16,70,28" href="submenu21.wrong.html"> <area shape=rect coords="0,29,70,42" href="submenu22.wrong.html"> <area shape=rect coords="0,43,70,56" href="submenu23.wrong.html"> </map> <map name=test3> <area shape=rect coords="0,16,70,28" href="submenu31.wrong.html"> <area shape=rect coords="0,29,70,42" href="submenu32.wrong.html"> <area shape=rect coords="0,43,70,56" href="submenu33.wrong.html"> </map> ... <br><img name=menu1 src=menu1x.gif usemap=#test1 onClick="contract(0);" border=0> <br><img name=menu2 src=menu2x.gif usemap=#test2 onClick="contract(1);" border=0> <br><img name=menu3 src=menu3x.gif usemap=#test3 onClick="contract(2);" border=0> <script language="JavaScript"> menus = new Array ( document.menu1, document.menu2, document.menu3 ); </script>