Programmazione Web » Css » Creare un menu con effetto rollover senza immagini
Creare un menu con effetto rollover senza immagini
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1398 volte
Oggi vedremo come è possibile realizzare un menu con effetto rollover grazie ai css e senza ricorrere ad immagini di background che potrebbero appesantire il nostro sito!
Innanzitutto dobbiamo definire i vari stili per il tag <div>!
<style>
/* imposto lo stile per il contenitore del menu */
div#menu {
border: 1px solid red;
width: 120px;
padding: 1px;
background-color: #ffcc66;
}
/* imposto lo stile per i link */
div#menu a {
background-color: #FFCC00;
color: black;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
border: 1px solid red;
display: block;
margin: 2px;
}
/* imposto lo stile per l'effetto rollover */
div#menu a:hover {
border: 1px solid red;
background-color: orange;
color: blue;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
</style>
Ovviamente questo codice va incollato tra <head> e </head> o meglio ancora salvato in un file css per poi essere richiamato come foglio esterno nel vostro Html.
Intervenite nel codice per cambiare i colori, i bordi etc... ma fatelo solo se sapete dove mettere le mani!!!
Ed ora costruiamo il menu vero e proprio in un <div> di nome menu:
<div id="menu">
<a href="home.php">HOMEPAGE</a>
<a href="chisono.php">CHI SONO</a>
<a href="lezioni.php">LEZIONI</a>
<a href="manuali.php">MANUALI</a>
<a href="guestbook.php">GUESTBOOK</a>
<a href="mailto:nome@email.it">CONTATTI</a>
</div>
Modificate l'elenco dei link come vi pare e piace. Se dovete allungare il menu basta aggiungere questa riga (prima della chiusura del </div> e cambiare i dati:
<a href="pagina.php">LINK DA AGGIUNGERE</a>.
Aggiungi questo tutorial ai preferiti
