Menu a scomparsa
Tra gli strumenti che meglio di altri sfruttano le potenzialità di Html dinamico, la
creazione degli elenchi dei contenuti occupa un posto di primo piano. Grazie alle
proprietà del Dhtml è possibile creare menu con effetti grafici di notevole impatto
I motori di ricerca rappresentano uno fra i tanti esempi di organizzazione dei menu:
lunghi elenchi testuali e spesso scroller di pagina «infiniti» che non rendono certo
vita facile nel rintracciare ciò che si sta cercando. Se consideriamo, invece, che
nelleconomia generale di un sito Web, la presentazione dei contenuti è di vitale
importanza, è fondamentale che le risorse siano supportate da un sistema di navigazione
semplice e diretto. Unesigenza questa, che gli sviluppatori possono soddisfare in
modo efficace con lausilio di menu intuitivi, immediati e poco ingombranti.
Di seguito descriveremo quindi come Dynamic Html offra la possibilità di ottenere
risultati di gran pregio, che difficilmente si possono ottenere con gli strumenti
tradizionali di Web publishing. In particolare, analizzeremo le procedure per creare un
menu di link a scomparsa, in altre parole gli elenchi delle sezioni del sito visibili solo
al verificarsi di determinati eventi. I vantaggi che unorganizzazione di questo tipo
porta con sé sono due: il menu non occupa prezioso spazio nel documento e leffetto
estetico generato è di grande impatto visivo.
Gli esempi che seguono e completano questa prima introduzione si avvalgono di un file
esterno con estensione .js che raccoglie il codice script necessario al suo corretto
funzionamento. Tale file esterno è denominato «script.js» e viene richiamato
allinterno del documento principale. Luso di file esterni con estensione .js
ha il vantaggio di rendere un unico codice comune a più documenti, i quali non dovranno
far altro che richiamare il file esterno per condividerne le caratteristiche. Il vantaggio
è che, modificando un unico file, automaticamente gli effetti si producono su tutti i
documenti che quel file richiamano.
Script.js
Il file esterno «script.js» va in parte modificato secondo le proprie esigenze e in
parte lasciato inalternato.
ie=document.all?1:0
n=document.layers?1:0
Queste prime due righe verificano luso di browser compatibili con il codice che si
sta analizzando. Ricordiamo che la nostra demo è compatibile con Netscape 4 e Microsoft
Internet Explorer 4 e 5. Per le ormai note differenze e distanze tecniche tra i due
browser, questo codice prevede che si avrà accesso a tutti gli elementi del documento per
MSIE e solo per i layer nel caso di Netscape.
lshow=20
20 è un valore espresso in pixel e si riferisce alla distanza dal margine superiore che
la prima voce di menu deve mantenere allatto dellapertura della pagina, tutte
le volte che il menu viene nascosto alla vista del visitatore. La prima voce, vedremo in
seguito, è anche quella che una volta selezionata rende visibile lelenco completo e
successivamente lo richiude.
var move=10;
Anche questo valore è espresso in pixel e si riferisce alla distanza che ogni movimento
del menu deve seguire. In altre parole lelenco si muove in base a precise distanze.
Più queste sono brevi, più il movimento sarà fluido e privo di scatti.
menuSpeed=40
Questo valore è espresso in millisecondi e stabilisce la velocità di movimento del menu.
A valori più alti corrispondono velocità di visualizzazione più elevate.
var moveOnScroll=true
Se il valore è impostato su «true», la prima voce del menu sarà sempre visibile nella
sua posizione originale nonostante lo scroller di pagina. Al contrario, se cioè si
preferisce che il menu segua i normali movimenti di scroller, il valore va impostato su
«false». La prima delle due soluzioni (adottata nel nostro esempio) è preferibile
quando si vuole mantenere la lista sempre in evidenza, in modo tale che il visitatore
possa visualizzare le risorse del sito sia che si trovi nella parte superiore o inferiore
del documento. Questa variabile è successivamente impostata nella funzione:
function checkScrolled(){
if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval
(scrolled):eval(scrolled)-oMenu.height+lshow
if(n) setTimeout(checkScrolled(),30)
Il restante codice presente nel file «script.js» non va modificato né alternato in
nessuna sua parte, in quanto funzionale alla corretta gestione della demo. In particolare
vengono impostate le funzioni: function mIn(),function mOut(), function checkScrolled() e
function menuInit().
Salvate le modifiche apportate al codice, si passa ad analizzare il documento Html
contenente il menu.
Esempio01.htm
Prima di tutto è necessario inserire la riga di codice che richiama il file esterno
«script.js». Questo va fatto tra i tag <HEAD> del documento con il seguente
codice:
<script src="script.js">
</script>
Ora impostiamo i fogli di stile relativi alla formattazione del testo visualizzato
allinterno del menu:
<style>
A{color:blue; text-decoration:none}
A:hover{color:red}
A:visited{color:orange}
DIV{position:absolute; top:0; left:30; height:100; width:150; visibility:hidden;
font-family:arial; font-size:12pt; font-weight:bold}
</style>
Si tratta di un classico foglio di stile incorporato, che determina la formattazione per
tutti i corrispondenti elementi della pagina.
Particolare attenzione va posta alla posizione e alle dimensioni di «DIV». Infatti,
questi valori esprimono rispettivamente:
· Position: absolute indica che tutti i valori che seguono fanno riferimento al
margine superiore sinistro del documento, in qualsiasi posizione si trovino.
· Top:0 indica la distanza in pixel dal margine superiore del documento.
· Left:30 indica la distanza in pixel dal margine sinistro della pagina.
· Width:150 indica la larghezza in pixel dello spazio lasciato al menu.
Impostati gli stili di pagina, lultima operazione da compiere consiste
nellinserimento del codice seguente:
<div id="divMenu">
<a href="http://inews.tecnet.it">Internet
News</a>
<br><br>
<a href="http://www.microsoft.com">Microsoft</a>
<br><br>
<a href="http://www.netscape.com">Netscape</a>
<br><br>
<a href="http://www.w3c.org">W3C</a>
<br><br>
<a href="http://www.insidedhtml.com">Inside
DHTML</a>
<br><br>
<a href="http://www.bratta.com">Bratta.com</a>
<br><br>
<a href="javascript://" onclick="moveMenu()">MENU</a>
</div>
Si tratta in parte di semplici link e in parte di riferimenti agli script impostati in
precedenza.
Molta cura va posta alla riga:
<a href="javascript://" onclick="moveMenu()">MENU</a>
Si tratta della voce di menu sempre in evidenza e che ricopre limportante
funzione di mostrare o nascondere le altre voci.
Il gestore di eventi onclick prevede che la funzione «moveMenu» venga richiamata quando
il visitatore clicca sulla voce «menu». In altre parole perché il menu si visualizzi o
nasconda è necessario cliccare sulla voce come se si trattasse di un link.
Onclick può sostituirsi con altri gestori di eventi quali onmouseover e onmouseout, nel
modo e con gli effetti che seguono:
<a href="javascript://" onmouseover="moveMenu()">Menu</a>
Onmouseover è utilizzato con il tag <A> e viene attivato quando il puntatore del
mouse passa sopra il testo «ancorato», appunto, a un link. Molto spesso viene utilizzato
con la funzione per far apparire messaggi nella barra di stato del browser. Nel nostro
esempio, dunque, perché il menu venga mostrato o nascosto, è sufficiente che il
puntatore del mouse passi sulla parola «menu».
<a href="javascript://" onmouseout="moveMenu()">Menu</a>
Il gestore di eventi onmouseout è attivato quando il puntatore del mouse abbandona
larea di link. Ha un funzionamento opposto a onmouseover, in quanto non è
importante che il puntatore entri nellarea di link, ma che ne esca. Solo in quel
momento, infatti, il gestore di eventi verrà attivato.
Tra i tre gestori di eventi, onclick sembra quello che meglio si adatta alla funzione di
questa demo, mentre il meno appropriato sembra essere
onmouseover.
Finora abbiamo considerato il caso di un menu posto nella parte superiore della pagina,
che quando cliccato, si espande in senso
verticale verso il basso.
Esigenze diverse possono richiedere che lo stesso effetto si produca dal margine sinistro
del documento. Per ottenere questo risultato occorre effettuare solo piccole variazioni
allesempio finora esaminato. In particolare bisogna riadattare il file esterno
sostituendo a:
lshow=30
il nuovo valore:
lshow=100
e soprattutto il codice:
function b_gettop(){
var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
return gleft;
con il nuovo:
function b_getleft(){
var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);
return gleft;
Per le modifiche da apportare al file Html corrispondente, rimandiamo al codice
dellesempio sul CD-ROM allegato alla rivista. Per rendere più accattivante questa
demo è possibile sostituire delle immagini ai link testuali finora esaminati, con il
risultato di rendere gradevole la grafica.
|