Menu superiore a 5 link estendibili molto bello:

postato il: 21/12/2005 rivisto il:25/04/2007 --- scritto da: lupo91

 

Vi insegnerò a creare un bel menu superiore con i css, non è molto difficile, e potete ampliarlo e cambiarli i colori modificando un semplice codice, per prima cosa:

copiate questo codice che va inserito in tutte le pagine dove volete che appaia il menu:

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

Dopo di che inserite nella prima pagina quest'altro codice:

<div align="center">&nbsp;</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>

Piccolo accorgimento dell'ultimo codice, nella riga 5, va inserito dove c'è # il link dove indirizzare la pagina, e dove c'è scritto pagina uno, cioè che volete appaia, per esempio Home, e dove c'è # inserite il link della vostra homepage (prima pagina).

Il risultato finale è questo: risultato