...

View Full Version : Is this possible?



DDmUSA
02-16-2007, 01:03 PM
I am working with the script on this page:
http://javascriptkit.com/script/script2/verticalmenu.shtml

Using this script, I went ahead and modified the CSS and the JS file, in order to have the sub menus appear with a one pixel right offset from the top level.

When I move the mouse slowly from the top level to the sub level, the sub level disappears. If the sub level is touching the top level, without the one pixel offset, the sub level does not disappear. I would like to have the sub level appear with a one pixel ofset to the right of the top level.

Is it possible to keep the sub level from disappearing while the mouse is moving across the one pixel difference?

vwphillips
02-16-2007, 04:07 PM
will need to see your modifications

DDmUSA
02-19-2007, 05:32 PM
Please educate me on any modifications available to allow the sub menu to remain visible while the mouse pointer is being moved across a one or more pixel offset.


The initial JS script file is as follows:

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-11 //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)


The initial CSS file is as follows:

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 0px solid black;
}

.glossymenu li{
position: relative;
left: 12;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 215px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}

.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 10px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 6px 0;
padding-left: 3px;
text-decoration: none;
}

.glossymenu .arrowdiv{
position: absolute;
right: 1px;
font: bold 12px Verdana, Helvetica, sans-serif;
background: transparent url(arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum