162 lines
8.5 KiB
HTML
162 lines
8.5 KiB
HTML
<?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" xml:lang="en" lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
<title>YBlog - Un menu qui attends avant de se cacher</title>
|
||
<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/css/scientific.css" />
|
||
<link rel="stylesheet" type="text/css" href="../../../../Scratch/css/solarized.css" />
|
||
<!-- Font -->
|
||
<link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
|
||
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet" type="text/css">
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocomfr" />
|
||
<!--[if lt IE 9]>
|
||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||
<![endif]-->
|
||
</head>
|
||
<body lang="fr">
|
||
<script type="text/javascript">//
|
||
document.write('<div id="blackpage"><div>Bientôt<img src="/Scratch/img/loading.gif" alt="Chargement en cours"></img></div></div>');
|
||
//
|
||
</script>
|
||
<div id="content">
|
||
<div id="header">
|
||
<div id="choix">
|
||
<div id="choixlang">
|
||
<a href="../../../../Scratch/en/blog/2009-10-Wait-to-hide-a-menu-in-jQuery" onclick="setLanguage('en')">
|
||
English </a>
|
||
</div>
|
||
<script type="text/javascript">//
|
||
document.write('<div id="switchcss"><a href="#">Changer de theme</a></div>');
|
||
//
|
||
</script>
|
||
<div class="tomenu"><a href="#navigation">↓ Menu ↓</a></div>
|
||
<div class="flush"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="titre">
|
||
<h1>Un menu qui attends avant de se cacher</h1>
|
||
</div>
|
||
<div class="flush"></div>
|
||
<div id="afterheader" class="article">
|
||
<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="sourceCode html"><code class="sourceCode html"> <span class="kw"><div</span><span class="ot"> id=</span><span class="st">"menuButton"</span><span class="kw">></div></span>
|
||
<span class="kw"><div</span><span class="ot"> id=</span><span class="st">"entete"</span><span class="kw">></span>
|
||
<span class="kw"><ul></span>
|
||
<span class="kw"><li></span> menu item 1 <span class="kw"></li></span>
|
||
...
|
||
<span class="kw"><li></span> menu item n <span class="kw"></li></span>
|
||
<span class="kw"></ul></span>
|
||
<span class="kw"></div></span></code></pre>
|
||
</div>
|
||
|
||
<p>CSS :</p>
|
||
<div>
|
||
<p><code class="css"> #entete { top: 1em; left: 0; position: fixed; width: 10em; z-index: 2000; }</p>
|
||
<pre><code>#entete {
|
||
top: 1em;
|
||
height: 22em;
|
||
left: 0;
|
||
position: fixed;
|
||
width: 10em; }</code></pre>
|
||
</code>
|
||
</div>
|
||
|
||
<p>Javascript :</p>
|
||
<div>
|
||
<p><code class="javascript"> var last=0;</p>
|
||
<p>// 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); }</p>
|
||
<p><span class="math">$(document).ready( function() { // show the menu when the mouse is on // the good area $</span>(‘#menuButton’).hover(showMenu);</p>
|
||
<pre><code>// 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);</code></pre>
|
||
<p>});</p>
|
||
<p>// show / hide menu functions details</p>
|
||
<p>// move to the left function hideMenu() { $(‘#entete’).animate({left:“-10em”}, 500 ); }</p>
|
||
<p>// move to right and will try to hide in 5 sec. function showMenu() { $(‘#entete’).animate({left:“0em”}, 500 ); last+=1; autoHideMenu(last); }</p>
|
||
</code>
|
||
</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="social">
|
||
<a target="_blank" href="http://feeds.feedburner.com/yannespositocomfr" class="social">r</a>
|
||
·
|
||
<a target="_blank" href="https://twitter.com/home?status=http://yannesposito.com/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/index.html%22via%22@yogsototh" class="social">t</a>
|
||
·
|
||
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery" class="social">`</a>
|
||
·
|
||
<a target="_blank" href="https://plus.google.com/share?url=http://yannesposito.com/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery" class="social">g</a>
|
||
<br />
|
||
<a class="message" href="../../../../Scratch/fr/blog/Social-link-the-right-way/">Ces liens sociaux préservent votre vie privée</a>
|
||
</div>
|
||
<div id="navigation">
|
||
<a href="../../../../">Home</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/blog">Blog</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/softwares">Softwares</a>
|
||
<span class="sep">¦</span>
|
||
<a href="../../../../Scratch/fr/about">About</a>
|
||
</div>
|
||
<div id="totop"><a href="#header">↑ Top ↑</a></div>
|
||
<div class="corps" id="comment">
|
||
<h2 class="first">Comments</h2>
|
||
<div id="disqus_thread"></div>
|
||
<script type="text/javascript">
|
||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||
var disqus_shortname = 'yannesposito'; // required: replace example with your forum shortname
|
||
|
||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||
(function() {
|
||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
|
||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||
})();
|
||
</script>
|
||
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
||
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
||
</div>
|
||
<div class="tomenu"><a href="#navigation">↑ Menu ↑</a></div>
|
||
<div id="bottom">
|
||
<div>
|
||
Published on 2009-10-26
|
||
</div>
|
||
<div>
|
||
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
|
||
</div>
|
||
<div>
|
||
Yann Esposito©
|
||
</div>
|
||
<div>
|
||
Done with
|
||
<a href="http://www.vim.org">Vim</a>
|
||
<span class="nicer">&</span>
|
||
<a href="http://jaspervdj.be/hakyll">Hakyll</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
<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>
|
||
<script type="text/javascript" src="../../../../Scratch/js/highlight/highlight.pack.js"></script>
|
||
<script type="text/javascript" src="../../../../Scratch/js/article.js"></script>
|
||
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||
</html>
|