Creiamo dei link con i CSS.

In un precedente tutorial abbiamo visto come realizzare dei link in html. Vediamo adesso come realizzarli con i CSS.

In all'articolo troverete il link per scaricare l'esempio funzionante e il codice che serve. L'allegato è in formato zip, scompattatelo e aprite il file con il vostro browser per vedere in funzione il menu, potete anche aprirlo con un editor html (tipo Dreamweaver o altro, oppure con il semplice blocco notes di windows), in modo da poter provare a fare modifiche oppure utilizzarlo per i vostri lavori.

Per realizzare il menu utilizziamo gli elenchi e i loro relativi tags <ul> e <li>.

Scriviamo il codice html che serve.
<html>
<head>
<title>menu orizzontale</title>
</head>

<body>
<div id="menu">
<ul>
  <li><a href="home.html" target="blank">HOME</a></li>
  <li><a href="azienda.html" target="blank">AZIENDA</a></li>
  <li><a href="prodotti.html" target="blank">PRODOTTI</a></li>
  <li><a href="contatti.html" target="blank">CONTATTI</a></li>
</ul>
</div>

</body>
</html>

Per il momento il menu avrà questo aspetto:

Adesso andiamo nell'head e inseriamo il css.
<tyle type="text/css">
#menu {
background-color:#f00; 
width:500px;
text-align:center; 
}
#menu ul {
margin:0px; 
padding:0px;
}
#menu li { 
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
display:inline; 
}
#menu a:link { 
color:#fff;
text-decoration:none;
padding:0px 20px 0px 20px; 
line-height:50px; 
}
#menu a:hover { 
color:#000;
}
#menu a:active { 
color:#0000ff;
}
#menu a:visited { 
color:#000;
}
</style>

Adesso il menu si presenta così:

Il codice html è servito a realizzare la struttura del menu, il css è servito a conferirgli misure, colore di fondo, formattazione del testo, disposizione in orizzontale.

I 4 stati dei link sono:
a:link = lo stato di partenza
a:hover = quando il mouse passa sopra il link
a:active = quando si clicca il link con il mouse
a:visited = designa il link gia visitato

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *