Un menu rappresenta una parte molto importante di un sito, assieme al logo contraddistingue la sua immagine. Può nascere la necessità di dover ricorrere a dei mezzucci per ottimizzare lo spazio sulla pagina oppure per evitare che l'utente abbia libero accesso al tasto destro del mouse.
Non voglio con questo indurre l'utente a credere che in questa sede si parlerà di come proteggere il codice delle pagine oppure altri elementi caratteristici da occhi indiscreti, voglio solo con voi realizzare un simpatico menu che si aprirà alla pressione del tasto destro del mouse sulla pagina, sostituendo il classico popup di Windows.
Costruzione del menu
Analizziamo il problema. Dobbiamo da qualche parte della pagina inserire il codice per la materiale costruzione del menu, possiamo farlo in qualsiasi punto della pagina. Il menu comunque seguirà il mouse a seconda del punto dell'area della pagina in cui viene cliccato il tasto destro.
Inseriamo questo codice all'interno della pagina, ad esempio all'inizio, subito dopo l'apertura del tag <body>:
<div id="menu" style="display: None;">
<div id ="pos" style="position: Absolute;">
<div class="menuLinks"
onMouseOver="this.style.color='#FFFFFF';this.style.background='#003366'"
onMouseOut="this.style.color='#000000';this.style.background='#EEEEEÈ"
onClick="link('http://www.lukeonweb.net')">homepage
</div>
</div>
</div>
Esaminiamo la struttura di questo codice andando per gerarchia: il padre è un layer di tipo <div> a cui assegnamo un identificatore di tipo id che ci servirà in fase di realizzazione dello script, poi gli assegnamo una proprietà di stile, display: None; per impostarlo nascosto al caricamento della pagina. Anche il figlio un layer di tipo <div> a cui assegnamo un altro identificatore di tipo id che ci servirà sempre in seguito, poi gli assegnamo la proprietà di stile position: Absolute; per far si che i layers non sformattino la pagina all'apparizione del menu, in fine costruiamo il menu vero e proprio con tanti layers quante dovranno essere le voci del menu, nel codice di esempio abbiamo "dichiarato" una sola voce.
Per aumentare le voci del menu è sufficiente copiare de incollare quest'ultimo elemento, modificando soltanto la voce del menu (nell'esempio homepage) ed il relativo indirizzo (nell'esempio http://pro.html.it).
Prima di passare alla spiegazione completa di detta parte di codice, è necessario definire il foglio di stile che utilizzeremo per formattare il menu.
Stilizzazione del menu
Ecco il codice per rendere stilisticamente gradevole il menu:
<style type="text/css">
div.menuLinks {
background: #EEEEEE; /* definisce il colore di sfondo */
color: #000000; /* definisce il colore della voce del menu */
font-size: 11px; /* definisce le dimensioni del testo */
font-family: Verdana; /* definisce il carattere utilizzato */
width: 130px; /* definisce la larghezza del layer */
padding: 3px; /* definisce l'area interna del singolo link */
border-top: Solid 1px #CCCCCC; /* definisce il bordo superiore */
border-left: Solid 1px #CCCCCC; /* definisce il bordo sinistro */
border-right: Solid 1px #CCCCCC; /* definisce il bordo destro */
cursor: Default; /* definisce il puntatore del mouse */
}
</style>
Gli stili da assegnare al menu prescindono dal suo funzionamento finale, io mi sono tenuto più o meno sullo stile del popup du Windows per non confondere troppo le idee sia al lettore meno esperto, sia ad un eventuale utente poco pratico. L'unica accortenza legata al codice CSS appena presentato è legata al codice che abbiamo lasciato in sospeso che vado ora a riprendere.
Il funzionamento dei singoli link
<div class="menuLinks"
onMouseOver="this.style.color='#FFFFFF';this.style.background='#003366'"
onMouseOut="this.style.color='#000000';this.style.background='#EEEEEÈ"
onClick="link('http://www.lukeonweb.net')">homepage
</div>
Esaminiamo singolarmente le proprietà (o attributi, per "dirla in Html") che "passiamo" al layer:
- class="menuLinks" richiama mediante una classe il foglio di stile appena creato
- onMouseOver="..." al passaggio del mouse sul link scateniamo due avvenimenti, this.style.color='#FFFFFF' per modificare il colore del testo e this.style.background='#003366' per modificare il colore di sfondo, avendo cura di inserire tra i due codice un punto e virgola (;) di separazione
- onMouseOut="..." reimposta le proprietà di stile iniziali, seguendo lo stesso criterio descritto in precedenza
- onClick="link('http:// ... ')" fa riferimento alla funzione link() che andremo a descrivere tra breve
Descrizione delle funzioni Javascript
Per rendere funzionale il menu abbiamo bisogno di due funzioni, una che si occupa di rendere visibile il menu al click del tasto destro del mouse e che faccia sì che il menu appaia sempre nel punto della pagina in cui il mouse "ha cliccato", l'altra che serve semplicemente a creare dinamicamente i collegamenti ipertestuali associati alle relative voci, tra breve le esamineremo entrambe.
Creazione dei collegamenti ipertestuali
Esaminiamo brevemente la funzione link() per generare dinamicamente i collegamenti ipertestuali, ecco il codice:
function link(url) {
location.href = url;
}
Nel nome della funzione "passiamo" tra parentesi un parametro che abbiamo chiamato url a cui fa riferimento il reale codice per la creazione del link, location.href, utilizziamo questo metodo per snellire il codice all'interno del layer, che altrimenti sarebbe stato
onClick="location.href('http://www.lukeonweb.net')"
Se si vuole aprire tutti i link in una nuova finestra sarà sufficiente modificare la funzione link() in questo modo:
function link(url) {
window.open(url);
}
Creazione dello script per l'apparizione del menu
Eccoci finalmente giunti alla parte clou del programmino, la creazione dello script per l'apparizione del menu. Visualizziamo il codice prima di spezzettarlo e studiarlo nei minimi dettagli:
function MenuTxDx() {
var sinistra = window.event.x;
var sopra = window.event.y;
menu.style.display = "";
pos.style.left = sinistra;
pos.style.top = sopra;
return false;
}
Dichiariamo immediatamente due variabili, sinistra e sopra che servono a rilevare le coordinate del mouse rispettivamente dal bordo sinistro e dal bordo superiore dell'area della pagina. Gli oggetti utilizzati sono: window.event.[coordinata (x e/o y)].
A questo punto ci tornano utili gli identificatori id assegnati in precedenza ai layer "padre" e "figlio", ovvero rispettivamente menu e pos (che sta per "posizionamento").
Il layer "padre" (id="menu") sarà in questo modo reso visibile grazie a menu.style.display = "";, mentre al layer "figlio" (id="pos") verrà affidato il compito di seguire il puntatore del mouse al relativo evento, grazie a pos.style.left = sinistra; e pos.style.top = sopra; a cui fanno riferimento le variabili descritte in precedenza.
Specifichiamo in fine un return false; per evitare che si apra in seguito anche il normale menu popup di Windows.
Un ultimo tocco ed il menu è pronto :-)
Dalle mie parti si dice "non perdiamo la minestra per un acino di sale", che tradotto in altri termini vuol dire "non dimentichiamoci di definire gli eventi"!!!
L'elemento HTML a cui dobbiamo far riferimento per scatenare l'apparizione del menu è il <body> a cui devono far riferimento gli eventi onContextMenu per identificare la pressione del tasto destro e onClick per nascondere il menu esattamente come per il menu popup di Windows: cliccando al di fuori del menu in un punto qualsiasi della pagina. Ecco il codice:
<body onContextMenu="return MenuTxDx()" onClick="menu.style.display='NonÈ">
Conclusioni
La compatibilità del menu con i vari browser che popolano i PC dei navigatori non è del tutto garantita, in partenza il menu è creato per un perfetto funzionamento con Internet Explorer, le ultime specifiche in tema dettate dal W3C fanno sì che i vari browser si adeguassero e si attrezzassero per il supporto delle componenti utilizzate per questo script, ma il tanto bramato "crossbrowser" non troverà di certo pieno soddisfacimento con uno strumento del genere, che rimane comunque un ottimo metodo per sviluppare un minimo di fantasia mediante la combinazione di pochi e funzionali codici.
