| Precedente :: Successivo |
| Autore |
Messaggio |
mdweb
Dio maturo
Registrato: 18/12/07 16:59
Messaggi: 4412
|
 Inviato: 10 Feb 2008 10:41 Oggetto: Tutorial menu con icone |
 |
|
andate qua o
qua e scaricatevi le icone.
Prendiamo il nostro file HTML e per il menu inseriamo sto codice
| Codice: |
<ul id="sidebar">
<li id="home" class="seletto"><a href="#">home</a></li>
<li id="staff" ><a href="#">staff</a></li>
<li id="news"><a href="#">news</a></li>
</ul>
|
Nel CSS:
Ora rendiamo il tag ul che serve a contenere il menu float
| Codice: |
ul#sidebar{float:left;width:150px;}
|
Ora azzeriamo margin e padding e "disattiviamo la lista":
| Codice: |
ul#sidebar,ul#sidebar li{list-style-type:none;margin:0;padding:0}
|
Poi bisognare distanziare le varie voci di menu e affianchiamoli con questo codice
| Codice: |
ul#sidebar li{float:left ;margin-right:7px;}
|
Il gioco è quasi finito basta inserire la parte del codice per i link sempre nel CSS:
| Codice: |
ul#sidebar a{float:left; padding:6px 0 5px 18px;
text-decoration:underline;color:#000000}
|
Con il codice di sopra grazie al padding sopostiamo la scritta in modo che le icone che andremo a mettere si vedano.
*************************************************************
Mettiamo lo stato hover
| Codice: | | ul#sidebar a:hover{border-bottom: 3px solid #ccc;color:#999} |
E ora lo stato attivo cioè per la voce del menu selezionata
| Codice: |
ul#sidebar li.seletto a,ul#sidebar li.seletto a:hover{
color:#000;border-bottom: 3px solid #333}
|
Non resta che mettere le immagini di sfondo!
| Codice: |
li#home a{background: url(house.gif) no-repeat left center}
li#staff a{background: url(user.gif) no-repeat left center}
li#news a{background: url(news.gif) no-repeat left center}
|
Buona fortuna |
|
| Top |
|
 |
kluster
Dio maturo
Registrato: 15/04/06 13:14
Messaggi: 2898
|
| Inviato: 11 Feb 2008 18:48 Oggetto: |
|
|
| Ottimo, grazie per la segnalazione. |
|
| Top |
|
|
mdweb
Dio maturo
Registrato: 18/12/07 16:59
Messaggi: 4412
|
| Inviato: 11 Feb 2008 18:51 Oggetto: |
 |
|
prego  |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
