CSS  »  Articoli  »  CSS Menu 

In questo articolo, suddiviso in tre parti, vedremo diversi modi per creare menu con rollover e preload solo tramite i fogli di stile. Iniziamo con il definire questi due termini inglesi ormai d'uso comune nel webdesign.

Il rollover è una tecnica che si utilizza quando si vuole cambiare la presentazione di uno o più elementi di una pagina web al passaggio del mouse da parte dell'utente. Si tratta generalmente (e aggiungo: si dovrebbe trattare esclusivamente) di elementi ipertestuali, cioè link. Infatti, è buona normale far capire all'utente, attraverso una transizione di stato, che ha appena messo il mouse sopra un link. Il rollover può essere realizzato attraverso i css e la modifica di proprietà quali bordi, colore, peso del font, sottolineatura o altro. Può anche essere realizzato modificando lo sfondo o l'elemento grafico stesso. È di questi due ultimi casi che ci occuperemo in questo articolo.

Il preload è una tecnica che consente di precaricare un'immagine di modo che, ultimato il caricamento totale della pagina, al momento del rollover l'immagine di cambio sia già disponibile sulla macchina dell'utente e non si debba aspettare il caricamento della stessa. In questo modo la transizione sarà immediata anche al primo passaggio mouse.

Come è facile immaginare, rollover e preload coinvolgono principalmente menu di navigazione, ed è di questo che ci occuperemo in questi due articoli. Si tratta di meccanismi che nel web design "vecchia maniera" venivano svolti esclusivamente con Javascript.

Orientare l'utente nella navigazione

Prima di addentrarci nella realizzazione pratica dei menu, una piccola introduzione sull'usabilità di un menu di navigazione. Ci sono alcuni principi di cui si dovrebbe tenere sempre conto:

• l'utente dovrebbe poter capire facilmente dove può andare: è quindi indispensabile avere una navigazione chiara e ben distinta dal resto della pagina, sia a livello spaziale che di colore;
• è importante distinguere i link al passaggio del mouse: questo per far capire all'utente che il cambiamento di stato del link, grazie al rollover, indica un possibile cambiamento di pagina;
• l'utente dovrebbe poter capire immediatamente dove si trova: è quindi importante distinguere la pagina/sezione corrente tramite il menu.

Vedremo nel corso dell'articolo come sia possibile tener conto facilmente delle tre regolette viste sopra e realizzarle praticamente grazie ad HTML e CSS.

Menu a due stati

Questa tecnica è ispirata all'ottimo tutorial CSS Uberlink menu di projectseven.com, apparso a metà giugno del 2003. Vedremo brevemente come realizzare un menu molto simile, con alcune piccole modifiche rispetto alla versione originale volte all'accessibilità e la compatibilità cross-browser.

Il menu presentato su Projectseven ha infatti due piccoli difetti: usa un font dimensionato in pixel e dichiara nei link dimensioni e padding, così da avere sostanziali differenze di visualizzazione tra Internet Explorer 5.x e gli altri browsers, come spiegato nel mio articolo Capire il box model. Vedremo come sia possibile evitare del tutto l'uso del padding (e di conseguenza del box model hack) ed avere un menu con testo ridimensionabile che rende in maniera omogenea su tutti i browsers.

Un menu di questo tipo usa due immagini di sfondo per i due stati dei link:

• stato normale o di riposo:
• stato attivo/hover insieme:

Lo stato attivo e lo stato hover dei link coincidono visivamente. Questa tecnica ha due vantaggi: la pagina corrente viene evidenziata e l'immagine di sfondo per lo stato hover è così già precaricata per il rollover.

Altri articoli

Altre guide

Altre newsletter