yogsototh/her.esy.fun
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity
her.esy.fun/src/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/index.html
Yann Esposito (Yogsototh) 059fabd7d0
many minor details to update
2022-10-26 11:38:50 +02:00

155 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta 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="../../../../css/y.css" />
<link rel="stylesheet" type="text/css" href="/css/legacy.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="../../../../Scratch/img/about/FlatAvatar@2x.png" />
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- IndieAuth -->
<link href="https://twitter.com/yogsototh" rel="me">
<link href="https://github.com/yogsototh" rel="me">
<link href="mailto:yann.esposito@gmail.com" rel="me">
<link rel="pgpkey" href="../../../../pubkey.txt">
</head>
<body lang="fr" class="article">
<div id="content">
<div id="header">
<div id="choix">
<span id="choixlang">
<a href="../../../../Scratch/en/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/">Anglais</a>
</span>
<span class="tomenu"><a href="#navigation">↓ Menu ↓</a></span>
<span class="flush"></span>
</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&nbsp;:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb1-1" title="1"> <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;menuButton&quot;</span><span class="kw">&gt;&lt;/div&gt;</span></a>
<a class="sourceLine" id="cb1-2" title="2"> <span class="kw">&lt;div</span><span class="ot"> id=</span><span class="st">&quot;entete&quot;</span><span class="kw">&gt;</span></a>
<a class="sourceLine" id="cb1-3" title="3"> <span class="kw">&lt;ul&gt;</span></a>
<a class="sourceLine" id="cb1-4" title="4"> <span class="kw">&lt;li&gt;</span> menu item 1 <span class="kw">&lt;/li&gt;</span></a>
<a class="sourceLine" id="cb1-5" title="5"> ...</a>
<a class="sourceLine" id="cb1-6" title="6"> <span class="kw">&lt;li&gt;</span> menu item n <span class="kw">&lt;/li&gt;</span></a>
<a class="sourceLine" id="cb1-7" title="7"> <span class="kw">&lt;/ul&gt;</span></a>
<a class="sourceLine" id="cb1-8" title="8"> <span class="kw">&lt;/div&gt;</span></a></code></pre></div>
<p>CSS&nbsp;:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode css"><code class="sourceCode css"><a class="sourceLine" id="cb2-1" title="1"> <span class="pp">#entete</span> {</a>
<a class="sourceLine" id="cb2-2" title="2"> <span class="kw">top</span>: <span class="dv">1</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-3" title="3"> <span class="kw">left</span>: <span class="dv">0</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-4" title="4"> <span class="kw">position</span>: <span class="dv">fixed</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-5" title="5"> <span class="kw">width</span>: <span class="dv">10</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-6" title="6"> <span class="kw">z-index</span>: <span class="dv">2000</span><span class="op">;</span> }</a>
<a class="sourceLine" id="cb2-7" title="7"></a>
<a class="sourceLine" id="cb2-8" title="8"> <span class="pp">#entete</span> {</a>
<a class="sourceLine" id="cb2-9" title="9"> <span class="kw">top</span>: <span class="dv">1</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-10" title="10"> <span class="kw">height</span>: <span class="dv">22</span><span class="dt">em</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-11" title="11"> <span class="kw">left</span>: <span class="dv">0</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-12" title="12"> <span class="kw">position</span>: <span class="dv">fixed</span><span class="op">;</span></a>
<a class="sourceLine" id="cb2-13" title="13"> <span class="kw">width</span>: <span class="dv">10</span><span class="dt">em</span><span class="op">;</span> }</a></code></pre></div>
<p>Javascript&nbsp;:</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode js"><code class="sourceCode javascript"><a class="sourceLine" id="cb3-1" title="1"><span class="kw">var</span> last<span class="op">=</span><span class="dv">0</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-2" title="2"></a>
<a class="sourceLine" id="cb3-3" title="3"><span class="co">// will hide the menu in 5 seconds</span></a>
<a class="sourceLine" id="cb3-4" title="4"><span class="co">// if the variable 'last' has not changed its value</span></a>
<a class="sourceLine" id="cb3-5" title="5"><span class="kw">function</span> <span class="at">autoHideMenu</span>(value) <span class="op">{</span></a>
<a class="sourceLine" id="cb3-6" title="6"> <span class="at">setTimeout</span>(<span class="kw">function</span>()<span class="op">{</span></a>
<a class="sourceLine" id="cb3-7" title="7"> <span class="cf">if</span> ( last <span class="op">==</span> value ) <span class="op">{</span> <span class="at">hideMenu</span>()<span class="op">;</span> <span class="op">}</span></a>
<a class="sourceLine" id="cb3-8" title="8"> <span class="op">},</span><span class="dv">5000</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb3-9" title="9"><span class="op">}</span></a>
<a class="sourceLine" id="cb3-10" title="10"></a>
<a class="sourceLine" id="cb3-11" title="11"><span class="at">$</span>(document).<span class="at">ready</span>( <span class="kw">function</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb3-12" title="12"> <span class="co">// show the menu when the mouse is on</span></a>
<a class="sourceLine" id="cb3-13" title="13"> <span class="co">// the good area</span></a>
<a class="sourceLine" id="cb3-14" title="14"> <span class="at">$</span>(<span class="st">'#menuButton'</span>).<span class="at">hover</span>(showMenu)<span class="op">;</span></a>
<a class="sourceLine" id="cb3-15" title="15"></a>
<a class="sourceLine" id="cb3-16" title="16"> <span class="co">// If the mouse is on the menu change the</span></a>
<a class="sourceLine" id="cb3-17" title="17"> <span class="co">// value of 'last'</span></a>
<a class="sourceLine" id="cb3-18" title="18"> <span class="co">// try to hide the menu when the mouse </span></a>
<a class="sourceLine" id="cb3-19" title="19"> <span class="co">// go out off the menu.</span></a>
<a class="sourceLine" id="cb3-20" title="20"> <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">hover</span>(</a>
<a class="sourceLine" id="cb3-21" title="21"> <span class="kw">function</span>()<span class="op">{</span>last<span class="op">+=</span><span class="dv">1</span><span class="op">;},</span> </a>
<a class="sourceLine" id="cb3-22" title="22"> <span class="kw">function</span>()<span class="op">{</span><span class="at">autoHideMenu</span>(last)<span class="op">;}</span> )<span class="op">;</span></a>
<a class="sourceLine" id="cb3-23" title="23"> <span class="at">autoHideMenu</span>(<span class="dv">0</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb3-24" title="24"><span class="op">}</span>)<span class="op">;</span></a>
<a class="sourceLine" id="cb3-25" title="25"></a>
<a class="sourceLine" id="cb3-26" title="26"><span class="co">// show / hide menu functions details</span></a>
<a class="sourceLine" id="cb3-27" title="27"></a>
<a class="sourceLine" id="cb3-28" title="28"><span class="co">// move to the left</span></a>
<a class="sourceLine" id="cb3-29" title="29"><span class="kw">function</span> <span class="at">hideMenu</span>() <span class="op">{</span> </a>
<a class="sourceLine" id="cb3-30" title="30"> <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">animate</span>(<span class="op">{</span><span class="dt">left</span><span class="op">:</span><span class="st">&quot;-10em&quot;</span><span class="op">},</span> <span class="dv">500</span> )<span class="op">;</span> </a>
<a class="sourceLine" id="cb3-31" title="31"><span class="op">}</span></a>
<a class="sourceLine" id="cb3-32" title="32"></a>
<a class="sourceLine" id="cb3-33" title="33"><span class="co">// move to right and will try to hide in 5 sec.</span></a>
<a class="sourceLine" id="cb3-34" title="34"><span class="kw">function</span> <span class="at">showMenu</span>() <span class="op">{</span></a>
<a class="sourceLine" id="cb3-35" title="35"> <span class="at">$</span>(<span class="st">'#entete'</span>).<span class="at">animate</span>(<span class="op">{</span><span class="dt">left</span><span class="op">:</span><span class="st">&quot;0em&quot;</span><span class="op">},</span> <span class="dv">500</span> )<span class="op">;</span></a>
<a class="sourceLine" id="cb3-36" title="36"> last<span class="op">+=</span><span class="dv">1</span><span class="op">;</span></a>
<a class="sourceLine" id="cb3-37" title="37"> <span class="at">autoHideMenu</span>(last)<span class="op">;</span></a>
<a class="sourceLine" id="cb3-38" title="38"><span class="op">}</span></a></code></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="afterarticle">
<div id="social">
<a href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow" class="social">RSS</a>
·
<a href="https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/%20via%20@yogsototh" target="_blank" rel="noopener noreferrer nofollow" class="social">Tweet</a>
·
<a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/" target="_blank" rel="noopener noreferrer nofollow" class="social">FB</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="../../../../">Accueil</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/fr/blog">Blog</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/fr/softwares">Logiciels</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/fr/about">Auteur</a>
</div>
<div id="totop"><a href="#header">↑ Top ↑</a></div>
<div id="bottom">
<div>
Published on 2009-10-26
</div>
<div>
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
</div>
<div>
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Yann Esposito©</a>
</div>
<div>
Done with
<a href="http://www.vim.org" target="_blank" rel="noopener noreferrer nofollow"><strike>Vim</strike></a>
<a href="http://spacemacs.org" target="_blank" rel="noopener noreferrer nofollow">spacemacs</a>
<span class="pala">&amp;</span>
<a href="http://nanoc.ws" target="_blank" rel="noopener noreferrer nofollow"><strike>nanoc</strike></a>
<a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer nofollow">Hakyll</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink