Creare un menu orizzontale
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU
• Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste di
collegamenti:
<ul>
<li><a href="…">Collegamento 1</a></li>
<li><a href="…">Collegamento 2</a></li>
<li><a href="…">Collegamento 3</a></li>
<li><a href="…">Collegamento 4</a></li>
<li><a href="…">Collegamento 5</a></li>
</ul>
• Tuttavia, il classico aspetto delle liste rende poco “attraente” un menu
realizzato in questo modo
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU
• Per ottenere un menu verticale dall’aspetto più accattivante a partire da una
lista, come prima cosa dovremo letteralmente eliminare la formattazione “a
lista”
ul { margin:0; padding:0; }
li { display:inline; }
SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU
FORMATTARE LE LISTE DI LINK  MENU
• Quando si usano i CSS per gestire un menu di collegamenti è
possibile sfruttare le pseudo-classi a:link, a:visited,
a:hover, a:active per creare effetti roll-over senza
utilizzare il javascript, con ovvi vantaggi
• Avendo eliminato le varie proprietà della lista, per fornire
l’aspetto desiderato al menu dovremo agire direttamente sui
tag <a> e le loro pseudo-classi
a:pseudoclasses
• a:link viene usato per elaborare lo stile di un link non ancora visitato
• a:active aspetto del link all’atto del click.
• a:visited aspetto del link dopo averlo visitato
• a:active dovrebbero venire dopo gli a:hover (se presente) nella
definizione CSS in modo da essere efficace!
Display:block
Realizziamo il menu
<ul>
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
Il css per la lista e gli item list
ul{
list-style: none; <- toglie il pallino dalla lista
width:900px;
}
li{
float: left;
display: block; <- forza un oggetto a comportarsi come se fosse un box
margin: 2px;
width: 150px; <- quindi essendo un blocco, possiamo dargli delle dimensioni
height: 30px;
}
Il css per il comportamento dei link
ul li a{
red;
}
display: block;
width: 150px;
height: 30px;
text-align:center;
text-decoration: none;
padding-top: 5px;
border-bottom: 5px solid
background-color:#FC6;
color:#F30;
ul li a:hover{
border-bottom: 5px solid #FC6;
background-color:red;
color:#630;
}
Soluzione 2 – display inline-block
a{
display: inline-block;
width: 150px;
height: 30px;
text-align:center;
text-decoration: none;
padding-top: 5px;
border-bottom: 5px solid red;
background-color:#FC6;
color:#F30;
}
a:hover{
border-bottom: 5px solid #FC6;
background-color:red;
color:#630;
}
• 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 o display: inine-block ad un
oggetto di tipo <a>
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.
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.
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>
CSS
• Definiamo poi la larghezza della UL, che corrisponderà esattamente
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.
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.
• 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
96 px
108 px
97 px
204 px
301 px
422 px
121 px
94 px
Cosa succede sull’hover?
• Rimangono uguali gli
spostamenti del
background sull’asse
orizzontale
• Aggiungiamo uno
spostamento anche in
verticale
56 px
a
a:hover