SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member phatnugs's Avatar
    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>
    Thanks So much!
    Mikey P
    --
    Mikey P

  2. #2
    SitePoint Addict Wildhoney's Avatar
    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?
    TalkPHP.com - The Friendly PHP Community

    Watch Reaper Online - Watch Chuck Online


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •