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:
<![CDATA[
<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>
]]>