Member Avatar for lifeworks

Hi

I have the following CSS menu, which uses a js to create the menu on Mouseover... I want to add a delay onMouseOut... I have tried the setTimeout function, but am having some trouble getting it to work... the submenu just stays out...

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset= 0 //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)
  • 3 Contributors
  • 4 Replies
  • 252 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by nav33n
Member Avatar for serkan sendur

if you can provide the working html page that i can copy and paste and run, i can help you with this problem, i remember doing the same thing last year.

Member Avatar for lifeworks 
<html>
<head>
<title>Menu Test</title>

<script language="Javascript" type="javascript/text">
	var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
	var submenuoffset= 0 //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)
</script>

<style type="text/css">
	.glossymenu, .glossymenu li ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 191px; /*WIDTH OF MAIN MENU ITEMS*/
	
	position: relative;
	z-index: 1000;
	}
	
	.glossymenu li{
	position: relative;
	}
	
	.glossymenu li a{
	display: block;
	
	width: 191px;
	
	padding: 0px 0px 5px 15px;
	margin: 5px 0px 0px 0px;
	
	border-style: dotted;
	border-color: #acacac;
	border-width: 0px 0px 1px 0px;
	
	color: #000000;
	text-decoration: none;
	font-size: 10px;
	}
	
	.glossymenu li a#blue_highlight
	{
	color: #00aeef;
	}
	
	.glossymenu li a#grey
	{
	color: #878787;
	}
	
	.glossymenu li ul{ /*SUB MENU STYLE*/
	position: absolute;
	width: 191px; /*WIDTH OF SUB MENU ITEMS*/
	left: 0;
	top: 0;
	display: none;
	}
	
	.glossymenu li ul li{
	float: left;
	}
	
	.glossymenu li ul a{
	width: 191px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
	
	display: block;
	float: left;
	
	padding: 5px 10px 5px 0px;
	margin: 0px 0px 0px 0px;
	
	border-style: dotted;
	border-color: #acacac;
	border-width: 0px 0px 1px 0px;
	
	background-color: #333333;
	
	color: #ffffff;
	text-decoration: none;
	font-size: 10px;
	
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	
	text-align: right;
	}
	
	.glossymenu .arrowdiv{
	position: absolute;
	right: 2px;
	}
	
	.glossymenu li a:active{
	color: #000000;
	}
	
	
	.glossymenu li a:hover{
	color: #00aeef;
	}
	
	/* Holly Hack for IE \*/
	* html .glossymenu li { float: left; height: 1%; }
	* html .glossymenu li a { height: 1%; }
	/* End */
</style>
</head>
<body>

	<!-- main menu -->
	<ul id="verticalmenu" class="glossymenu">
					<li><a href="index.php" >HOME</a>
					<li><a href="about.php" >ABOUT US</a>
					<li><a href="services.php" >SERVICES</a>
						<!-- sub menu -->
						<ul>
						<li><a href="project_temp.php">Option 1</a></li>
						<li><a href="project_temp.php">Option 2</a></li>
						<li><a href="project_temp.php">Option 3</a></li>
						<li><a href="project_temp.php">Option 4</a></li>
						</ul>					
						
					<li><a href="projects.php" >PROJECTS</a>
						<!-- sub menu -->
						<ul>
						<li><a href="project_temp.php">Option 1</a></li>
						<li><a href="project_temp.php">Option 2</a></li>
						<li><a href="project_temp.php">Option 3</a></li>
						<li><a href="project_temp.php">Option 4</a></li>
						</ul>

					<li><a href="reports.php" >REPORTS</a>
					<li><a href="gallery.php" >GALLERY</a>
					<li><a href="links.php" >LINKS</a>
					<li><a href="contact.php" >CONTACT US</a>
				
	</ul>




</body>
</html>
Member Avatar for serkan sendur

i run your webpage but i didnt see any sub menus opening.

Member Avatar for nav33n

the submenu just stays out...

I tried your code and it works perfectly ! The only thing I changed was,

<script language="Javascript" type="text/javascript">

which earlier was,

<script language="Javascript" type="javascript/text">

I haven't seen anyone using javascript/text :-/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.