SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: sliding menu or delay menu
-
Aug 21, 2007, 06:20 #1
- Join Date
- Jul 2006
- Location
- Nashvegas
- Posts
- 17
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
sliding menu or delay menu
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>
Mikey P--
Mikey P
-
Aug 21, 2007, 06:26 #2
- Join Date
- Apr 2006
- Location
- Nottingham
- Posts
- 246
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Would Scriptalicious be a good recommendation in this scenario?
Bookmarks