Scarichiamo la libreria Mootools dal sito ufficiale. Copiamo il file mootools.js in una directory js e creiamo tre cartelle di nome js, css, e images. Inseriamo un file di nome menu_con_effetti.html e nella cartella js creiamo un file di nome menu.js. Nella directory css andremo a creare un documente chiamato menu.css e, giunti a questo punto, apriamo i nostri file con un editor di testo dove scriveremo il codice della nostra homepage che esporrà due menu che si ingrandiscono al passaggio del mouse.
Il file menu_con_effetti.html è il più complesso dei tre che guarderemo. Per farlo funzionare è necessario inserire fin da subito un'intestazione che ci permette di validare il contenuto dinamico della nostra pagina.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Inoltre è necessario includere subito la nostra libreria mootools.js che si trova nella directory js.
<script src="js/mootools.js" ></script>
Una volta fatto questo, dobbiamo pensare alla struttura che vogliamo dare alla nostra homepage. Nel nostro caso abbiamo pensato ad un grande contentore che abbiamo chiamato allPage che a sua volta contiene due layer rappresentati dal tag div, uno conterrà le voci di menu, mentre l'altro sarà utilizzato per mostrare i contenuti del nostro sito a seconda della voce di menu su cui cliccheremo.
E' interessante soffermarsi su alcune regole che abbiamo voluto dare al nostro menu. Ovvero' abbiamo fatto in modo che il menu Container ospitasse dei div di classe mainMenu con un id che fosse rappresentativo di cio' che il menu andrà a contenere. Successivamente a questi abbiamo inserito dei div di classe notSelectedArea che hanno id uguale al menu a cui sono associati piu la stringa content. In pratica al layer Menu assoceremo un layer Menucontent, mentre al layer Menu1 assoceremo il layer Menu1content.
<div id="menuContainer">
<div class="mainMenu" id="Menu" >
Home
</div>
<div id="Menucontent" class="notSelectedArea">
<a id="chi_siamo" href="#chi_siamo"
class="zone">Chi siamo</a><br>
<a id="dove_siamo" href="#dove_siamo"
class="zone">Dove siamo</a><br>
<a id="contattaci" href="#contattaci"
class="zone">Contattaci</a><br>
</div>
<div class="mainMenu" id="Menu1" >
Web 2.0
</div>
<div id="Menu1content" class="notSelectedArea">
<a id="community" href="#community"
class="zone">Community</a><br>
<a id="rss" href="#rss"
class="zone">RSS</a><br>
<a id="podcast" href="#podcast"
class="zone">PodCast</a><br>
</div>
</div>
Abbiamo applicato queste regole per semplicità, ma con mootools avremmo potuto creare dinamicamente i nostri elementi tramite alcune istruzioni che scopriremo nei prossimi Code-it. La stessa regola che abbiamo applicato per menuContainer sarà adottata anche per i contenuti di classe content_zone.
Nelle ultime righe del nostro codice HTML abbiamo segnalato al browser di leggere il codice javascript che si trova nella pagina menu.js. Innanzitutto impareremo a usare l'istruzione con cui attiviamo in maniera pulita i nostri controlli javascript: 'domready'.
window.addEvent('domready', …
Grazie a questa istruzione, MooTools, attenderà che sia pronta la pagina e tutti i suoi tag, dopodiche' istruirà il browser a creare effetti o modificare lo stile della nostra pagina, a seconda di cio' che scriveremo nelle istruzioni successive.
E' cosi' che in poche semplici righe andremo a rendere dinamici i nostri menu di classe mainMenu, raggruppandoli in un'unica funzione grazie a un potente mezzo messoci a disposizione da MooTools, che va sotto il nome di selector e che viene rappresentato da due simboli dollaro vicini.
$$('div.mainMenu').addEvents({
'mouseover': function() {]
[ $$('a.zone').addEvents({
'click': function() {
Aggiungere un effetto per la trasfromazione dei nostri layer è piu' lungo da scrivere che da implementare. Basta prendere un elemento e attaccare la parola morph con il nome della classe in cui vogliamo trasformare il nostro elemento.
$(this.id).morph('div.selectedMenu');
Il file di foglio di stile prende l'estensione css. Questo è l'unico che richiede alcune competenze particolari. Ma anche chi non le possiede non deve temere in quanto di esempi sul web se ne trovano a centinaia e inoltre sono molto semplici da leggere e imparare. Una volta apprese le informazioni principali su come si descrive un elemento nelle sue caratteristiche di larghezza, altezza, colore etc, i css diverranno sempre più insostituibili nei nostri lavori.
In pochi minuti abbiamo creato la nostra home page, che cambia contenuti a seconda di dove clicchiamo senza mai cambiare di pagina, nel classico stile a cui ci sta abituando il Web 2.0. Inoltre vediamo le aree di menu ingrandirsi e ridursi al passaggio del mouse con un effetto che prima si poteva vedere solo nei menu realizzati in flash.
