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/dynamicindex...owncontrol.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/s...n+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/dynamici...pmenuindex.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, 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. As shown in the demo, 2 different styles are used already for the 2 drop downs.