I menu di navigazione sono elementi fondamentali e imprescindibili di ogni sito Web. La loro funzione principale è di facilitare la navigazione e orientarsi in ogni pagina del sito. Un menu organizzato con criterio è, dunque, una caratteristica da valutare con molta accortezza sia dal punto di vista organizzativo che grafico. Quest'ultimo aspetto è quello che ci interessa sottolineare in questa sede, utilizzando strumenti propri di scripting e Dynamic HTML.
Come scritto in apertura l'importanza di un menu è nella sua costante presenza sulle pagine di un Website. In altre parole, quindi, il visitatore deve sempre avere sott'occhio il menu di navigazione per spostarsi agevolmente da una sezione all'altra. Visivamente questa caratteristica si perde quando si effettua lo scroller di pagina e il menu è posizionato nella parte superiore, ovvero quando la pagina si apre ed il menu è nella parte inferiore. Lo script di questo mese dà una soluzione ideale a questo problema con un "floating menu", cioè un menu fluttuante e sempre visibile nonostante lo scroller di pagina.
Grazie alla costante visibilità del menu sulla parte sinistra della pagina, il visitatore avrà in ogni istante la possibilità di muoversi all'interno del sito.
Il file si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
esempio.htm
Il file "esempio.htm" simula una normale pagina di un Website, all'interno della quale vogliamo inserire un menu fluttuante. Premettiamo che lo script è assolutamente compatibile con Netscape e Ms Internet Explorer e quindi perfettamente funzionante su gran parte di browser attualmente in commercio.
La prima operazione da compiere è l'inserimento del codice all'interno degli elementi <head> della pagina:
<script type="text/javascript" language="javascript">
function setVariables(){
if (navigator.appName == "Netscape") {
v=".top=";h=".left=";dS="document.";sD="";
y="window.pageYOffset";x="window.pageXOffset";}
else {h=".pixelLeft=";v=".pixelTop=";dS="";sD=".style";
y="document.body.scrollTop";x="document.body.scrollLeft";}checkLocationA()}
movex=0,movey=0,xdiff=0,ydiff=0,ystart=0,xstart=0
function checkLocation(){
object="object1";yy=eval(y);xx=eval(x);ydiff=ystart-yy;xdiff=xstart-xx;
if ((ydiff<(-1))||(ydiff>(1))) movey=Math.round(ydiff/10),ystart-=movey
if ((xdiff<(-1))||(xdiff>(1))) movex=Math.round(xdiff/10),xstart-=movex
eval(dS+object+sD+v+ystart);eval(dS+object+sD+h+xstart);
setTimeout("checkLocation()",10)}
function checkLocationA(){ystart=eval(y);xstart=eval(x);}
</script>
Questo codice imposta le funzioni "setVariables" e "checkLocation" che verranno successivamente richiamate all'atto dell'apertura della pagina all'interno del tag <body>:
<body onload="setVariables();checkLocation()">
Il richiamo viene effettuato attraverso il gestore di eventi "onload". È fondamentale inserire questo codice nel marcatore <body> perchè lo script funzioni correttamente.
Nel corpo del documento va inserito il codice che crea il menu:
<div id="object1" style="position:absolute; visibility:show; left:0px; top:0px; height:800px; font-family:arial; font-size:14px">
</div>
Tra i marcatori DIV vanno inseriti i link testuali o d'immagine del menu. Il posizionamento è assoluto e la proprietà visibility impostata su "show".
Questo esempio è facilmente personalizzabile e di agevole comprensione. La natura crossbrowser ne fa uno strumento utilissimo per qualsiasi Website.
