Men¨ a comparsa dall'alto

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

All'interno di questa mailing list abbiamo ripetuto pi¨ volte l'importanza della distribuzione delle informazioni in un sito Web. Esse devono essere facilmente raggiungibili e da sempre vige la regola dei tre clicks: qualsiasi articolo, guida o approfondimento deve essere raggiungibile da qualsiasi utente in meno di tre clicks del mouse partendo naturalmente dalla Home page.
I men¨ realizzati in Dynamic Html sono in questo senso una soluzione vantaggiosa e anche se non facilmente realizzabili, velocemente personalizzabili grazie agli scripts che vengono messi a disposizione in questa lista e nell'archivio di Risorse.net (www.risorse.net/dhtml). Fatta questa doverosa introduzione, analizziamo la sintassi per creare l'esempio:

<SCRIPT LANGUAGE="JavaScript">
function setVariables(){
y=-50;x=9;ob=1;max=20 // la var x=indica il n. di bottoni
if (navigator.appName == "Netscape") v=".top=",dS="document.",sD="";
else v=".pixelTop=",dS="",sD=".style";
}
function scrollOn(){
if (ob<10){ // la var "x" +1 da l'ob
objectX="object"+ob;y+=10;eval(dS + objectX + sD + v + y);
if (y else y=-50, max+=40, ob+=1, setTimeout("scrollOn()",20)
}
}
</SCRIPT>

In questo Javascript vengono stabilito, tra le altre cose, il numero di bottoni che comporranno il men¨. Le riche da prendere in considerazione sono:

y=-50;x=9;ob=1;max=20

in cui la variabile x indica proprio il numero di pulsanti e:

if (ob<10)

Essendoci nove tasti, la variabile x sarÓ uguale a 9 e la variabile ob avrÓ come valore 10.

Al fine del corretto funzionamento della demo, il tag <body> dovrÓ contenere i richiami alle funzioni appena create all'interno dello script:

<BODY onload="setVariables(),scrollOn()">

Il codice strettamente necessario alla creazione dei pulsanti Ŕ contenuto in fogli di stile (qui trovi una guida di riferimento www.risorse.net/css) che conterranno come valore dell'attributo id delle stringhe alfanumeriche ordinate in maniera crescente (object1, object2, object3 ecc.):

<font size="3"face="Arial">
<div id="object1" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net" style=text-decoration:none>Risorse.net</a></B></CENTER></td></table></div>
<div id="object2" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/dhtml" style=text-decoration:none>Sezione Dhtml</a></B></CENTER></td></table></div>
<div id="object3" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/mailing" style=text-decoration:none>Mailing list</a></B></CENTER></td></table></div>
<div id="object4" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/server-free" style=text-decoration:none>Spazio free</a></B></CENTER></td></table></div>
<div id="object5" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/flash" style=text-decoration:none>Guida a Flash</a></B></CENTER></td></table></div>
<div id="object6" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/perl" style=text-decoration:none>Guida a Perl</a></B></CENTER></td></table></div>
<div id="object7" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/libri" style=text-decoration:none>Recensione Libri</a></B></CENTER></td></table></div>
<div id="object8" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/software" style=text-decoration:none>Il software</a></B></CENTER></td></table></div>
<div id="object9" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/software" style=text-decoration:none>Hosting</a></B></CENTER></td></table>
</div>
</font>

Se volessimo aggiungere un nuovo tasto, oltre a ritoccare le variabili x e ob che abbiamo visto all'inizio, dovremo aggiungere il codice:

<div id="object10" style="position:absolute; visibility:show; left:25px; top:-50px; z-index:2">
<table border=0 width=150 bgcolor=004080><td><CENTER><B><a href="http://www.risorse.net/redazione" style=text-decoration:none>Redazione</a></B></CENTER></td></table></div>


© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2000/marzo/31.asp?print=ok