Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Menù a comparsa dall'alto
Arretrati lista "Una demo Dhtml a settimana"
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>
|
