Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Vertical Selected Menu/Sub Menu Style

    Hi,

    I am using the CSS Vertical code for my web pages (http://javascriptkit.com/script/scri...icalmenu.shtml). Everything works as it should but what I would like to be able to do is when a person hovers over a submenu item, the menu that it is associated with remains in the hover style that I assigned to it.

    I use three backgrounds: One for the menu (glossyback.gif), one for hover (glossyback_hover.gif), and one for submenu (glossyback_hover2.gif)

    Example:

    Menu1
    Submenu item1
    Submenu item2

    Menu2 (hover color red remains)
    Submenu item1 (hover color red)
    Submenu item2

    Menu3

    -------------------------

    js code:
    Code:
    var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
    var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.
    
    function createcssmenu(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
        var spanref=document.createElement("span")
    		spanref.className="arrowdiv"
    		spanref.innerHTML="&nbsp;&nbsp;"
    		ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
        this.getElementsByTagName("ul")[0].style.display="block"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none"
        }
        }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", createcssmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", createcssmenu)
    css code:
    Code:
    .glossymenu, .glossymenu li ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 225px; /*WIDTH OF MAIN MENU ITEMS*/
    z-index: 2;
    border: 0px
    }
    
    .glossymenu li{
    position: relative;
    z-index: 2;
    }
    
    .glossymenu li a{
    background: #009A9C url(/images/cssverticalmenu/glossyback.gif) repeat-x bottom left;
    font: bold 11px Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: auto;
    padding: 5px 0;
    padding-left: 10px;
    text-decoration: none;
    }
    
    .glossymenu li ul{ /*SUB MENU STYLE*/
    position: absolute;
    z-index: 2;
    width: 200px; /*WIDTH OF SUB MENU ITEMS*/
    left: 0;
    top: 0;
    display: none;
    }
    
    .glossymenu li ul li{
    float: left;
    }
    
    .glossymenu li ul a{
    background-image: url(/images/cssverticalmenu/glossyback_hover2.gif);
    font: bold 10px Arial;
    color: white;
    width: 210px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
    }
    
    .glossymenu li ul a:visited, .glossymenu li a:active{
    color: white;
    }
    
    .glossymenu .arrowdiv{
    position: absolute;
    z-index: 2;
    right: 2px;
    background: transparent url(/images/cssverticalmenu/arrow.gif) no-repeat center right;
    }
    
    .glossymenu li a:visited, .glossymenu li a:active{
    color: white;
    }
    
    .glossymenu li a:hover{
    background-image: url(/images/cssverticalmenu/glossyback_hover.gif);
    }
    
    
    /* Holly Hack for IE \*/
    * html .glossymenu li { float: left; height: 1%; }
    * html .glossymenu li a { height: 1%; }
    /* End */
    From what I can gather, both the js and the css would need to be adjusted but I am a notive in this area (particularly with js). Any assistance would be appreciated.

    Thanks

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try something like
    Code:
    .glossymenu li{
    position: relative;
    background:white url(glossyback.gif) repeat-x
    }
    
    .glossymenu li a{
    /*background: white url(glossyback.gif) repeat-x bottom left;*/
    font: bold 12px Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    width: auto;
    padding: 5px 0;
    padding-left: 10px;
    text-decoration: none;
    }
    .glossymenu li a:hover{
    /*background-image: url(glossyback2.gif);*/
    }
    .glossymenu li:hover{
    background-image: url(glossyback2.gif);
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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