2021-04-18 10:23:24 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > YBlog - Menu waiting to hide himself< / title >
< meta name = "keywords" content = "jQuery, web, javascript, design" / >
< link rel = "shortcut icon" type = "image/x-icon" href = "../../../../Scratch/img/favicon.ico" / >
2021-05-25 20:25:47 +00:00
< 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" / >
2021-04-18 10:23:24 +00:00
< 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 = "en" class = "article" >
< div id = "content" >
< div id = "header" >
< div id = "choix" >
< span id = "choixlang" >
< a href = "../../../../Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/" > French< / a >
< / span >
< span class = "tomenu" > < a href = "#navigation" > ↓ Menu ↓< / a > < / span >
< span class = "flush" > < / span >
< / div >
< / div >
< div id = "titre" >
< h1 > Menu waiting to hide himself< / h1 >
< / div >
< div class = "flush" > < / div >
< div id = "afterheader" class = "article" >
< 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 class = "sourceCode" id = "cb1" > < pre class = "sourceCode html" > < code class = "sourceCode html" > < a class = "sourceLine" id = "cb1-1" title = "1" > < span class = "kw" > < div< / span > < span class = "ot" > id=< / span > < span class = "st" > " menuButton" < / span > < span class = "kw" > > < /div> < / span > < / a >
< a class = "sourceLine" id = "cb1-2" title = "2" > < span class = "kw" > < div< / span > < span class = "ot" > id=< / span > < span class = "st" > " entete" < / span > < span class = "kw" > > < / span > < / a >
< a class = "sourceLine" id = "cb1-3" title = "3" > < span class = "kw" > < ul> < / span > < / a >
< a class = "sourceLine" id = "cb1-4" title = "4" > < span class = "kw" > < li> < / span > menu item 1 < span class = "kw" > < /li> < / span > < / a >
< a class = "sourceLine" id = "cb1-5" title = "5" > ...< / a >
< a class = "sourceLine" id = "cb1-6" title = "6" > < span class = "kw" > < li> < / span > menu item n < span class = "kw" > < /li> < / span > < / a >
< a class = "sourceLine" id = "cb1-7" title = "7" > < span class = "kw" > < /ul> < / span > < / a >
< a class = "sourceLine" id = "cb1-8" title = "8" > < span class = "kw" > < /div> < / span > < / a > < / code > < / pre > < / div >
< p > CSS:< / 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:< / 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" > " -10em" < / 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" > " 0em" < / 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 and lightweight. No timer (almost), no memory leak, no Date…< / p >
< / div >
< div id = "afterarticle" >
< div id = "social" >
2021-05-25 20:25:47 +00:00
< a href = "/rss.xml" target = "_blank" rel = "noopener noreferrer nofollow" class = "social" > RSS< / a >
2021-04-18 10:23:24 +00:00
·
< a href = "https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/en/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/en/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/en/blog/Social-link-the-right-way/" > These social sharing links preserve your privacy< / a >
< / div >
< div id = "navigation" >
< a href = "../../../../" > Home< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/blog" > Blog< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/softwares" > Softwares< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/about" > About< / 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" > & < / 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 >
< hr / >
< div style = "max-width: 100%" >
< a href = "https://cardanohub.org" >
< img src = "../../../../Scratch/img/ada-logo.png" class = "simple" style = "height: 16px ;
border-radius: 50%;
vertical-align:middle;
display:inline-block;" />
ADA:
< / a >
< code style = "display:inline-block;
word-wrap:break-word;
text-align: left;
vertical-align: top;
max-width: 85%;">
DdzFFzCqrhtAvdkmATx5Fm8NPJViDy85ZBw13p4XcNzVzvQg8e3vWLXq23JQWFxPEXK6Kvhaxxe7oJt4VMYHxpA2vtCFiP8fziohN6Yp
< / code >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< / html >
