Results 1 to 5 of 5

Thread: Help with modified All Levels Menu hover state

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

    Default Help with modified All Levels Menu hover state

    I've decided to use images for the top bar in this script. The images are stacked (or sliding images). I've gotten their hover states to work properly, but can't figure out how to maintain their "on" state while hovering over the sub items.

    TopBar CSS:
    Code:
    .topbar ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-bottom: 0;
    background: #fff;
    overflow: hidden;
    width: 100%;
    }
    
    .topbar li{
    display: inline;
    margin: 0;
    }
    
    .topbar li {float:left;}
    .topbar li a {display:block; float:left; height:50px;}
    .topbar li a b {position:absolute; left:-9999px;}
    
    .topbar li a#products {width:162px; background:url(/images/topNav/products.gif);}
    .topbar li a#downloads {width:162px; background:url(/images/topNav/downloads.gif);}
    .topbar li a#support {width:163px; background:url(/images/topNav/support.gif);}
    .topbar li a#compliance {width:163px; background:url(/images/topNav/compliance.gif);}
    .topbar li a#partners {width:163px; background:url(/images/topNav/partners.gif);}
    .topbar li a#company {width:167px; background:url(/images/topNav/company.gif);}
    
    .topbar li a#products:hover,
    .topbar li a#downloads:hover,
    .topbar li a#support:hover,
    .topbar li a#compliance:hover,
    .topbar li a#partners:hover,
    .topbar li a#company:hover
    {background-position:left bottom; visibility:visible; position:relative; z-index:20;}
    
    .topbar li:hover {position:relative; z-index:20;}
    
    .topbar li:hover > a#products,
    .topbar li:hover > a#downloads,
    .topbar li:hover > a#support,
    .topbar li:hover > a#compliance,
    .topbar li:hover > a#partners,
    .topbar li:hover > a#company
    {background-position: left bottom;}
    
    .topbar a.selected{
    font-size: 16px;
    font-family: sans-serif;
    font-weight: normal;
    color: #000;
    background: #fff; 
    text-decoration: none;
    }
    Base CSS:
    Code:
    .ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
    font-weight: bold; 
    color: #7c7c7c;
    font-family: arial, sans-serif; 
    font-size: 10px; 
    white-space: nowrap; 
    text-decoration: none;
    /*font: normal 13px Verdana;   */
    margin: 0;
    padding: 0 8px 0 8px;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px #c9d2e3 solid;
    visibility: hidden;
    z-index: 100;
    }
    
    
    .ddsubmenustyle li a{
    display: block;
    width: 150px;
    height:22px; line-height:22px;
    color: #7c7c7c;
    font-weight: bold;
    background-color: #fff;
    text-decoration: none;
    padding: 4px 5px 4px 8px;
    border-bottom: 1px solid #c9d2e3;
    }
    
    * html .ddsubmenustyle li a{ /*IE6 CSS hack*/
    display: inline-block;
    }
    
    .ddsubmenustyle li a:hover{
    background-color: #fff;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    padding: 4px 5px 4px 8px;
    border-bottom: 1px solid #c9d2e3;
    height:22px; line-height:22px;
    }
    
    
    /* ######### Neutral CSS  ######### */
    
    .downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
    visibility:hidden;
    padding-left: 4px;
    border: 0;
    }
    
    .rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    right: 6px;
    border: 0;
    }
    
    .ddiframeshim{
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
    }
    Last edited by ddadmin; 07-25-2008 at 10:40 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Well, during the selected state, the script adds a CSS class of ".selected" to the primary menu item's A element (not the outer LI element). That's the extent in which you can modify how the selected state appears. Looking at your CSS, since you're using the sliding door's technique of changing both the A and LI background of the menu item onMouseover, the ".selected" class can't reach the LI element unfortunately.

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

    silverbob (07-25-2008)

  4. #3
    Join Date
    Jul 2008
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks. I split them up into separate images and now it works.

    Code:
    .topbar li a#products {width:162px; background:url(/images/topNav/productsOFF.gif);}
    .topbar li a#downloads {width:162px; background:url(/images/topNav/downloadsOFF.gif);}
    .topbar li a#support {width:163px; background:url(/images/topNav/supportOFF.gif);}
    .topbar li a#compliance {width:163px; background:url(/images/topNav/complianceOFF.gif);}
    .topbar li a#partners {width:163px; background:url(/images/topNav/partnersOFF.gif);}
    .topbar li a#company {width:167px; background:url(/images/topNav/companyOFF.gif);}
    
    .topbar li a#products.selected {width:162px; background:url(/images/topNav/productsON.gif);}
    .topbar li a#downloads.selected {width:162px; background:url(/images/topNav/downloadsON.gif);}
    .topbar li a#support.selected {width:163px; background:url(/images/topNav/supportON.gif);}
    .topbar li a#compliance.selected {width:163px; background:url(/images/topNav/complianceON.gif);}
    .topbar li a#partners.selected {width:163px; background:url(/images/topNav/partnersON.gif);}
    .topbar li a#company.selected {width:167px; background:url(/images/topNav/companyON.gif);}

  5. #4
    Join Date
    Jul 2008
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Is there a way to have the top-level item, and the sub item, both continue to be selected after moving to the selected page? Sort of like bread crumbs, but the menu shows where you are at.

    I suppose I could create a new style for .ddsubmenustyle li a.selected which mimics the hover state, but then I would have to modify the HTML on each page. It would be better to do this with the script.

  6. #5
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Hmm there's no easy way to do this right now unfortunately. It's something I may add to the script's features down the road.

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
  •