Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Rollover css

Rollover css

di GDesign, 22 Settembre 2003

Versione Stampabile


In questo articolo vedremo come realizzare un elenco di link con effetto rollover utilizzando i fogli di stile css. Un elenco di link di questo tipo risulta particolarmente adatto per essere utilizzato come menu di navigazione per un sito web.

Creiamo subito una pagina html ed inseriamo un semplice elenco non-ordinato di link (dato che il menu ha uno scopo puramente didattico usiamo link fittizi con href=”#”) con questo codice:

<DIV ID="navmenu">
<UL>
<LI><A href="#">Home</A></LI>
<LI><A href="#">Html</A></LI>
<LI><A href="#">How To</A></LI>
<LI><A href="#">Link</A></LI>
<LI><A href="#">Tips</A></LI>
</UL>
</DIV>

Adesso il nostro elenco si presenta così:

Aggiungiamo un foglio di stile interno alla nostra pagina html inserendo tra <HEAD> e </HEAD> il seguente codice:

<STYLE TYPE="text/css">
</STYLE>

Evidentemente è possibile utilizzare anche un foglio di stile esterno. Per saperne di più sul funzionamento dei css potete consultare l'articolo "I fogli di stile Css" presente in questo sito.

Da questo punto in poi definiremo le proprietà dell'elenco di link agendo solamente sul foglio di stile. Eliminiamo i punti elenco html ed impostiamo per <UL> i valori di margin e padding a zero scrivendo tra <STYLE TYPE="text/css"> e </STYLE> il seguente codice:

#navmenu ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

e vediamo il risultato:

Adesso impostiamo alcune proprietà per <A>; in particolare convertiamo le voci dell’elenco in blocchi, impostiamo il colore dei caratteri e dello di sfondo ai link, definiamo la larghezza dell'elenco, impostiamo un valore di padding e rimuoviamo la sottolineatura ai link. Quindi, sempre tra <STYLE> e </STYLE>, scriviamo:

#navmenu a
{

display: block;
color: #FFFFFF;
background-color: #000066;
width: 100px;
padding: 2px 8px;
text-decoration: none;
}

e diamo un’occhiata al nostro elenco:

A questo punto definiamo le proprietà dei link al passaggio del mouse ed in particolare impostiamo il colore dei caratteri e dello di sfondo inserendo nel foglio di stile:

#navmenu a:hover
{

background-color: #003399;
color: #FFFFFF;
}

Abbiamo quasi finito, non ci resta che separare tra di loro le voci del nostro elenco applicando un margine inferiore all’elemento LI in questo modo:

#navmenu li { margin-bottom: 2px; }

Ecco il risultato finale del nostro lavoro:

Modificando i colori, il padding o il margin ed impostando altre proprietà possiamo realizzare tantissimi tipi di menu differenti. Per fare un esempio, cambiando i colori ed impostando i bordi, otteniamo un menu con l’effetto a bottoni che vengono "pressati" al passaggio del mouse. Quindi il foglio di stile diventa:

#navmenu ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#navmenu a
{

display: block;
color: #000066;
background-color: transparent;
width: 100px;
padding: 2px 8px;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #000066;
border-bottom: 1px solid #000066;
}
#navmenu a:hover
{

background-color: #003399;
color: #FFFFFF;
border-top: 1px solid #000066;
border-left: 1px solid #000066;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
#navmenu li { margin-bottom: 2px; }

e questo è il risultato:

Dopo la lettura di questo articolo dovreste essere in grado di creare facilmente i vostri menu; sbizzarritevi a provare e per qualsiasi dubbio non esitate a contattarmi.

^Top

Dai un voto a questo articolo:   HITS: 1 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 1