tecnica.gif (746 byte) Tecnica.jpg (9372 byte)Massimiliano Valente (mvalente@tecnet.it)

 

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 nell’economia 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. Un’esigenza questa, che gli sviluppatori possono soddisfare in modo efficace con l’ausilio 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 un’organizzazione di questo tipo porta con sé sono due: il menu non occupa prezioso spazio nel documento e l’effetto 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 all’interno del documento principale. L’uso 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 l’uso 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 all’atto dell’apertura 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 l’elenco 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 l’elenco 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 all’interno 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, l’ultima operazione da compiere consiste nell’inserimento 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 l’importante 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 l’area di link. Ha un funzionamento opposto a onmouseover, in quanto non è importante che il puntatore entri nell’area 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 all’esempio 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 dell’esempio 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.


Internet News è un mensile della Casa Editrice Tecniche Nuove S.p.A.
© 1995/99. Tutti i diritti sono riservati.
Internet News non risponde di eventuali errori e omissioni.
Commenti a: inews@tecnet.it