Principale

Webmaster

Realizzare un elegante menu a schede

Scritto da Alberto Giuliani (http://www.agwebsolutions.it/) il 31 luglio 2005

In questo tutorial vedremo come realizzare un menu a schede con i CSS, di cui un'anteprima a questo link

Si tratta sicuramente di una tipologia di menu elegante ed interessante.

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:


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;
}


Da notare di 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:


HTML
<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 di questo codice la riga


HTML
<li id="attivo"><a href="#" id="corrente">pagina uno</a></li>

che imposta come link corrente quello alla pagina 1, 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.





Pagine totali: 1 [ 1 ]

Online:

Ci sono 6 utenti online, 0 della community e 6 ospiti.

Partners:

Debt • Phoenix Pools • Car Insurance • Credit Card Consolidation • DevSpy.com • Giornale Webmaster • MrWebmaster.it • Serverplan