Dhtml - Menù a scomparsa

Menù a scomparsa

Splendido esempio di Dynamic HTML, questa demo genera un menu inizialmente nascosto, che si visualizza cliccando su un'apposita voce. Il menu, posto nella parte superiore del documento, puo' essere rimosso con un altro click. Ottimo effetto grafico e facilita' di impostazione fanno di questa demo una delle migliori della presente raccolta.

il codice da inserire nella tua pagina

<HTML> <HEAD> <style> TD{font-family:arial,helvetica; font-size:10pt} BODY{background-color:white} A{color:Navy; text-decoration:none} A:hover{color:red} A:visited:{color:#808080} DIV{font-family:arial,helvetica; font-size:12pt; font-weight:bold} </style> <script> /******************************************************************************** This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! ******************************************************************************** Browsercheck:*/ ie=document.all?1:0 n=document.layers?1:0 //These are the variables you have to set: //How much of the layer do you wan't to be visible when it's in the upstate? lshow=20 //How many pixels should it move every step? var move=10; //At what speed (in milliseconds, lower value is more speed) menuSpeed=40 //Do you want it to move with the page if the user scroll the page? var moveOnScroll=true /******************************************************************************** You should't have to change anything below this. ********************************************************************************/ //Defining variables var tim; //Object constructor function makeMenu(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style') this.state=1 this.go=0 this.height=n?this.css.document.height:eval(obj+'.offsetHeight') this.top=b_gettop this.obj = obj + "Object"; eval(this.obj + "=this") } //Get's the top position. function b_gettop(){ var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop); return gleft; } /******************************************************************************** Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick) ********************************************************************************/ function moveMenu(){ if(!oMenu.state){ clearTimeout(tim) mIn() }else{ clearTimeout(tim) mOut() } } //Menu in function mIn(){ if(oMenu.top()>eval(scrolled)-oMenu.height+lshow){ oMenu.go=1 oMenu.css.top=oMenu.top()-move tim=setTimeout("mIn()",menuSpeed) }else{ oMenu.go=0 oMenu.state=1 } } //Menu out function mOut(){ if(oMenu.top()<eval(scrolled)){ oMenu.go=1 oMenu.css.top=oMenu.top()+move tim=setTimeout("mOut()",menuSpeed) }else{ oMenu.go=0 oMenu.state=0 } } /******************************************************************************** Checking if the page is scrolled, if it is move the menu after ********************************************************************************/ function checkScrolled(){ if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)-oMenu.height+lshow if(n) setTimeout('checkScrolled()',30) } /******************************************************************************** Inits the page, makes the menu object, moves it to the right place, show it.. ********************************************************************************/ function menuInit(){ oMenu=new makeMenu('divMenu') scrolled=n?"window.pageYOffset":"document.body.scrollTop" oMenu.css.top=eval(scrolled)-oMenu.height+lshow oMenu.css.visibility='visible' if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled(); } //Initing menu on pageload onload=menuInit; </script> </HEAD> <BODY bgcolor="white" >  <script type="text/javascript" src="https://i5.plug.it/cmp/iub_conf_libero.js"></script> <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script> <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>   <script src='https://i5.plug.it/cmp/qciol.min.js' async="true"></script>  <script src="//barra-spazio.libero.it/x/js/barra_n04_siti.js?ver=1" type="text/javascript" language="Javascript"></script> <script language="Javascript" type="text/javascript" src="//digistatic.libero.it/css/header_8_3_04/js/hf.js"></script> <script language="JavaScript" type="text/javascript" src="//digistatic.libero.it/css/header_8_3_04/js/clickserver.js"></script> <script language="Javascript" type="text/javascript"> Libero.Stash.HF = { version: '8.3.04', cksrv: { a: 'HF8.3.04', b: 'digilander' } }; </script>   <style> #lh_header #lh_area02a{ position:relative; overflow: visible; height: 30px; } #lh_header #lh_area02b{ z-index: -1; } #lh_header #lh_area02a .lh_pos { position: absolute; margin-bottom: 0; } #lh_header #lh_area02a .lh_on { } #lh_header .lh_finput_area input { height: 27px; padding-top: 0; padding-bottom: 0; line-height: 27px !important; font-size: 15px !important; } #lh_altro{ position: relative !important; } #lh_header_top .lh_popup { } #lf_footer .lf_finput_area input { font-size: 12px !important; line-height: 25px !important; vertical-align: middle; padding: 0 !important; margin: 0 !important; } </style>   <style> #l_header_topbar,#l_header_fixed_topbar_placeholder{height:98px} </style>  <div id="l_header_fixed_topbar_placeholder"></div> <script language="javascript" type="text/javascript">  </script> <script language="javascript" type="text/javascript">  </script>   <link rel="preconnect" href="https://tags.crwdcntrl.net"> <link rel="preconnect" href="https://bcp.crwdcntrl.net"> <link rel="dns-prefetch" href="https://tags.crwdcntrl.net"> <link rel="dns-prefetch" href="https://bcp.crwdcntrl.net"> <script type='text/javascript' src='https://www.iolam.it/js/iam2.0.js?ns=libero/web/community/siti/1.2' async></script>  <div id="ad72890top" align="center"></div>  <div id="divMenu" style="position:absolute; top:0; left:30; height:100; width:80; visibility:hidden"> <a href="http://www.html.it">HOME</a> <br><br> <a href="http://www.html.it/jscript">Script</a> <br><br> <a href="http://www.html.it/xml">XML</a> <br><br> <a href="http://www.html.it/asp">ASP</a> <br><br> <a href="http://www.html.it/java">Applet</a> <br><br> <a href="http://www.html.it/grafica">Grafica</a> <br><br> <a href="javascript://" onclick="moveMenu()">MENU</a> </div>  <div id="ad72890bottom" align="center"></div>  <SCRIPT LANGUAGE="Javascript">  </SCRIPT> <SCRIPT LANGUAGE="Javascript" SRC="http://digilander.libero.it/_ad/digi_ad_13.js"> </SCRIPT>  <script> if(window.location === window.parent.location){ // Static Queue Snippet ! function(t, n) { t[n] = t[n] || { nlsQ: function(e, o, c, r, s, i) { return s = t.document, r = s.createElement("script"), r.async = 1, r.src = ("http:" === t.location.protocol ? "http:" : "https:") + "//cdn-gl.imrworldwide.com/conf/" + e + ".js#name=" + o + "&ns=" + n, i = s.getElementsByTagName("script")[0], i.parentNode.insertBefore(r, i), t[n][o] = t[n][o] || { g: c || {}, ggPM: function(e, c, r, s, i) { (t[n][o].q = t[n][o].q || []).push([e, c, r, s, i]) } }, t[n][o]}}} (window, "NOLBUNDLE"); // SDK Initialization var nSdkInstance = NOLBUNDLE.nlsQ("P1504C48C-9D0B-4ADE-B7CD-04AF56A52362", "nlsnInstance"); // Content Metadata var nielsenMetadata = { type: 'static', assetid: ( location.hostname + location.pathname + location.search ).replace( /([^\w]|_)+/g, '-' ).replace( /^-+|-+$/g, '' ) || 'homepage', section: 'LiberoCommunity_BRW' }; // Event 'staticstart' Call nSdkInstance.ggPM("staticstart", nielsenMetadata); } </script>   <script type="text/javascript"> if ( rs_DLRERR == 1 ) { var libero_comscore_error = 404; } </script> <script type="text/javascript"> document.write(unescape("%3Cscript src='" + (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js'%3E%3C/script%3E")); </script> <script type="text/javascript"> if (rs_DLR) { document.write(unescape("%3Cscript id='libero_tracking_js_site' src='http://digistatic.libero.it/js/comscore_8_3_04/comscore_digilander.libero.it.js'%3E%3C/script%3E")); document.write(unescape("%3Cscript id='libero_tracking_js_site' src='http://digistatic.libero.it/js/comscore_8_3_04/comscore_engine.js'%3E%3C/script%3E")); } </script> <noscript> <img src="http://b.scorecardresearch.com/p?c1=2&c2=13259779&cj=1&name=libero.others&ns_site=libero" /> </noscript>   <script src="//i.plug.it/iplug/js/lib/iol/analytics/data/digilander-libero-it/tracking_digilander-libero-it.min.js"></script> <script src="//i.plug.it/iplug/js/lib/iol/analytics/engine/IOL.Analytics.Tracking.min.js"></script> <script type="text/javascript"> var iat = new IOL.Analytics.Tracking.Engine(); iat.send(); </script> <noscript><img src="//italiaonline01.wt-eu02.net/215973748390194/wt.pl?p=315,libero.web.share.digiland.siti.digilander&cg1=libero&cg2=web&cg3=share&cg4=digiland&cg5=siti&cg6=digilander&cg7=libero.web.share.digiland.siti.digilander" height="1" width="1" alt=""></noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=G-9K5Y6YYGV4"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-9K5Y6YYGV4'); </script>  <div id="adinterstitial"></div> </body> </html>

Nella parte superiore della pagina potete notare la scritta "MENU", cliccando sul testo vi apparirà

il menù a scomparsa, questo è ciò che otterrete con il suddetto codice.

E' vietata la riproduzione anche solo parziale di immagini, icone, layout e contenuti senza previa autorizzazione.
I marchi, i loghi e i prodotti citati sono dei legittimi proprietari.