...

View Full Version : CSS Vertical Selected Menu/Sub Menu Style



CrochetOwl
05-07-2009, 06:23 PM
Hi,

I am using the CSS Vertical code for my web pages (http://javascriptkit.com/script/script2/verticalmenu.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:


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:


.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

abduraooft
05-08-2009, 10:44 AM
Try something like

.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);
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum