2010-02-17 12:27:01 +00:00
-----
isHidden: false
menupriority: 1
kind: article
2010-03-30 14:39:12 +00:00
created_at: 2009-10-26T21:56:09+02:00
2010-04-29 13:43:21 +00:00
title: Menu waiting to hide himself
2010-02-17 12:27:01 +00:00
tags:
- jQuery
- web
- javascript
- design
-----
I discussed [earlier why I prefer to hide my navigation menu ](/Scratch/multi/blog/2009-10-Focus-vs-Minimalism ). 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:
< div >
< code class = "html" >
< div id = "menuButton" > < / div >
< div id = "entete" >
< ul >
< li > menu item 1 < / li >
...
< li > menu item n < / li >
< / ul >
< / div >
< / code >
< / div >
CSS:
2010-04-15 09:45:50 +00:00
< div > < code class = "css" >
2010-02-17 12:27:01 +00:00
#entete {
top: 1em;
left: 0;
position: fixed;
width: 10em;
z-index: 2000; }
#entete {
top: 1em;
height: 22em;
left: 0;
position: fixed;
width: 10em; }
2010-04-15 09:45:50 +00:00
< / code > < / div >
2010-02-17 12:27:01 +00:00
Javascript:
2010-04-15 09:45:50 +00:00
< div > < code class = "javascript" >
2010-02-17 12:27:01 +00:00
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);
}
2010-04-15 09:45:50 +00:00
< / code > < / div >
2010-02-17 12:27:01 +00:00
Simple and lightweight. No timer (almost), no memory leak, no Date...