-
<?F.
User deleted
Guida alla creazione di menu
Per creare menu ci serviremo delle liste (Lista), opportunamente abbinate a CSS, che ci permetterà di produrre una vastissima gamma di menu diversi.
Infatti la struttura del codice HTML utilizzato sarà pressochè sempre la medesima:HTML<ul class="mymenu">
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a></li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>
Vediamo alcuni semplici casi in cui viene utilizzato il CSS per modificare la nostra lista:
Ma non ci dilunghiamo troppo su di essi, limitandoci a dire che vengono adoperati list-style-type e list-style-image per modificare i marcatori delle liste.
Quello che ci interessa e che utilizzeremo di volta in volta, è il terzo esempio, dove viene impiegato list-style: none; per "azzerare" la normale formattazione della lista e poter quindi poi liberamente introdurre le nostre personalizzazioni.
ATTENZIONE!
I codici di seguito forniti andranno inseriti:
CSS in Amministrazione > Grafica > Colori e stili (posizione indifferente all'interno del codice).
HTML in Amministrazione > Grafica > Codice HTML > dove volete posizionare il menu.
OPPURE
Codice Completo in Amministrazione > Grafica > Codice HTML > dove volete posizionare il menu.
Si ringrazia Listamatic per gli spunti forniti.
- Menu 1:CSS HTML CODICE.mymenu {
margin: 0;
padding: 0;
list-style: none
}
.mymenu li {padding-top: 1px}
.mymenu a:link, .mymenu a:visited {
display: block;
width: 160px;
padding: 3px;
background: #036;
color: #EEE;
text-decoration: none;
}
.mymenu a:hover {
background-color: #369;
color: #FFF
}HTML<ul class="mymenu">
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a></li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>
Codice Completo:SPOILER (clicca per visualizzare)CODICE<style>.mymenu {
margin: 0;
padding: 0;
list-style: none
}
.mymenu li {padding-top: 1px}
.mymenu a:link, .mymenu a:visited {
display: block;
width: 160px;
padding: 3px;
background: #036;
color: #EEE;
text-decoration: none;
}
.mymenu a:hover {
background-color: #369;
color: #FFF
}</style>
<ul class="mymenu">
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a></li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>
Spiegazione:margin: 0;
padding: 0;
list-style: none;Azzero i margini del menu e lo stile, che altrimenti si presenterebbe come il primo esempio proposto padding-top: 1px Distaccole le voci l'una dall'altra di 1px width: 160px;
padding: 3px;La larghezza delle voci e la distanza del testo dalla casella background: #036;
color: #EEE;Rispettivamente colore dello sfondo e del testo delle voci text-decoration: none; Le voci, pur essendo collegamenti, non saranno caratterizzate da eventuali sottolineature. background-color: #369;
color: #FFFColore dello sfondo e del testo al passaggio del mouse
------------------
MENU ORIZZONTALE
Per creare un menu orizzontale procediamo con il nostro solito list-style: none; e aggiungiamo alle voci (li) della lista display: inline;
Per rendere il tutto presentabile, aggiungiamo padding-right: 20px; ovvero distanziamo le voci inserendo un margine di 20px a destra di ciascuna di esse:
Il codice dovrebbe quindi presentarsi in questa forma:HTML<style>.mymenu {list-type: none;}
.mymenu li {display: inline; padding-right: 20px}</style>
<ul class="mymenu">
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a></li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>
- Menu 2:CSS HTML CODICE.mymenu {
margin: 0;
padding: 0;
list-style: none;
}
.mymenu li {
display: inline;
padding-right: 1px;
}
.mymenu a:link, .mymenu a:visited {
padding: 3px 10px;
color: #EEE;
background-color: #036;
text-decoration: none;
}
.mymenu a:hover {
color: #FFF;
background-color: #369;
}HTML<ul class="mymenu">
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a></li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>
Codice Completo:SPOILER (clicca per visualizzare)CODICE<style>
.mymenu {
margin: 0;
padding: 0;
list-style: none;
}
.mymenu li {
display: inline;
padding-right: 1px;
}
.mymenu a:link, .mymenu a:visited {
padding: 3px 10px;
color: #EEE;
background-color: #036;
text-decoration: none;
}
.mymenu a:hover {
color: #FFF;
background-color: #369;
}
</style>
<ul class="mymenu">
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a></li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>
Spiegazione:margin: 0;
padding: 0;
list-style: none;Azzero i margini e lo stile della lista display: inline;
padding-right: 1pxAllineo le voci per il menu orizzontale e le distaccole l'una dall'altra di 1px padding: 3px 10px; Imposto la larghezza delle voci (10px) e la distanza del testo dalla casella verticalmente (3px) color: #EEE;
background-color: #036;Rispettivamente colore del testo e dello sfondo delle voci text-decoration: none; Le voci, pur essendo collegamenti, non saranno caratterizzate da eventuali sottolineature. color: #FFF;
background-color: #369;Colore del testo e dello sfondo al passaggio del mouse
-------------------------
MENU A LINGUETTE
Vedremo ora come creare un menu a linguette.
- Menu 3:CSS HTML CODICE.mymenu {
list-style: none;
padding: 3px 0;
margin: 0;
border-bottom: 1px solid #777;
}
.mymenu li {display: inline; margin-left: 2px;}
.mymenu li a:link, .mymenu li a:visited {
padding: 3px;
border: 1px solid #777;
border-bottom: none;
background: #DDE;
color: #448;
text-decoration: none;
}
.mymenu li a:hover {
color: #000;
background: #AAE;
}Codice Completo:HTML<ul class="mymenu">
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a></li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>SPOILER (clicca per visualizzare)CODICE<style>.mymenu {
list-style: none;
padding: 3px 0;
margin: 0;
border-bottom: 1px solid #777;
}
.mymenu li {display: inline; margin-left: 2px;}
.mymenu li a:link, .mymenu li a:visited {
padding: 3px;
border: 1px solid #777;
border-bottom: none;
background: #DDE;
color: #448;
text-decoration: none;
}
.mymenu li a:hover {
color: #000;
background: #AAE;
}</style>
<ul class="mymenu">
<li><a href="#">Voce 1</a></li>
<li><a href="#">Voce 2</a></li>
<li><a href="#">Voce 3</a></li>
<li><a href="#">Voce 4</a></li>
<li><a href="#">Voce 5</a></li>
</ul>
Spiegazione:list-style: none;
padding: 3px 0;
margin: 0;Azzero i margini e lo stile della lista. Attenzione al padding verticale di 3px, che deve corrispondere a quello inserito nelle voci (vedremo in seguito). border-bottom: 1px solid #777; Inserisco un bordo in basso, dove poggeranno le "linguette". #777 è il colore e 1px lo spessore di questo. display: inline;
margin-left: 2pxAllineo le voci per il menu orizzontale e le distacco l'una dall'altra di 2px, lateralmente. padding: 3px; Imposto la distanza del testo dalla casella-linguetta (stesso valore impostato in precedenza!). border: 1px solid #777;
border-bottom: none;Contorno le voci con un bordo, del tutto analogo a quello già inserito, e per questo motivo escludo questa volta il margine inferiore. background: #DDE;
color: #448;Rispettivamente colore dello sfondo e del testo delle voci. text-decoration: none; Le voci, pur essendo collegamenti, non saranno caratterizzate da eventuali sottolineature. color: #000;
background: #AAE;Colore del testo e dello sfondo al passaggio del mouse.
Edited by A c e - 21/9/2011, 01:03.
Guida alla creazione di menu |