Menù laterale a scomparsa

Descrizione: Un menù laterale a scomparsa che segue lo scrolling verticale della pagina.

<!-- Prelevato su 100% --> <script language="JavaScript1.2"> /* Copyright © MaXimuS 2000-2001, All Rights Reserved. Site: http://www.absolutegb.com/maximus E-mail: maximus@nsimail.com Version: 6.1 (NS6 Compatibility) */ // Default settings. Don't change them. YOffset=40; // no quotes!! staticYOffset=40; // no quotes!! slideSpeed=20 // no quotes!! waitTime=1000; // no quotes!! this sets the time the menu stays out for after the mouse goes off it. hdrFontFamily="Verdana"; hdrFontSize="3"; hdrFontColor="#000080"; hdrBGColor="#AFCCDE"; hdrAlign="right"; hdrVAlign="center"; hdrHeight="40"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="#FFF7E5"; linkOverBGColor="#FFF7E5"; linkTarget="_top"; linkAlign="left"; menuBGColor="#000080"; menuIsStatic="yes"; menuWidth=110; // Must be a multiple of 10! no quotes!! barBGColor="#AFCCDE"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="#000080"; barVAlign="top"; barWidth=20; // no quotes!! NS6 = (document.getElementById&&!document.all) IE = (document.all) NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4") moving=setTimeout('null',1) function moveOut() { if ((NS6 && parseInt(ssm.left)<0)||(IE && ssm.style.pixelLeft<0)||(NS && document.ssm.left<0)) { clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed) if (NS6) {theleft+=10;ssm.left = theleft;} if (IE) {ssm.style.pixelLeft += 10;} if (NS) {document.ssm.left += 10;document.ssm.clip.left-=10}} else {clearTimeout(moving);moving=setTimeout('null',1)}}; function moveBack() { clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)} function moveBack1() { if ((NS6 && parseInt(ssm.left)>(-menuWidth))||(IE && ssm.style.pixelLeft>(-menuWidth))||(NS && document.ssm.left>(-menuWidth))) { clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed); if (NS6) {theleft-=10;ssm.left = theleft;} if (IE) {ssm.style.pixelLeft -= 10;} if (NS) {document.ssm.left -= 10;document.ssm.clip.left+=10}} else {clearTimeout(moving);moving=setTimeout('null',1)}}; lastY = 0; function makeStatic() { if (NS6) {winY = window.pageYOffset;} if (IE) {winY = document.body.scrollTop;var NM=document.all('ssm').style} if (NS) {winY = window.pageYOffset;var NM=document.ssm} if (NS6||IE||NS) { if (winY!=lastY&&winY>YOffset-staticYOffset) { smooth = .3 * (winY - lastY - YOffset + staticYOffset);} else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) { smooth = .3 * (winY - lastY);} else {smooth=0} if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (NS6) {ssm.top=parseInt(ssm.top)+smooth;} if (IE) NM.pixelTop+=smooth; if (NS) NM.top+=smooth; lastY = lastY+smooth; setTimeout('makeStatic()', 1)}} function initSlide() { if (NS6){ ssm=document.getElementById("ssm").style ssm.visibility="visible"; ssm.left = -menuWidth;} else if (IE) { document.all("ssm").style.visibility = "visible" document.all("ssm").style.pixelLeft = -menuWidth;} else if (NS) { document.layers["ssm"].clip.left = menuWidth; document.layers["ssm"].left = -menuWidth; document.layers["ssm"].visibility = "show"} if (menuIsStatic=="yes") makeStatic();} function reloadPage() {if(NS)location.reload()} function startMenu(menuHeader, barText) { if (IE||NS6) {document.write('<DIV ID="ssm" style="visibility:hidden;Position : Absolute ;Left : 0 ;Top : '+YOffset+' ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>')} tempBar="" for (i=0;i<barText.length;i++) { tempBar+=barText.substring(i, i+1)+"<BR>"} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+(menuWidth-1)+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>') theleft=-menuWidth} function addItem(text, link, target) { if (!target) {target=linkTarget} document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+(menuWidth-1)+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssmItems">'+text+'</DIV></LAYER></ILAYER></TD></TR>')} function addHdr(text) { document.write('<tr><td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+(menuWidth-1)+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')} function endMenu() { document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>') if (NS6){document.write('</TD></TR></TABLE>')} if (IE||NS6) {document.write('</DIV>')} if (NS) {document.write('</LAYER>')} if (NS6||IE||NS) setTimeout('initSlide();', 500)} window.onresize=reloadPage /* Configure menu styles below NOTE: To edit the link colors, go to the STYLE tags and edit the ssmItems colors */ YOffset=20; // no quotes!! staticYOffset=20; // no quotes!! slideSpeed=20 // no quotes!! waitTime=500; // no quotes!! this sets the time the menu stays out for after the mouse goes off it. menuBGColor="#006600"; menuIsStatic="yes"; menuWidth=100; // Must be a multiple of 10! no quotes!! hdrFontFamily="verdana"; hdrFontSize="2"; hdrFontColor="#ffffff"; hdrBGColor="#006600"; hdrAlign="left"; hdrVAlign="center"; hdrHeight="20"; linkFontFamily="Verdana"; linkFontSize="1"; linkBGColor="white"; linkOverBGColor="#66ff66"; linkTarget="_top"; linkAlign="Left"; barBGColor="#990000"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="white"; barVAlign="center"; barWidth=20; // no quotes!! startMenu("Menu", "100x100") addItem("Home", "http://www.centoxcento.cjb.net", ""); addItem("voce 1", "http://www.centoxcento.cjb.net", ""); addItem("voce 2", "http://www.centoxcento.cjb.net", ""); addItem("voce 3", "http://www.centoxcento.cjb.net", ""); addItem("voce 4", "http://www.centoxcento.cjb.net", ""); addItem("voce 5", "http://www.centoxcento.cjb.net", ""); addItem("voce 6", "http://www.centoxcento.cjb.net", ""); addItem("voce 7", "http://www.centoxcento.cjb.net", ""); addItem("voce 8", "http://www.centoxcento.cjb.net", ""); addItem("voce 9", "http://www.centoxcento.cjb.net", ""); addItem("voce 10", "http://www.centoxcento.cjb.net", ""); addItem("voce 11", "http://www.centoxcento.cjb.net", ""); addItem("voce 12", "http://www.centoxcento.cjb.net", ""); addItem("voce 13", "http://www.centoxcento.cjb.net", ""); addItem("voce 14", "http://www.centoxcento.cjb.net", ""); endMenu() </script>

