|
|
Hello!
I've got this menu that I like, but I want to add sume functionality to it... a delay. The delay shold be activated when moving out of the submenu section (Link 1, 2 etc...), i.e. the links shold not just disapear instantly, but linger a while before disapearing.
How can I add some event handling to the code I have below? I assume I will have to use something like onmouseover / out.... but it's hard to know exactly how....
Any ideas?
Thnx!
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>CSS-Menu</title>
<style type="text/css">
html, body { background-color:#faf9f2; margin:0; padding:0; }
h4 { font-family:Verdana, Arial, Helvetica, sans-serif; padding:20px; margin:0; }
#menu_container { width:100%; height:20px; color:red; background-color:#d1e0ac; border-top:1px solid #55523f; border-bottom:1px solid #55523f; position:absolute; top:80px; }
#menu { width:580px; position:absolute; left:50%; margin:-1px auto auto -275px; }
#menu ul { list-style:none; margin:0; padding:0; float:left; position:relative; }
#menu ul li { position:relative; }
#menu ul ul { display:none; }
#menu ul ul li { margin-top:-1px; }
#menu ul ul ul { margin-top:-21px; position:absolute; left:109px; }
#menu .head { width:110px; font-weight:bold; text-align:center; border-top:1px solid #55523f; border-bottom:1px solid #55523f; }
#menu .angle_quot { font-weight:bold; line-height:13px; cursor:pointer; position:absolute; right:2px; }
#menu table { float:left; border-collapse:collapse; }
#menu table table { margin-top:-1px; margin-bottom:-1px; }
#menu .group { position:relative; left:-17px; margin-right:-18px; line-height:0; }
#menu .group a { width: 108px; }
#menu .group ul { left:109px; top:22px; }
#menu a { font:12px/20px Verdana, Arial, Helvetica, sans-serif; color:#585858; text-decoration:none; background-color:#d1e0ac; display:block; }
#menu ul ul a { width:108px; text-indent:5px; border:1px solid #55523f; }
#menu li:hover a, #menu a:hover a { color:#55523f; background-color:#b6cb7b; }
#menu li:hover ul, #menu a:hover, #menu a:hover ul { display:block; color:#363636; background-color:#55523f; }
#menu li:hover ul a, #menu a:hover ul ul a { color:#363636; background-color:#ede8e2; position:relative; }
#menu li:hover ul ul, #menu a:hover ul ul ul { display:none; }
#menu li:hover ul a:hover, #menu a:hover ul ul a:hover { color:#363636; background-color:#f6d687; }
#menu ul ul li:hover ul, #menu a:hover ul li ul a:hover ul { display:block; color:#363636; background-color:#55523f; }
/* 3rd level */
#menu li:hover ul ul ul, #menu a:hover ul ul a:hover ul ul { display:none; }
#menu ul ul ul li:hover ul, #menu a:hover ul ul ul a:hover ul { display:block; }
/* 4th level */
#menu li:hover ul ul ul ul, #menu a:hover ul ul a:hover ul a:hover ul ul { display:none; }
#menu ul ul ul ul li:hover ul, #menu a:hover ul ul a:hover ul ul a:hover ul { display:block; }
/* expand left */
#menu ul ul .t_left { left:-109px; }
-->
</style>
</head>
<body>
<div id="menu_container">
<div id="menu">
<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0"><tr><td><![endif]-->
<ul id="menuname">
<li><a href="#" class="head">Headline</a>
<ul>
<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0" class="group"><tr><td><![endif]-->
<li><a href="#">Link 1<span class="angle_quot">»</span></a>
<ul>
<li><a href="#">UnderLink 1</a></li>
<li><a href="#">UnderLink 2</a></li>
<li><a href="#">UnderLink 3</a></li>
</ul>
</li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#">Link 2</a></li>
<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0" class="group"><tr><td><![endif]-->
<li><a href="#">Level 1<span class="angle_quot">»</span></a>
<ul>
<li><a href="#">UnderLink 1</a></li>
<li><a href="#">UnderLink 2</a></li>
<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0" class="group"><tr><td><![endif]-->
<li><a href="#">Level 2<span class="angle_quot">»</span></a>
<ul>
<li><a href="#">UnderLink 1</a></li>
<!--[if lte IE 6]><a href="#"><table cellpadding="0" cellspacing="0" class="group"><tr><td><![endif]-->
<li><a href="#">Level 3<span class="angle_quot">»</span></a>
<ul>
<li><a href="#">4th level</a></li>
<li><a href="#">4th level</a></li>
</ul>
</li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#">UnderLink 3</a></li>
</ul>
</li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#">UnderLink 4</a></li>
<li><a href="#">UnderLink 5</a></li>
</ul>
</li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</div>
<br>
<br>
</body></html>
|
|
|
|
|
|
|
|
|
|
BabySnake
