2010-08-23 12:26:48 +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" >
< 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" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomfr" / >
< 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 >
2010-11-17 10:10:55 +00:00
<!-- < % if containMaths %>
< script type = "text/javascript" src = "/Scratch/js/MathJax/MathJax.js" > < / script >
< % end %>
-->
2010-08-23 12:26:48 +00:00
< title > Un menu qui attends avant de se cacher< / title >
< / head >
< body lang = "fr" >
< script type = "text/javascript" > / / < ! [ C D A T A [
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "Chargement en cours..." / > < / div > ');
// ]]>
< / script >
< div id = "content" >
2010-09-27 18:49:15 +00:00
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
< a href = "/Scratch/en/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/" onclick = "setLanguage('en')" > in English< / a >
< / div >
< / div >
< img src = "/Scratch/img/presentation.png" alt = "Presentation drawing" / >
2010-08-23 12:26:48 +00:00
< 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" >
< p > J’ ai déjà dit pourquoi < a href = "/Scratch/fr/blog/2009-10-Focus-vs-Minimalism" > je préférais que mon menu de navigation soit caché< / a > . J’ ai finalement décidé d’ attendre un peu avant de cacher le menu. Juste le temps que l’ utilisateur le voit. Mais voilà. Comment faire pour qu’ il ne disparaisse que lorsque l’ on ne s’ en sert pas pendant un petit moment ?< / p >
< p > Voici la solution que j’ utilise avec jQuery< / p >
< 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 >
< p > Simple et peu gourmand en ressources. Pas de timer (ou presque), pas de fuite de mémoire, pas d’ utilisation de date… < / p >
< / 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 >
2010-10-26 14:49:21 +00:00
Vous devez activer javascript pour commenter.
2010-08-23 12:26:48 +00:00
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
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/';
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
2010-09-17 15:15:29 +00:00
< ul > < li > < a href = "/Scratch/fr/" > Accueil< / a > < / li >
2010-08-23 12:26:48 +00:00
< li > < a href = "/Scratch/fr/blog/" > Blog< / a > < / li >
2010-09-30 13:01:14 +00:00
< li > < a href = "/Scratch/fr/softwares/" > Softwares< / a > < / li >
2010-09-28 01:00:51 +00:00
< li > < a href = "/Scratch/fr/about/" > À propos< / a > < / li > < / ul >
2010-08-23 12:26:48 +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" >
2010-09-28 15:10:12 +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 >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/" > < span class = "nicer" > «< / span > < em > Focus< / em > > Minimalisme< / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/fr/blog/2009-10-untaught-git-usage/" > < span class = "nicer" > «< / span > Usages non dits de Git< / a >
2010-08-23 12:26:48 +00:00
< / div >
< / div >
< div id = "next_articles" >
articles suivants
< div class = "next_article" >
2010-09-28 15:10:12 +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 >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +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 >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/fr/blog/2009-11-12-Git-for-n00b/" > Git pour les nuls < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +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" >
2010-08-31 13:06:43 +00:00
Écrit le : 26/10/2009
2010-09-02 09:51:46 +00:00
modifié le : 09/05/2010
2010-08-23 12:26:48 +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 >
< a href = "/Scratch/fr/validation/" > Validation< / a >
< 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 >
.
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml" > [rss]< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >
