2011-04-20 12:29:01 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< meta name = "keywords" content = "jQuery, web, javascript, design" >
2011-04-20 13:56:52 +00:00
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/twilight.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
2011-04-20 12:29:01 +00:00
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomfr" / >
2011-04-20 13:56:52 +00:00
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "Un menu qui attends avant de se cacher" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "Menu waiting to hide himself" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
2011-04-20 12:29:01 +00:00
<!-- [if lt IE 9]>
< script src = "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" > < / script >
<![endif]-->
< title > Un menu qui attends avant de se cacher< / title >
< / head >
2011-10-18 22:30:00 +00:00
< body lang = "fr" class = "article" >
2011-04-20 12:29:01 +00:00
< script type = "text/javascript" > / / < ! [ C D A T A [
2011-04-20 13:56:52 +00:00
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "Chargement en cours..." / > < / div > ');
2011-04-20 12:29:01 +00:00
// ]]>
< / script >
< div id = "content" >
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/" onclick = "setLanguage('en')" > in English< / a >
2011-04-20 12:29:01 +00:00
< / div >
2011-09-28 16:05:55 +00:00
< div class = "flush" > < / div >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "titre" >
< h1 >
Un menu qui attends avant de se cacher
< / h1 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
2011-12-07 15:40:03 +00:00
< p > J’ < a href = "/Scratch/fr/blog/2009-10-Focus-vs-Minimalism" > je préférais que mon menu de navigation soit caché< / a > . J’ ’ ’ ’ ’ ’ ?< / p >
2011-04-20 12:29:01 +00:00
2011-12-07 15:40:03 +00:00
< p > Voici la solution que j’ < / p >
2011-04-20 12:29:01 +00:00
< p > HTML : < / p >
< div >
< pre class = "twilight" >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > id< / span > < span class = "MetaTagAll" > =< / span > < span class = "String" > < span class = "String" > " < / span > < span class = "String" > menuButton< / span > < span class = "String" > " < / span > < / span > < / span > < span class = "MetaTagAll" > > < span class = "MetaTagAll" > < < / span > /< / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > id< / span > < span class = "MetaTagAll" > =< / span > < span class = "String" > < span class = "String" > " < / span > < span class = "String" > entete< / span > < span class = "String" > " < / span > < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > ul< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagInline" > < span class = "MetaTagInline" > < < / span > < span class = "MetaTagInline" > li< / span > < span class = "MetaTagInline" > > < / span > < / span > menu item 1 < span class = "MetaTagInline" > < span class = "MetaTagInline" > < /< / span > < span class = "MetaTagInline" > li< / span > < span class = "MetaTagInline" > > < / span > < / span >
...
< span class = "MetaTagInline" > < span class = "MetaTagInline" > < < / span > < span class = "MetaTagInline" > li< / span > < span class = "MetaTagInline" > > < / span > < / span > menu item n < span class = "MetaTagInline" > < span class = "MetaTagInline" > < /< / span > < span class = "MetaTagInline" > li< / span > < span class = "MetaTagInline" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > ul< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > > < / span > < / span >
< / pre >
< / div >
< p > CSS : < / p >
< div > < pre class = "twilight" >
< span class = "CssId" > < span class = "CssId" > #< / span > entete< / span > {
< span class = "CssPropertyName" > top< / span > : < span class = "CssAdditionalConstants" > 1< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > left< / span > : < span class = "CssAdditionalConstants" > 0< / span > ;
< span class = "CssPropertyName" > position< / span > : < span class = "CssPropertyValue" > fixed< / span > ;
< span class = "CssPropertyName" > width< / span > : < span class = "CssAdditionalConstants" > 10< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > z-index< / span > : < span class = "CssAdditionalConstants" > 2000< / span > ; }
< span class = "CssId" > < span class = "CssId" > #< / span > entete< / span > {
< span class = "CssPropertyName" > top< / span > : < span class = "CssAdditionalConstants" > 1< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > height< / span > : < span class = "CssAdditionalConstants" > 22< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > left< / span > : < span class = "CssAdditionalConstants" > 0< / span > ;
< span class = "CssPropertyName" > position< / span > : < span class = "CssPropertyValue" > fixed< / span > ;
< span class = "CssPropertyName" > width< / span > : < span class = "CssAdditionalConstants" > 10< / span > < span class = "Keyword" > em< / span > ; }
< / pre > < / div >
< p > Javascript : < / p >
< div > < pre class = "twilight" >
< span class = "Storage" > var< / span > last< span class = "Keyword" > =< / span > < span class = "Constant" > 0< / span > ;
< span class = "Comment" > < span class = "Comment" > //< / span > will hide the menu in 5 seconds< / span >
< span class = "Comment" > < span class = "Comment" > //< / span > if the variable 'last' has not changed its value< / span >
< span class = "Storage" > function< / span > < span class = "Entity" > autoHideMenu< / span > (< span class = "Variable" > value< / span > ) {
< span class = "SupportFunction" > setTimeout< / span > (< span class = "Storage" > function< / span > (){
< span class = "Keyword" > if< / span > ( last < span class = "Keyword" > ==< / span > value ) { hideMenu(); }
},< span class = "Constant" > 5000< / span > );
}
< span class = "Keyword" > $< / span > (< span class = "Support" > document< / span > ).ready( < span class = "Storage" > function< / span > () {
< span class = "Comment" > < span class = "Comment" > //< / span > show the menu when the mouse is on< / span >
< span class = "Comment" > < span class = "Comment" > //< / span > the good area< / span >
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #menuButton< span class = "String" > '< / span > < / span > ).hover(showMenu);
< span class = "Comment" > < span class = "Comment" > //< / span > If the mouse is on the menu change the< / span >
< span class = "Comment" > < span class = "Comment" > //< / span > value of 'last'< / span >
< span class = "Comment" > < span class = "Comment" > //< / span > try to hide the menu when the mouse < / span >
< span class = "Comment" > < span class = "Comment" > //< / span > go out off the menu.< / span >
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #entete< span class = "String" > '< / span > < / span > ).hover(
< span class = "Storage" > function< / span > (){last< span class = "Keyword" > +< / span > < span class = "Keyword" > =< / span > < span class = "Constant" > 1< / span > ;},
< span class = "Storage" > function< / span > (){autoHideMenu(last);} );
autoHideMenu(< span class = "Constant" > 0< / span > );
});
< span class = "Comment" > < span class = "Comment" > //< / span > show / hide menu functions details< / span >
< span class = "Comment" > < span class = "Comment" > //< / span > move to the left< / span >
< span class = "Storage" > function< / span > < span class = "Entity" > hideMenu< / span > () {
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #entete< span class = "String" > '< / span > < / span > ).animate({left:< span class = "String" > < span class = "String" > " < / span > -10em< span class = "String" > " < / span > < / span > }, < span class = "Constant" > 500< / span > );
}
< span class = "Comment" > < span class = "Comment" > //< / span > move to right and will try to hide in 5 sec.< / span >
< span class = "Storage" > function< / span > < span class = "Entity" > showMenu< / span > () {
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #entete< span class = "String" > '< / span > < / span > ).animate({left:< span class = "String" > < span class = "String" > " < / span > 0em< span class = "String" > " < / span > < / span > }, < span class = "Constant" > 500< / span > );
last< span class = "Keyword" > +< / span > < span class = "Keyword" > =< / span > < span class = "Constant" > 1< / span > ;
autoHideMenu(last);
}
< / pre > < / div >
2011-12-07 15:40:03 +00:00
< p > Simple et peu gourmand en ressources. Pas de timer (ou presque), pas de fuite de mémoire, pas d’ < / p >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomfr" >
s'abonner
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
document.write('< div id = "clickcomment" > Commentaires< / div > ');
< / script >
< div class = "flush" > < / div >
< div class = "corps" id = "comment" >
< h2 class = "first" > commentaires< / h2 >
< noscript >
Vous devez activer javascript pour commenter.
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
2011-04-20 13:56:52 +00:00
var idcomments_post_id = '/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/';
2011-04-20 12:29:01 +00:00
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
2011-04-20 13:56:52 +00:00
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
2011-04-20 13:56:52 +00:00
< ul > < li > < a href = "/Scratch/fr/" > Bienvenue< / a > < / li >
< li > < a href = "/Scratch/fr/blog/" > Blog< / a > < / li >
< li > < a href = "/Scratch/fr/softwares/" > Softwares< / a > < / li >
< li > < a href = "/Scratch/fr/about/" > À propos< / a > < / li > < / ul >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
articles précédents
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-10-launch-daemon-from-command-line/" > < span class = "nicer" > «< / span > lancer un démon en ligne de commande< / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/" > < span class = "nicer" > «< / span > < em > Focus< / em > > Minimalisme< / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-10-untaught-git-usage/" > < span class = "nicer" > «< / span > Usages non dits de Git< / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div id = "next_articles" >
articles suivants
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-10-28-custom-website-synchronisation-with-mobileme--2-/" > Synchronisation avec mobileme (2) < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-10-30-How-to-handle-evil-IE/" > Une CSS pour IE seulement < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-11-12-Git-for-n00b/" > Git pour les nuls < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/deed.fr" > Droits de reproduction ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
Écrit le : 26/10/2009
2011-04-20 13:09:17 +00:00
modifié le : 20/04/2011
2011-04-20 12:29:01 +00:00
< / div >
< div >
Site entièrement réalisé avec
< a href = "http://www.vim.org" > Vim< / a >
et
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< div >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/validation/" > Validation< / a >
2011-04-20 12:29:01 +00:00
< a href = "http://validator.w3.org/check?uri=referer" > [xhtml] < / a >
.
< a href = "http://jigsaw.w3.org/css-validator/check/referer?profile=css3" > [css] < / a >
.
2011-04-20 13:56:52 +00:00
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml" > [rss]< / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >
