255 lines
No EOL
14 KiB
HTML
255 lines
No EOL
14 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" 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/yannespositocomen"/>
|
|
|
|
<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>
|
|
|
|
<title>Menu waiting to hide himself</title>
|
|
</head>
|
|
<body lang="en">
|
|
<script type="text/javascript">// <![CDATA[
|
|
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="loading..."/></div>');
|
|
// ]]>
|
|
</script>
|
|
|
|
<div id="content">
|
|
|
|
<div id="choix">
|
|
<div class="return"><a href="#entete">↓ Menu ↓</a></div>
|
|
<div id="choixlang">
|
|
<a href="/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/" onclick="setLanguage('fr')">en Français</a>
|
|
</div>
|
|
</div>
|
|
<img src="/Scratch/img/presentation.png" alt="Presentation drawing"/>
|
|
<div id="titre">
|
|
<h1>
|
|
Menu waiting to hide himself
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
<div class="flush"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flush"></div>
|
|
<div id="afterheader">
|
|
<div class="corps">
|
|
<p>I discussed <a href="/Scratch/en/blog/2009-10-Focus-vs-Minimalism">earlier why I prefer to hide my navigation menu</a>. 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?</p>
|
|
|
|
<p>Here is how to accomplish that easily.</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 and lightweight. No timer (almost), no memory leak, no Date…</p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="choixrss">
|
|
<a id="rss" href="http://feeds.feedburner.com/yannespositocomen">
|
|
Subscribe
|
|
</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">Comments</div>');
|
|
</script>
|
|
<div class="flush"></div>
|
|
<div class="corps" id="comment">
|
|
<h2 class="first">comments</h2>
|
|
<noscript>
|
|
Vous devez activer javascript pour commenter.
|
|
</noscript>
|
|
|
|
<script type="text/javascript">
|
|
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
|
|
var idcomments_post_id = '/Scratch/en/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/';
|
|
var idcomments_post_url = 'http://yannesposito.com/Scratch/en/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">
|
|
<ul><li><a href="/Scratch/en/">Homepage</a></li>
|
|
<li><a href="/Scratch/en/blog/">Blog</a></li>
|
|
<li><a href="/Scratch/en/softwares/">Softwares</a></li>
|
|
<li><a href="/Scratch/en/about/">About</a></li></ul>
|
|
</div>
|
|
<div class="flush"></div>
|
|
<hr/>
|
|
<div id="next_before_articles">
|
|
<div id="previous_articles">
|
|
previous entries
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/en/blog/2009-10-launch-daemon-from-command-line/"><span class="nicer">«</span> launch daemon from command line</a>
|
|
</div>
|
|
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/en/blog/2009-10-Focus-vs-Minimalism/"><span class="nicer">«</span> Focus > Minimalism</a>
|
|
</div>
|
|
|
|
|
|
<div class="previous_article">
|
|
<a href="/Scratch/en/blog/2009-10-untaught-git-usage/"><span class="nicer">«</span> Untaught Git usage</a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div id="next_articles">
|
|
next entries
|
|
|
|
<div class="next_article">
|
|
<a href="/Scratch/en/blog/2009-10-28-custom-website-synchronisation-with-mobileme--2-/">custom website synchronisation with mobileme (2) <span class="nicer">»</span></a>
|
|
</div>
|
|
|
|
|
|
<div class="next_article">
|
|
<a href="/Scratch/en/blog/2009-10-30-How-to-handle-evil-IE/">How to handle evil IE <span class="nicer">»</span></a>
|
|
</div>
|
|
|
|
|
|
<div class="next_article">
|
|
<a href="/Scratch/en/blog/2009-11-12-Git-for-n00b/">Git for n00b <span class="nicer">»</span></a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="flush"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="bottom">
|
|
<div>
|
|
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a>
|
|
</div>
|
|
<div id="lastmod">
|
|
Created: 10/26/2009
|
|
Modified: 05/09/2010
|
|
</div>
|
|
<div>
|
|
Entirely done with
|
|
<a href="http://www.vim.org">Vim</a>
|
|
and
|
|
<a href="http://nanoc.stoneship.org">nanoc</a>
|
|
</div>
|
|
<div>
|
|
<a href="/Scratch/en/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/en/blog/feed/feed.xml">[rss]</a>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</body>
|
|
</html> |