Multiple Smooth Navigational Menus

[hktotoro]

1) Script Title: Smooth Navigational Menu (v1.01)

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

3) Describe problem: Is that possible to have more than one of Smooth Navigational Menu on the same page? I tried but the drop down always behind the second menu.

Thank you very much

[jscheuer1]

Well, obviously it is possible, the demo page has at least two menus on it. And you have two, they are just too close together.

Now that should be able to be worked out. What controls how elements overlap on a web page? It's the z-index style property. These menus have a z-index of 100 (from ddsmoothmenu.css):

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

Also if one element comes after another on the page, and they both have the same z-index, the later element will cover the earlier one. That's what is currently happening on your page.

Fortunately, each menu has its own id, so we can play with the z-index values a little. Let's say the first menu has an id of smoothmenu1. Then we can add to the ddsmoothmenu.css file the following rule:

#smoothmenu1 ul {
z-index:101!important;
}

That will make it cover the second menu.

[hktotoro]

Thank you very John. It works after putting the

#smoothmenu1 ul li{
z-index:101!important;}

but another problem pops up. When the mouse over the second menu and move away, it left a think grey line from the second menu. This problem only appears on IE. FF works fine.
URL: http://www.gadgetspl.com/

[jscheuer1]

I'm not seeing that, the line does linger for a brief period, but it doesn't stay around long enough to bother anyone, except maybe you. The developer is always more sensitive to these sorts of things than is the end user.

Now, that's not to say it should do that. In fact this is a bug of sorts with this menu (see the bug report):

http://www.dynamicdrive.com/forums/s...ad.php?t=39177

and you will see that it gets much worse with a 3rd level sub menu.

The solution for now is to turn off the shadow. If this is only a problem for you in IE, we can turn it off just for that browser:

//** Smooth Navigational Menu- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//** Menu created: Nov 12, 2008

//** Dec 12th, 08" (v1.01): Fixed Shadow issue when multiple LIs within the same UL (level) contain sub menus: http://www.dynamicdrive.com/forums/showthread.php?t=39177&highlight=smooth

var ddsmoothmenu={

//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']},

transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enabled:true, offsetx:5, offsety:5},

/*@cc_on @*/
/*@if(@_jscript_version >= 5)
shadow: {enabled:false},
@end @*/

///////Stop configuring beyond here///////////////////////////

detectwebkit: navigator.userAgent.toLowerCase().inde . . .