5 gennaio 2009

HTML Elenchi per Creare Menu

La struttura dei menu di navigazione nelle pagine web, sono ottenute con delle liste <ol> ordinate, o con liste <ul> non ordinate. Ma molto spesso(dipende dai casi) vengono usate anche liste di definizione <dl>. Ecco dei brevi esempi di tipi di menu di navigazione che usano i vari elenchi di liste.

Elenco puntato
<ul>
<li>Elenco</li>
<li>Elenco</li>
<li>Elenco</li>
<li>Elenco</li>
</ul>


Elenco numerato
<ol>
<li>Elenco</li>
<li>Elenco</li>
<li>Elenco</li>
<li>Elenco</li>
</ol>


Elenco annidato puntato
<ul>
<li>Elenco</li>

<ul>
<li>Elenco</li>
<li>Elenco</li>
<li>Elenco</li>
<ul>
<li>Elenco</li>
<li>Elenco</li>
</ul>
</ul>
</ul>

Elenco annidato numerato
<ol>
<li>Elenco</li>
<li>Elenco</li>
<ol>
<li>Elenco</li>
<li>Elenco</li>
<li>Elenco</li>
<li>Elenco</li>
<ol>
<li>Elenco</li>
<li>Elenco</li>
<li>Elenco</li>
</ol>
</ol>
</ol>

lista di Definizione
<dl>
<dt>Termine di Definizione</dt>
<dd>Descrizione di Definizione</dd>
<dd>Descrizione di Definizione</dd>
<dt>Termine di Definizione</dt>
<dd>Descrizione di Definizione</dd>

<dd>Descrizione di Definizione</dd>
<dd>Descrizione di Definizione</dd>

<dt>Termine di Definizione</dt>
<dd>Descrizione di Definizione</dd>

<dd>Descrizione di Definizione</dd>

</dl>


Questo è il codice per la struttura html del menu di navigazione.
<ul id="lista-verticale">
<li><a href="#">primo</a></li>
<li><a href="#">secondo</a></li>

<li><a href="#">terzo</a></li>

<li><a href="#">quarto</a></li>

<li><a href="#">quinto</a></li>

<li><a href="#">sesto</a></li>

<li><a href="#">settimo</a></li>

</ul>
E questo il foglio con le regole css, che si occupa della formattazione grafica della lista.
#lista-verticale{
width:180px;
margin:0;
padding:0;
list-style:none;
font: 90% Trebuchet MS;
}
#lista-verticale a{
display:block;
text-decoration:none;
padding:3px 10px;
margin:1px 0;
border:1px solid #666;
background:#fff;
color:#009;
font-size:1.1em;
}
#lista-verticale li{
display:inline;
}
#lista-verticale a{
height:auto!important;
height:0;
}
#lista-verticale a:link,
#lista-verticale a:visited{
background:#008000;
color:#fff;
}
#lista-verticale a:hover,
#lista-verticale a:focus,
#lista-verticale a:active{
background:#eee;
color:#ff0000;
border-color:#666;
font-style:italic;
padding-left:15px;
}

Nessun commento: