Dropdown HTML Control - More Than 1 Menu on a Page

[kittentaboo]

1) Script Title: Dropdown HTML Control

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/dropdowncontrol.htm

3) Describe problem:

I'd like to know how to create more than one menu on a page using this script. Someone already asked on this thread:

http://www.dynamicdrive.com/forums/showthread.php?t=7833&highlight=dropdown+html+control

There doesn't seem to be an answer to the question though. I've tried reusing the ID "menu_parent" in a second menu, and that doesn't seem to work. I don't know if I can just duplicate and rename some function in the code to create a second menu...? I don't know enough about JS to figure it out on my own.

My goal is to have three separate drop down menus on one page with a different color scheme for each one. Or if someone knows where I can find a script that would achieve this, that'd be great!

[kittentaboo]

I found a "Good Enough" solution to my question.

I used the AnyLink Drop Down Menu instead:

http://dynamicdrive.com/dynamicindex1/dropmenuindex.htm

And added a DIV tag around my links:

//Contents for Tribal Leaders
var menu1=new Array()
menu1[0]='<div style="background-color:#7f243d"><a style="color: #ffffff; text-decoration: none;" href="#">Link 1</a></div>'
menu1[1]='<div style="background-color:#7f243d"><a style="color: #ffffff; text-decoration: none;" href="#">Link 2</a></div>'
menu1[2]='<div style="background-color:#7f243d"><a style="color: #ffffff; text-decoration: none;" href="#">Link 3</a></div>'
menu1[3]='<div style="background-color:#7f243d"><a style="color: #ffffff; text-decoration: none;" href="#">Link 4</a></div>'

This is how I specified a different background color for each of my three menus. I don't know how to do multiple rollover background colors though, so I chose a color that works with all three menus: Black.

I'm not the best coder, so I'm not sure if this solution is the best available. But it works in FF, IE, Mac, and PC, so I'm content. I wanted to post what I did in case it might help someone else.

[gordytuf]

I found a "Good Enough" solution to my question.

I used the AnyLink Drop Down Menu instead:

http://dynamicdrive.com/dynamicindex1/dropmenuindex.htm

And added a DIV tag around my links:

//Contents for Tribal Leaders
var menu1=new Array()
menu1[0]='<div style="background-color:#7f243d"><a style="color: #ffffff; text-decoration: none;" href="#">Link 1</a></div>'
menu1[1]='<div style="background-color:#7f243d"><a style="color: #ffffff; text-decoration: none;" href="#">Link 2</a></div>'
menu1[2]='<div style="background-color:#7f243d"><a style="color: #ffffff; text-decoration: none;" href="#">Link 3</a></div>'
menu1[3]='<div style="background-color:#7f243d"><a style="color: #ffffff; text-decoration: none;" href="#">Link 4</a></div>'

This is how I specified a different background color for each of my three menus. I don't know how to do multiple rollover background colors though, so I chose a color that works with all three menus: Black.

I'm not the best coder, so I'm not sure if this solution is the best available. But it works in FF, IE, Mac, and PC, so I'm content. I wanted to post what I did in case it might help someone else.
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
A Newby..... I am using the same menu as you and I cannot get the 2nd menu to work as you have done ....I would like to see 4 different menus on the side bar and managed to do this but when i fill in the first menu.... say "Product" on the first line all the menus show "Product" can any body help please cheers Gordy

[ddadmin]

Regarding Dropdown HTML Control (http://dynamicdrive.com/dynamicindex1/dropdowncontrol.htm), actually, the thread you cited does contain an answer. In it John was stressing the point that two or more controls is certainly possible, as even in the demo, there's 2 already! :) The key is that the IDs used in each instance is unique. For example:


<div id="menu_parent" class="sample_attach">
Main Menu
</div>
<div id="menu_child" style="position: absolute; visibility: hidden;">
<a class="sample_attach" href="#">Item 1</a>
<a class="sample_attach" href="#">Item 2</a>
<a class="sample_attach" style="border-bottom: 1px solid black;" href="#">Item 3</a>
</div>

<script type="text/javascript">
at_attach("menu_parent", "menu_child", "hover", "y", "pointer");
</script>

<br /><br /><br /><br />

<!-- Search Form -->

<div class="sample_attach" id="src_parent">
Site Search
</div>
<form class="sample_attach" id="src_child" action="dropdown.php">
<b>Enter search terms:</b><br />
<input style="margin-bottom: 1px; width: 170px;" type="text" name="terms" />
<center><input type="submit" value="Submit" /></center>
</form>

<script type="text/javascript">
at_attach("src_parent", "src_child", "click", "x", "pointer");
</script>

</body>
</html>

Here the IDs in red and green are two separate sets of IDs, which need to be unique.

Regarding getting a script like Anylink Menu to have multiple styles for multiple drop downs, the easiest way is actually to use Anylink CSS Menu (http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm). As shown in the demo, 2 different styles are used already for the 2 drop downs.