CSS  »  Articoli  »  CSS Menu 

L'oggetto DelayMenu contiene alcune proprietà private, alcuni metodi privati che ci consentono di avere utili shortcuts per operazioni ricorrenti, come addclass e removeclass (sui quali non ci soffermiamo, il loro significato dovrebbe essere chiaro), metodi privilegiati (per cambiare le proprietà private) e un metodo pubblico 'init': analizziamolo in dettaglio.

Il primo costrutto 'if', controlla la presenza dell'ultima parte di codice CSS (quella cioè deputata all'apertura del secondo livello del menu tramite semplice :hover) e quindi la rimuove, in modo da non interferire con il restante codice Javascript.

A questo punto le regole CSS restanti sono quelle che gestiscono l'evento :hover, ma solo in presenza di list-items (<li>) che hanno una classe chiamata 'jshovered'.

Nel ciclo 'for' seguente valorizziamo un array con i riferimenti ai list-items di primo livello (identificati anche grazie all'attributo 'rel' dei link annidati, definiti appositamente a tale scopo). Nell'array escludiamo anche quei list-items che hanno classe 'current', ovvero quelli che sono già aperti (perchè ad esempio ci troviamo in una pagina di quello specifico livello) e che non necessitano di essere gestiti via Javascript.

Dopodiché cicliamo sulla lunghezza dell'array per definire gli eventi 'onmouseover' e 'onmouseout' (sui list-items stessi), rispettivamente in modo da aggiungere e rimuovere la classe 'jshovered' (nota: la sintassi con cui sono state dichiarate queste funzioni garantisce una corretta implementazione delle closures e l'assenza di memory leaks su IE6).

Si noti che tali eventi sono controllati attraverso un setTimeout, il cui intervallo in millisecondi è impostabile attraverso l'apposito metodo privilegiato 'setHoverDelay'. Ogni volta che si verifica uno di questi due eventi un eventuale timeout settato in precedenza viene eliminato.

Infine, all'evento onload della pagina (meglio se gestito con un DOMLoad), istanziamo l'oggetto 'DelayMenu', settando un eventuale delay diverso da quello di default (scelto empiricamente in 300ms) e/o il nome della classe da settare/rimuovere. Il codice, così realizzato, ci consente quindi di avere più menu nella stessa pagina, ognuno dei quali sarà gestito da un'apposita istanza dell'oggetto (al quale dev'essere passato solo l'id del menu come argomento).

La compatibilità di questo script è stata testata su Internet Explorer 6 e 7, su Firefox 2+ per PC e Mac, su Firefox 3/Ubuntu Linux e su Safari 3.0.4 per Mac.

Come utile esercizio si lascia al lettore la facoltà di apportare altre modifiche al codice, ad esempio per poter gestire lo stesso effetto per menu a 3 o più livelli oppure per disattivare il ritardo di apertura di un sottolivello se un altro è già aperto e così via.

Altri articoli

Altre guide

Altre newsletter