Un menu semplicissimo, creato da me
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">Home</a></li>
<li><a href="prova.php" title="chi siamo">Chi siamo</a></li>
<li><a href="prova.php" title="dove siamo">Dove siamo</a></li>
<li><a href="servizi.php" title="servizi">Servizi</a></li>
<li><a href="contatti.php" title="contatti">Contatti</a></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">Home</a></li><li><a href="prova.php">Chi siamo</a></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!
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
7 Commenti
bello, la prossima volta però metti un link a una pagina in cui vedere all’opera il tuo codice
eheh hai ragione, ora lo metto. è che l’ho leggermente modificato dall’aspetto iniziale.
lo aggiungo su
grandeeeeeee, lo devo provare prima possibile
bella prova per un menù semoplice !
una nota per iniziare a lavorare “pensando accessibile”
in ogni a inseire la proprietà title in questo modo:
Chi siamo
giusto! modifico direttamente il codice
Grazie a questo post ho capito perchè mi metteva dei margini fra gli elementi “” di una lista “display:inline”. Ora come tu hai scritto li ho messi tutti attaccati sulla stessa riga ed ho risolto il problema.
Ciao e grazie.
Prego, ringraziamo Gianluca Troiani!!