SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: mouseout delay

  1. #1
    SitePoint Member phatnugs's Avatar
    Join Date
    Jul 2006
    Location
    Nashvegas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mouseout delay

    I modified a script from dynamic drive for a menu reveal that i have. Below is the script / css / html. Right now the vertical menu stays open when you mouse out but closes when you mouse over another reveal menu. I was wondering if there was a way to delay the closing of the previous menu when you mouse over to another link. Any direction would be appreciated.

    Code:
    <html>
    <head>
    <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> 
    <style>
    #menu ul {
    
    	margin: 10px 0 0 0;
    	padding: 0 15px 0 15px;
    	
    	}
    #nav li {
    width: 180px;
    display:block;
    list-style: none;
    padding:0; 
    margin:0 0 0 0; 
    }
    #nav li a, #nav li a:visited {
    display:block; 
    text-decoration:none;
    
    }
    #nav li dd {
    display:none;
    }
    #nav li:hover, #nav li a:hover {
    border:0;
    }
    #nav li:hover dd, #nav li a:hover dd {
    display:block;
    }
    #nav li:hover dl, #nav li a:hover dl {
    height:auto; 
    }
    #nav dl {
    margin: 0; 
    cursor:pointer;
    }
    #nav dt {
    margin: 0 0 0 0px; 
    padding: 0; 
    border-bottom:1px solid #000000;
    }
    #nav dd {
    margin:0; 
    padding:0 0 0 15px; 
    text-align:left; 
    background-image: url(../images/splash/arrow.gif);
    background-repeat: no-repeat;
    background-position: 3&#37; .7em;
    
    }
    #nav li dt a:active, #nav li dt a:visited {
    margin: 0 0 0px 0; 
    color:#00000;
    }
    
    
    
    #nav2 li {
    width: 180px;
    display:block;
    list-style: none;
    padding:0; 
    margin:0 0 0 0; 
    text-align: right; 
    }
    #nav2 li a, #nav2 li a:visited {
    display:block; 
    text-decoration:none;
    
    }
    
    
    #nav2 li dd {
    display:none;
    text-align: right; 
    padding: 0 15px 0;
    background-image: url(../images/splash/arrow.gif);
    background-repeat: no-repeat;
    background-position: 3% .7em;
    
    }
    #nav2 li:hover, #nav2 li a:hover {
    border:0;
    }
    #nav2 li:hover dd, #nav2 li a:hover dd {
    display:block;
    }
    #nav2 li:hover dl, #nav2 li a:hover dl {
    height:auto; 
    }
    #nav2 dl {
    margin: 0; 
    cursor:pointer;
    }
    #nav2 dt {
    margin: 0 0 0 0px; 
    padding: 0; 
    border-bottom:1px solid #000000;
    }
    #nav2 dd {
    margin:0; 
    padding:0 0 0 15px; 
    font-size: 1em; 
    text-align:left; 
    background-image: url(../images/splash/arrow_right.gif) !important;
    background-repeat: no-repeat;
    background-position: 97% .6em !important;
    }
    #nav2 li dt a:active, #nav2 li dt a:visited {
    color:#00000;
    }
    
    
    .gallery dt a, .gallery dt a:visited {
    display:block; 
    color:#000000; 
    padding: 5px 5px 5px 0; 
    }
    .gallery dt a:hover {
    color:#993300; 
    }
    
    .gallery dd a, .gallery dd a:visited {
    color:#000; 
    text-decoration:none; 
    display:block; 
    padding:4px 5px 4px 0; 
    }
    .gallery dd a:hover {
    color:#993300;
    }
    
    dt a, a:visted { 
    color:#993300;
    }
    
    </style>
    </head>
    
    <body>
    <ul id="nav">
    <li>
    <dl class="gallery">
    	<dt onmouseover="showMenu(this)"><a href="#">Menu</a></dt>
    	<dd><a href="#">Sub 1</a></dd>
    	<dd><a href="#">Sub 2</a></dd>
    	<dd><a href="#">Sub 3</a></dd>
    </dl>
    </li>
    <li>
    <dl class="gallery">
    	<dt onmouseover="showMenu(this)"><a href="#">Menu 2</a></dt>
    	<dd><a href="#">Sub 1</a></dd>
    	<dd><a href="#">Sub 2</a></dd>
    	<dd><a href="#">Sub 3/a></dd>
    </dl>
    </li>
    </ul>
    </body>
    </html>
    Thanks!
    Mike
    --
    Mikey P

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The absolute easiest way would be to replace setDisplay ( parent, 'none' ); with setTimeout("setDisplay ( parent, 'none' );",100);where 100 is the number of miliseconds.

  3. #3
    SitePoint Member phatnugs's Avatar
    Join Date
    Jul 2006
    Location
    Nashvegas
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks so much aaron. I replaced this:

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


    with:

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


    it doesn't change it at all. i tried a variety of things and it still wouldn't work.
    --
    Mikey P


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
  •