Programmazione Web » Css » Realizzare un menu a tab
Realizzare un menu a tab
Difficoltà:
Scritto da Alberto Giuliani
Sito Web: http://www.agwebsolutions.it 
Questo tutorial è stato letto 1286 volte
In questo tutorial vedremo come realizzare un menu a schede con i CSS. Si tratta sicuramente di una tipologia di menu elegante ed interessante. Eccone un'anteprima.
Probabilmente molti non lo crederanno, ma non utilizzeremo immagini o codici complessi... solo ed esclusivamente codice XHTML e CSS.
Supponiamo di avere un sito a cinque pagine. Ecco il codice CSS da inserire nelle pagine:
<style type="text/css">
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link { color: #448;
}
#navlist li a:visited { color: #667;
}
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#corrente {
background: white;
border-bottom: 1px solid white;
}
</style>
Da notare in questo codice come si lavori sui bordi dei div: vi è un contenitore globale con un bordo inferiore, e la voce del menu che corrisponde alla pagina corrente viene presentata senza bordo.
Quindi inseriamo nella prima pagina questo codice:
<div align="center"> </div>
<div id="contenitoremenu">
<ul id="navlist">
<li id="attivo"><a href="#" id="corrente">pagina uno</a></li>
<li><a href="#">pagina due</a></li>
<li><a href="#">pagina tre</a></li>
<li><a href="#">pagina quattro</a></li>
<li><a href="#">pagina cinque</a></li>
</ul>
</div>
Da notare in questo codice la riga
<li id="attivo"><a href="#" id="corrente">pagina uno</a></li>
che imposta come link corrente quello alla pagina uno, ossia presenta in modo diverso il link della pagina corrente.
Dovrete quindi impostarlo diversamente a seconda della pagina.
A voi il compito di personalizzare il set di colori. Possiamo personalizzare questo codice in diverse maniere, aggiungendo effetti al nostro menu.
Aggiungi questo tutorial ai preferiti
