Gestione dei menu semplici. Per creare dei menu sfruttando la pseudoclasse a:hover, abbiamo due...

17
Gestione dei menu semplici

Transcript of Gestione dei menu semplici. Per creare dei menu sfruttando la pseudoclasse a:hover, abbiamo due...

Page 1: 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.

Gestione dei menu semplici

Page 2: 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.

• 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

Page 3: 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.

CSS Sprite

• Sono di fatto un’unica 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 l’ausilio di codice CSS al fine di aver una sola richiesta (HTTP request), alleggerendo la pagina e velocizzandone la visualizzazione.

Page 4: 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.

E’ una tecnica molto utilizzata per oggetti che cambiano stato al passaggio del mouse.

In sostanza, il segreto sta nel posizionare una diversa parte dell’immagine utilizzando le coordinate css, a seconda dello stato in cui si trova l’oggetto.

Page 5: 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.
Page 6: 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.

Creare un menu CSS sprite - HTML

<div id="menu">

<ul>

<li><a href="#" class="home">HOME</a></li>

<li><a href="#" class="storia">LA STORIA</a></li>

<li><a href="#" class="chi_siamo">CHI SIAMO</a></li>

<li><a href="#" class="mappa">MAPPA</a></li>

<li><a href="#" class="contatti">CONTATTI</a></li>

</ul>

</div>

Assegnamo ad ogni voce di menu una classe differente, che verrà utilizzata poi per determinare le specifiche proprietà di ogni singola voce di menu.

Page 7: 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.

CSS• Definiamo poi la larghezza della UL, che corrisponderà esattamenta

alla larghezza dell’immagine SPRITE che abbiamo creato per il menu.• Inoltre, definiamo l’altezza di ogni link, dichiarando che ogni oggetto

link è di tipo blocco, e dando come altezza la metà dell’altezza dell’immagine Sprite.

Page 8: 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.

Il testo dei link

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

Page 9: 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.

• Il trucco, è assegnare ad ogni link una porzione differente dell’immagine sprite, utilizzando la proprietà del background position.

• Di fatto, si carica una volta sola l’immagina sprite e la si applica piu volte spostandola con il positioning

Page 10: 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.

96 px 108 px 97 px 121 px 94 px

204 px

301 px

422 px

Page 11: 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.

Cosa succede sull’hover?

• Rimangono uguali gli spostamenti del background sull’asse orizzontale

• Aggiungiamo uno spostamento anche in verticale

Page 12: 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.

56 px

Page 13: 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.

a:hover

a

Page 14: 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.

Menu con display:block su link

Page 15: 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.

• Un’altra soluzione per gestire un menu è quella di assegnare ad un link all’interno di una struttura <ul><li> 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.

Page 16: 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.
Page 17: 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.

• 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;