Gestione dei menu semplici

Per creare dei menu sfruttando la pseudoclasse a:hover, abbiamo due possibilità: 1) Utilizzare i cosi detti CSS sprite e il posizionamento negativo dei background. In questo modo abbiamo piu possibilità di modellare graficamente gli oggetti del menu (trasparenze, ombreggiature … etc) 2) Applicare la proprietà display:block ad un oggetto a

CSS Sprite Sono di fatto ununica immagine, creata accorpando gli elementi fondamentali di una grafica web, con lo scopo di diminuire e ottimizzare il tempo di precaricamento. Questa tecnica che consiste nel caricare una singola immagine e spostarle con lausilio di codice CSS al fine di aver una sola richiesta (HTTP request), alleggerendo la pagina e velocizzandone la visualizzazione.

E una tecnica molto utilizzata per oggetti che cambiano stato al passaggio del mouse. In sostanza, il segreto sta nel posizionare una diversa parte dellimmagine utilizzando le coordinate css, a seconda dello stato in cui si trova loggetto.

Creare un menu CSS sprite - HTML HOME LA STORIA CHI SIAMO MAPPA CONTATTI Assegnamo ad ogni voce di menu una classe differente, che verrà utilizzata poi per determinare le specifiche proprietà di ogni singola voce di menu.

CSS Definiamo poi la larghezza della UL, che corrisponderà esattamenta alla larghezza dellimmagine SPRITE che abbiamo creato per il menu. Inoltre, definiamo laltezza di ogni link, dichiarando che ogni oggetto link è di tipo blocco, e dando come altezza la metà dellaltezza dellimmagine Sprite.

Il testo dei link Dando text indent facciamo collassare il testo dei link, in sostanza stiamo «nascondendo» il testo reale dei link per questo menu.

Il trucco, è assegnare ad ogni link una porzione differente dellimmagine sprite, utilizzando la proprietà del background position. Di fatto, si carica una volta sola limmagina sprite e la si applica piu volte spostandola con il positioning

96 px 108 px 97 px 121 px 94 px 204 px 301 px 422 px

Cosa succede sullhover? Rimangono uguali gli spostamenti del background sullasse orizzontale Aggiungiamo uno spostamento anche in verticale

56 px

a:hover a

Menu con display:block su link

Unaltra soluzione per gestire un menu è quella di assegnare ad un link allinterno di una struttura che si trova in un div, la proprietà display:block; Ovvero il nostro link non è piu di tipo inline, come di default sarebbe secondo le proprietà css, ma di tipo blocco. Possiamo quindi assegnargli una altezza e una larghezza.

Il trucco sta nel cambiare il background color e il colore del testo dei link, in maniera opportuna al cambio di stato, ovvero utilizzando la pseudoclasse a:hover;