scratch/content/html/en/blog/2009-10-Wait-to-hide-a-menu-in-jQuery.md

isHidden	menupriority	kind	created_at	title	author_name	author_uri	tags
false	1	article	2009-10-26T21:56:09+02:00	Menu waiting to hide himself	Yann Esposito	yannesposito.com	jQuery web javascript design

I discussed earlier why I prefer to hide my navigation menu. I finally decided to hide it only after a short time. Just the time needed for a user to see it. But how make it disappear only when it is not used for some time?

Here is how to accomplish that easily.

HTML:

• menu item 1
...
• menu item n

CSS:

#entete { top: 1em; left: 0; position: fixed; width: 10em; z-index: 2000; }

#entete {
  top: 1em;
  height: 22em;
  left: 0;
  position: fixed;
  width: 10em; }

Javascript:

var last=0;

// will hide the menu in 5 seconds // if the variable 'last' has not changed its value function autoHideMenu(value) { setTimeout(function(){ if ( last == value ) { hideMenu(); } },5000); }

$(document).ready( function() { // show the menu when the mouse is on // the good area $('#menuButton').hover(showMenu);

// If the mouse is on the menu change the
// value of 'last'
// try to hide the menu when the mouse 
// go out off the menu.
$('#entete').hover(
    function(){last+=1;}, 
    function(){autoHideMenu(last);} );
autoHideMenu(0);

});

// show / hide menu functions details

// move to the left function hideMenu() { $('#entete').animate({left:"-10em"}, 500 ); }

// move to right and will try to hide in 5 sec. function showMenu() { $('#entete').animate({left:"0em"}, 500 ); last+=1; autoHideMenu(last); }

Simple and lightweight. No timer (almost), no memory leak, no Date...