Multiple Smooth Navigational Menus on One Page?

[AlltheShadesofGrey]

1) Script Title: Smooth Navigational Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: I'm trying to put two of these on one page. But I just can't quite get it to work and the second one keeps appearing (when it DOES actually show up) in strange places. Is there a way to put two of these on the same page? I'm really hoping so, I just haven't been able to figure out how to do it! So much thanks to anyone who is able to help!

EDIT: I forgot to mention that I'm using this script in the way to where it is fetching the content from an external file (ie "navigation.html") so the actual HTML isn't on the page.

[AlltheShadesofGrey]

Maybe it will help if I provide a link to what I'm having trouble with. Here's an example of a page I'm trying to put two of the menus on: http://explore.alltheshadesofgrey.ne...on5/511-2.html

The one at the very top is working beautifully, but the second one is supposed to be next to the image that reads "Wish You Were Here." It is there, but it isn't showing up like it is supposed to!

[ddadmin]

The key is simply to call the initialization code multiple times:

ddsmoothmenu.init({
mainmenuid: "smoothmenu-ajax",
customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]
contentsource: ["smoothcontainer", "smoothmenu.htm"] //"markup" or ["container_id", "path_to_menu_file"]
})

Where the code in red is unique for each instance of the menu. Make sure the corresponding empty DIV is defined on the page as well.

You shouldn't be embeding multiple copies of the code in the HEAD section of your page, ie this portion:

<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css">
<!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
  <script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <script type="text/javascript" src="ddsmoothmenu.js">

/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

  </script>

Remove the duplicate copy. FYI if you view the script page, there are two Smooth Menus running on the page already. View source to get a better idea of how the two instances are called.

[AlltheShadesofGrey]

Thanks so much for the help! So, while I've got that whole issue figured out, there's still something strange going on as it looks like when it inserts and loads the menu, it puts the menu in a new layer/div within the layer/div it is supposed to appear in. I've gone through all of the code many times, and I just can't figure out why it is doing this, because the menu is there so I know I'm close to getting it to work! http://explore.alltheshadesofgrey.ne...on5/511-2.html

[ddadmin]

Hmmm the only error I pick up right now at a glance appears in the code in red below:

<script type="text/javascript">
ddsmoothmenu.init({ mainmenuid: "s5navigation-ajax", //menu DIV id
contentsource: ["Layer3",
"http://explore.alltheshadesofgrey.net/season5/s5navigation.html"]
//"markup" or ["container_id", "path_to_menu_file"]
})
</script>

You should not use an absolute URL to the external file, but a relative one from the current page such as:

s5navigation.html

Other than that if it still doesn't work, try creating a fresh page with just Smooth Menu on it, verifies that it works, then slowly add back the rest of your page's contents to see if something else is the culprit here.

[terrychi]

I had this problem too, thank you admin.