1 / 17

Gestione dei menu semplici

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

stesha
Download Presentation

Gestione dei menu semplici

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Gestione dei menu semplici

  2. Per creare dei menu sfruttando la pseudoclassea:hover, abbiamo due possibilità: • 1) Utilizzare i cosi detti CSS spritee 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

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

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

  5. Creare un menu CSS sprite - HTML Assegnamo ad ogni voce di menu una classe differente, che verrà utilizzata poi per determinare le specifiche proprietà di ogni singola voce di menu. <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>

  6. 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.

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

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

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

  10. Cosa succede sull’hover? • Rimangono uguali gli spostamenti del background sull’asse orizzontale • Aggiungiamo uno spostamento anche in verticale

  11. 56 px

  12. a a:hover

  13. Menu con display:block su link

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

  15. 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;

More Related