| Proprietà | Descrizione | Valori |
|---|---|---|
| list-style | Consente di specificare, con una sola dichiarazione, tutte le proprietà degli elenchi | tipo posizione immagine |
| list-style-image | Specifica un'immagine come punto di un elenco | url('xx.jpg') |
| list-style-position | Specifica se il punto che marca l'elenco deve comparire dentro o fuori l'elenco | inside, outside |
| list-style-type | Specifica il tipo di punto usato per marcare e righe dell'elenco | circle, disc, square, armenian, decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman |
La costruzione di un menu con apertura a discesa si basa sull'uso di elenchi non ordinati aventi la seguente struttura:
<ul> <li><h2>Menu</h2> <ul> <li><a href="#">Prima voce di menu</a></li> <li><a href="#">Seconda voce di menu</a></li> <li><a href="#">terza voce di menu</a></li> </ul> </li> </ul>
Nel testo HTML precedente si vede che l'elemento <h2> è contenuto nel primo elemento <li>.
All'interno di questo marcatore <li> … </li> è contenuto l'intero elenco delle voci di menu associate.
la pagina di esempio usata è la seguente:
<div id="menu">
<ul>
<li><h2>Storia del Regno di Napoli</h2>
<ul>
<li><a href="http://www.napoligrafia.it/citta/1503-1734/introduzione.htm" title="">Introduzione</a>
<ul>
<li><a href="http://www.napoligrafia.it/citta/1503-1734/viceregno.htm" title="">Il viceregno</a></li>
<li><a href="http://www.napoligrafia.it/citta/1503-1734/insurrezione.htm" title="">L'insurrezione del 1585</a></li>
<li><a href="http://www.napoligrafia.it/citta/1503-1734/crisi.htm" title="">La crisi finanziaria</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>Monumenti di Napoli</h2>
<ul>
<li><a href="http://www.napoligrafia.it/monumenti/chiese/chiese.htm" title="">Chiese</a></li>
<li><a href="http://www.napoligrafia.it/monumenti/ville/ville.htm" title="">Ville</a>
<ul>
<li><a href="http://www.napoligrafia.it/monumenti/palazzi/palazzi.htm#">Palazzi</a>
<ul>
<li><a href="#" title="">Palazzo Capuano</a></li>
<li><a href="#" title="">Palazzo Cirella</a></li>
<li><a href="Palazzo d'Avalos" title="">Palazzo d'Avalos</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>Ricette</h2>
<ul>
<li><a href="http://www.napoligrafia.it/cucina/ricette/an_acciughePeperoniGialli.htm" title="">Antipasti</a></li>
<li><a href="http://www.napoligrafia.it/cucina/ricette/mi_cianfottaMinestra.htm">Zuppe</a>
<ul>
<li><a href="http://www.napoligrafia.it/cucina/ricette/pr_bucatiniFruttiMare.htm">Primi</a>
<ul>
<li><a href="http://www.napoligrafia.it/cucina/ricette/pr_fusilliRicotta.htm" title="">Fusilli</a></li>
<li><a href="http://www.napoligrafia.it/cucina/ricette/pr_maccheroniRagu.htm" title="">Maccheroni</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
L'intero menu, con i sottomenu, è racchiuso in una sezione <div id="menu"> allo scopo sia di contenere tutti gli elementi che compongono il menu sia per identificare la sezione tramite l'ID.
La pagina che verrà visualizzata dal browser ha il seguente aspetto:
Nella sezione head della pagina html definire le proprietà per gli elementi. Si inizi a specificare l'elemento contenitore:
#menu {
width: 12em;
background: #0E0E0E;
}
La larghezza del menu è stata definita specificando l'unità di misura em. In questo modo, quando la finestra viene ridimensionata, l'area del menu viene riadattata per rappresentare correttamente il testo al suo interno. Per evidenziare questa area, è stato aggiunto un colore di sfondo.
Il primo passo per sfruttare gli elenchi (<ul>) consiste nell'eliminazione dei punti e dei rientri
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
Adesso si applichino gli stili agli elementi <a> e agli elementi <h2> contenuti nella sezione menu:
Gli elementi <h2> e gli elementi <a> appaiono della stessa dimensione, ma di colore leggermente diverso per consentirne la distinzione.
#menu a, #menu h2 {
font: bold 11px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
Il browser mostra la seguente pagina:
Il terzo livello nidificato costituisce un sottomenu della voce di menu che lo precede, quindi deve essere spostato. Questo effetto viene ottenuto con il posizionamento assoluto.
La sintassi CSS per applicare lo stile ad uno specifico elemento consiste nell'elencare, separandoli con uno spazio anche tutti i marcatori in cui è contenuto:
#menu ul ul ul {
position: absolute;
top: 0;
left: 0;
}
Prima di proseguire, verificare il funzionamento dei menu fino a questo punto.
Si deve osservare che i sottomenu non si trovano nella posizione corretta, perchè le distanze specificate con il posizionamento assoluto sono riferite all'elemento contenitore, cioè l'area del browser.
Per modificare il punto di riferimento rispetto al quale si misurano le distanze, si definisca una proprietà position per gli elementi che contengono i sottomenu, cioè gli elementi <li>:
L'uso del posizionamento relativo, privo delle misure, non modifica la posizione degli elementi
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
A questo punto i sottomenu appaiono sovrapposti ai menu, perchè il posizionamento assoluto li pone a distanza zero.
Prima di correggere la posizione nascondere i menu:
div#menu ul ul ul {
display: none;
}
e poi scrivere le regole per far riapparire i menu:
div#menu ul ul li:hover ul {
display: block;
}
Si vuole che quando il mouse passa sopra un elemento <li> le voci sottostanti diventino visibili:
div#menu ul ul ul, div#menu ul ul li:hover ul ul {
display: none;
}
div#menu ul ul li:hover ul {
display: block;
}
div#menu ul ul ul, div#menu ul ul li:hover ul ul {
display: none;
}
div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
display: block;
}