Results 1 to 4 of 4

Thread: Multiple Smooth Navigational Menus

  1. #1
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Multiple Smooth Navigational Menus

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    .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:

    Code:
    #smoothmenu1 ul {
    z-index:101!important;
    }
    That will make it cover the second menu.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    hktotoro (12-28-2008)

  4. #3
    Join Date
    Dec 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you very John. It works after putting the
    Code:
    #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/

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    //** 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 . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •