Menu laterale a scomparsa

Traduci questa paginaMicrosoft® Translator

Passa il Mouse all'interno della finestra per selezionare lo script quindi "CTRL+C" (copia) mettete il cursore dove volete inserire Javascript nella vostra pagina Web, andate nel codice html e fate "CTRL+V" (incolla) dove vedete il cursore lampeggiante.

Trasferire il tutto nella vostra pagina web, in questo caso all'interno dei tags: <Head> </Head>

<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", "Grafica Augusto") addItem("Home", "http://www.graficaugusto.org", ""); addItem("voce 1", "http://www.graficaugusto.org", ""); addItem("voce 2", "http://www.graficaugusto.org", ""); addItem("voce 3", "http://www.graficaugusto.org", ""); addItem("voce 4", "http://www.graficaugusto.org", ""); addItem("voce 5", "http://www.graficaugusto.org", ""); addItem("voce 6", "http://www.graficaugusto.org", ""); addItem("voce 7", "http://www.graficaugusto.org", ""); addItem("voce 8", "http://www.graficaugusto.org", ""); addItem("voce 9", "http://www.graficaugusto.org", ""); addItem("voce 10", "http://www.graficaugusto.org", ""); addItem("voce 11", "http://www.graficaugusto.org", ""); addItem("voce 12", "http://www.graficaugusto.org", ""); addItem("voce 13", "http://www.graficaugusto.org", ""); addItem("voce 14", "http://www.graficaugusto.org", ""); addItem("voce 15", "http://www.graficaugusto.org", ""); addItem("voce 16", "http://www.graficaugusto.org", ""); addItem("voce 17", "http://www.graficaugusto.org", ""); addItem("voce 18", "http://www.graficaugusto.org", ""); addItem("voce 19", "http://www.graficaugusto.org", ""); endMenu() </script>

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 personalizzazione. Sono infatti riconoscibili senza problemi anche se si trovano all'interno di uno script. Evitate di alterare gli apici e le virgolette, evitate anche caratteri strani come le barre / ed altro, se non strettamente necessari.

Per frames :

Un menù come questo si presta meglio in un sito con struttura a pagina unica, senza frames, ma avendo già ricevuto diverse richieste di chi invece vorrebbe infilarlo in qualche cornice, vediamo a questo proposito cosa modificare per fare in modo che i links del menù si aprano all'interno del frame (cornice) desiderato.

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

addItem("Home", "http://www.graficaugusto.org", "");

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

Home = descrizione voce
http://www.graficaugusto.org = descrizione URL o pagina html
"" = destinazione del link

E' proprio questo terzo parametro, le doppie virgolette, che mentre in un sito senza frames potrebbe essere omesso, diventa fondamentale per un sito strutturato a frames. Per default (in assenza di parametri) lo script farebbe uso di quanto impostato alla voce: linkTarget="_top"; che trovate nel primo blocco dello script, quello dedicato alle variabili, questo indica che ogni link privo di eventuale target sarà aperto come _top; cioè nella pagina attuale e a piena finestra del browser. Nel caso di frames si dovrà specificare all'interno di queste doppie virgolette il nome assegnato al frame sul quale volere aprire il link associato.

All'interno del listato trovate anche i commenti dell'autore che indicano cosa fare per personalizzare fonts, colori, bordi e tutto quanto altro sia possibile cambiare.