Hi

I'm trying to create a mutiple/dynamic jump menu and am having problems working out how to do it.

eg.
Menu 1 could have A B & C
Menu 2 on Menu 1 having "B" selected, Menu 2 will show options X Y & Z
Menu 3 on Menu 2 having "Z" selected, Menu 3 will show options J K & L

So the user would select B, Z, L and then click Go and it would go to a particular page

Any help or sugestions would be appreciated. Thanks

Hi Ben,

Do you mean something like this?

<pre id=code><font face=courier size=2 id=code>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style type="text/css"&gt;
#menu {margin: 0px; padding: 0px;}
#menu li {margin: 0px; padding: 0px;}
#menu ul {display: none; margin: 0px 15px; padding: 0px 15px;}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
function operateMenu() {
var menu=document.getElementById('menu');
var Links=menu.getElementsByTagName('A');

for(var i=0; i&lt;Links.length; i++) {
Links[i].onclick=function() {
var Lists=this.parentNode.parentNode.getElementsByTagName('UL');

for(var j=0; j&lt;Lists.length; j++)
Lists[j].style.display='none';

if(this.nextSibling.nextSibling && this.nextSibling.nextSibling.tagName=='UL')
this.nextSibling.nextSibling.style.display='block';
}
}
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;ul id="menu"&gt;
&lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="#"&gt;Item 2&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Subitem 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="#"&gt;Subitem 2&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Sub-subitem 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Sub-subitem 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Sub-subitem 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Sub-subitem 4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Sub-subitem 5&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Sub-subitem 6&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Subitem 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;script type="text/javascript"&gt; operateMenu(); &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</font id=code></pre id=code>

Of course, this is just a quickly written template. You need to fill the the needed addresses noted by #

EDIT: Currently I have created drop down menu for Item2-&gt;Subitem2-&gt;Sub-subitem x, where x varies from 1 to 6. Feel free to implement it or modify the source - CSS, JSs, Menu, ect., Ben. <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>

Good luck

DMX Zones Support Team

Hi There

Thanks for your example. I probably should have been a bit more clear on what I was trying to achieve. I do find it had to describe though.

You would have 3 "drop down menus" and it would be very similar to the following site but with 3 instead of 2:

www.dlink.com.au/tech/

Selecting a menu item in the first drop down menu would populate a set of choices in the second drop down menu and again making a selection in the second manu would populate choices in the third menu. Once you have made your selection in the third menu you can click the "GO" button and it would take you to your page.

I'm not sure if this has made it clearer at all as to what I am trying to do.

Thanks for your help.