Oggi vi mostro come si fa un semplicissimo menu, dall’aspetto molto simile a quelli di css library ma ancora più semplice.
E’ preso da questo sito, da me fatto. Ma attenzione poichè sarà online ancora per poco (è in preparazione un restyling), non appena ho tempo sostituirò il link con una pagina vuota che linka al solo menu: www.centroanagnina.com
Ecco intanto il codice html di esempio:
<ul id="menu">
<li class="vocecorrente"><a href="prova.php" title="homepage">Homea>li>
<li><a href="prova.php" title="chi siamo">Chi siamoa>li>
<li><a href="prova.php" title="dove siamo">Dove siamoa>li>
<li><a href="servizi.php" title="servizi">Servizia>li>
<li><a href="contatti.php" title="contatti">Contattia>li>
ul>
Come vedete abbiamo una lista non ordinata al quale è associato un id “menu”, e poi delle semplicissime voci di lista con dei link.
A titolo di esempio, per mostrare un effetto “voi siete qui”, da non trascurare quando create un menu, abbiamo associato una classe alla prima voce di menu, andremo a vedere come si comporterà in un secondo momento.
Andiamo innanzitutto a creare (o in questo caso potete anche scaricarle da qui) le due immagini sfumate che daranno l’effetto di rollover e di stato normale ai link:
Dopodiche cominciamo a formattare i nostri elementi, partendo dall’elemento lista:
ul#menu {
margin: 0;
padding: 0;
list-style: none;
background-image: url(immagini/grigio.gif);
background-repeat: repeat-x;
}
siamo semplicemente andati ad azzerare margini e padding e gli abbiamo detto di non usare alcuno stile per la lista in oggetto. Inoltre gli abbiamo detto di usare come sfondo grigio.gif ripetuta orizzontalmente.
ul#menu li {
margin: 0;
padding: 0;
display: inline;
}
Anche qui azzeriamo tutto e diciamo agli elementi lista di disporsi orizzontalmente.
Talvolta, quando usiamo il display: inline; vedrete che i browser aggiungono fra un elemento lista e l’altro un po’ di margine. Questo sembra essere dovuto al tipo di formattazione che diamo alla lista quando la scriviamo addirittura nell’html. I rimandi a capo vengono infatti letti come elementi in più! Per ovviare a questo basta disporre continuativamente, nel codice html, gli elementi lista senza spazi fra di loro, in questo modo:
<ul id="menu">
<li class="vocecorrente"><a href="prova.php">Homea>li><li><a href="prova.php">Chi siamoa>li>
...
ul>
Ovviamente fatelo solo in un secondo momento, quando avrete già scritto per bene tutti i links etc altrimenti vi confondete le idee eheh
In alternativa ponete il margine sinistro del vostro elemento lista a -1.2em.
Ora, andiamo a formattare i nostri links. Sono proprio loro infatti a definire l’aspetto del menu in questo esempio.
ul#menu a {
padding: 14px 4px 8px 4px;
border-top: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-right: 1px solid #c3c3c3;
border-left: 0;
text-decoration: none; /*eliminiamo l'effetto di sottolineatura dei link */
margin: 0;
font-weight: bold;
}
E ora definiamo tutti gli stati dei link nonchè lo stile della classe “vocecorrente”:
#menu a:link,
#menu a:visited {
color: #666666;
font-weight: bold;
}
#menu a:hover,
#menu a:focus,
#menu a:active {
color: #ffffff;
font-weight: bold;
background-image: url(immagini/sfondoblu.gif);
background-repeat: repeat;
border-bottom: 1px solid #455B9C;
border-right: 1px solid #455B9C;
}
#menu .vocecorrente a:link,
#menu .vocecorrente a:visited,
#menu .vocecorrente a:focus,
#menu .vocecorrente a:active,
#menu .vocecorrente a:hover{
color: #ffffff;
font-weight: bold;
background-image: url(immagini/sfondoblu.gif);
background-repeat: repeat-x;
border-bottom: 1px solid #455B9C;
border-right: 1px solid #455B9C;
}
Avete visto come l’inserimento di semplici bordi ai link ha dato quell’effetto ombra/luce alle estremità. Basta scegliere i colori giusti e l’effetto è assicurato!
Provate!
