Advanced Search

Results 1 to 8 of 8

Thread: Smooth Navigation Menu Overlaping Items?

  1. #1
    Join Date
    May 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Smooth Navigation Menu Overlaping Items?

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


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

    3) Describe problem: The first item on my navigation bar seems to cover up the item to the right (and this continues to happen through the rest of my bar). The submenus are not effected though. I have this issue for all browsers, but things look fine when the capatability view is on in IE8.

    This is the first site I've ever built, so I'm pretty new to all of this. If I'm not making sense you can check out what I'm working on at http://webtest.meredith.edu/acp11/

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    I see two choices either of which appear to work.

    You have descending z-index values. If you make them ascending, that would work.

    You could do that. But simpler would be to remove all the z-index values and remove the width: 100% from here:

    Code:
    .ddsmoothmenu{
    font: bold 20px Century Gothic;
    background: #296DC1; /*background of menu bar (default state)*/
    width: 100%;
    }
    at the beginning of the ddsmoothmenu.css file.
    - 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:

    kohnency (05-27-2011)

  4. #3
    Join Date
    May 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks it worked!

  5. #4
    Join Date
    May 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Two more quick questions....is there a way to make the highlight smaller when I rollover "ACP Home"? The highlight goes all the way to the end of the navbar and I would like it to look more like the highlight on "Alumnae."

    Is there a way to make the submenu a different color? (For example after hovering on student>academic planning & support I would like the menu with "new student" "current student" etc. to be a different color.

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    First question, I'm not seeing it. Which browser?

    Second question, add the highlighted as shown in the ddsmoothmenu.css file:

    Code:
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .ddsmoothmenu ul li ul li ul{
    top: 0;
    }
    
    /* Sub level menu links style */
    .ddsmoothmenu ul li ul li a{
    font: normal 12px Century Gothic;
    width: 160px; /*width of sub menus*/ 
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 0px solid gray;
    }
    
    /*All subsequent sub menu levels link styles after 1st level sub menu */
    .ddsmoothmenu ul li ul li ul a {
    background-color: red;
    }
    
    /* Holly Hack for IE \*/
    * html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
    
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    .downarrowclass{
    position: absol . . .
    You may use any valid css color value in place of red. Within reason you may add other property value pairs there for those links.
    - John
    ________________________

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

  7. #6
    Join Date
    May 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    In IE8 and Firefox the light blue highlight on "ACP Home" goes all the way off the dark blue nav bar.

    Thanks for the code!

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    I just tested the webtest.meredith.edu/acp11/ page in Firefox 4.0.1 and in IE 8. Still not happening here.

    However both browsers throw an error on:

    Code:
    <script type="text/javascript">
    //Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
    
    dropdowncontent.init("searchlink", "right-bottom", 500, "mouseover")
    dropdowncontent.init("contentlink", "left-top", 300, "click")
    
    </script>
    I think that's left over from a script you are no longer using. If so, get rid of it.

    You should also get rid of this:

    Code:
    ddsmoothmenu.init({
    	mainmenuid: "smoothmenu2", //Menu DIV id
    	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
    	classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
    	//customtheme: ["#804000", "#482400"],
    	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
    You're not using it. You only have the one ddsmoothmenu, the one with the mainmenuid of smoothmenu1.

    Both browsers are throwing an error on it:

    Error: $mainmenu.parent().get(0) is undefined
    Source File: webtest.meredith.edu/acp11/ddsmoothmenu.js
    Line: 52
    Hard to track back to that, but that's what's causing it.
    Last edited by jscheuer1; 05-31-2011 at 03:18 PM.
    - John
    ________________________

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

  9. #8
    Join Date
    May 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    alrighty...thanks!

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
  •