sliding menu or delay menu

**phatnugs** · Aug 21, 2007, 06:20

Hi all, i've been racking my brain (which is has a limited capacity so please be patient) trying to figure this out. What i'd like is something similar to the slash dot menu (http://www.dynamicdrive.com/dynamicindex1/slashdot.htm). Basically i have a vertical menu that drops down to reveal sub menu items. Right now it's a little "jerky" to say the least. Basically i'd like it to either do a slow reveal on mouseover (i don't want a click reveal since the click needs to go somewhere) then a slow collapse on mouse out. Or another alternative would be a delay in the collapse on the mouse out. Any other suggestions on how to do this would be awesome. this is what i have so far. Right now it stays open on mouse out but it's still something that's not working right and a bit jerky when there are several sub menu items.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Untitled</title>

<style type="text/css">
#dlmenu {height:10em;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:200px; background:#ffcc66; z-index:100; font-weight: bold; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#ffcc66; color:#000000; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#ffcc66}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 200px; margin: 0; background: #ffcc66; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #000000;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
#menu li dt a:active, #menu li dt a:visited {margin: 0 0 10px; color:#00000;}

.gallery dt a, .gallery dt a:visited {display:block; color:#000000; padding:5px 5px 5px 10px; background:#ffcc66;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#ffcc66;}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#ffcc66; color:#993300;}

dt a, a:visted { color:#993300;}
</style>
<script>
var activeMenuParent = null; 
function setDisplay ( parent, display ) { 
 if ( ! parent ) return; // parent not set, do nothing 

 var els = parent.getElementsByTagName ( 'dd' ); 
 for ( var i = 0 ; i < els.length; i ++ ) 
   els[i].style.display = display; 

} 

function hideMenu ( parent ) { 
setDisplay ( parent, 'none' );
} 

function showMenu ( link ) { 
 hideMenu ( activeMenuParent ); // hide menu if showing 
 var parent = link.parentNode.parentNode; // a, dt, dl 
 setDisplay ( parent, 'block' ); 
 this.activeMenuParent = parent; 
} 
</script>
<body>

</head>


  <div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt onmouseover="showMenu(this)"><a href="#">Menu</a></dt>
	<dd><a href="#">SubMenu 1</a></dd>
	<dd><a href="#">SubMenu 2</a></dd>
	<dd><a href="#">SubMenu 3</a></dd>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
	<dt onmouseover="showMenu(this)"><a href="#">Menu 2</a></dt>
	<dd><a href="#">SubMenu 1</a></dd>
	<dd><a href="#">SubMenu 2</a></dd>
	<dd><a href="#">SubMenu 3</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>


  </body>
</html>

Thanks So much!
Mikey P

**Wildhoney** · Aug 21, 2007, 06:26

Would Scriptalicious be a good recommendation in this scenario?

The SitePoint Forums have moved.

User Tag List

Thread: sliding menu or delay menu

Thread Tools

Display

sliding menu or delay menu

Bookmarks

Bookmarks

Posting Permissions