Html: Una volta inserito lo script nella parte head della vostra pagina web non vi resta altro da fare che configurare e personalizzare le varie voci.

L'utente medio di Html non troverà alcuna difficoltà nel configurare tutti i vari parametri ai fini di una perfetta personalizzazione mentre un principiante riscontrerà qualche difficoltà. Comunque sia evitate di alterare gli apici e le virgolette!

Frames: Un menù come questo si presta meglio in un sito con struttura a pagina unica (senza frames) ma dato che alcuni webmaster utilizzano pagine con frame è possibile attraverso piccole modifiche utilizzare il menù anche con portali strutturati su più frame.

- Seguite le istruzioni di seguito riportate per inserire il menù in una pagina con frame

Da notare le righe che compongono le voci del menù:

addItem("Home", "http://www.centoxcento.cjb.net", "");

La voce addItem necessita di tre parametri, di cui uno, l'ultimo, può essere omesso mentre gli altri servono rispettivamente per:

Home = descrizione voce
http://www.centoxcento.cjb.net = descrizione URL o pagina html
"" = destinazione del link

E' proprio il terzo parametro che deve essere modificato per far sì che il menù funzioni anche in un sito con frame. Per default lo script fa uso di quanto impostato nella voce: linkTarget="_top", che trovate nel primo blocco dello script; con la funzione "Top" ogni link privo di eventuale target sarà aperto come _top, cioè nella pagina attuale, mentre in caso di frame si dovrà specificare all'interno di queste doppie virgolette " " il nome assegnato al frame.

All'interno del listato (codice) trovate anche i commenti dell'autore che indicano cosa fare per personalizzare fonts, colori, bordi e tutto quello che è possibile cambiare.