Come creare un menù orizzontale con il Css
L'uso del Css consente di realizzare effetti altrimenti impossibili con il linguaggio HTML. Uno di questi è senz'altro il menù orizzontale. Il browser riconosce i tag UL e LI per realizzare esclusivamente un menù verticale. Tramite il Css è possibile impartire una diversa disposizione delle voci di menù, ad esempio quella orizzontale. Vediamo come fare.
Esempio
Partiamo da un semplice elenco puntato in linguaggio HTML
<ul>
<li>Voce 1</li>
<li>Voce 2</li>
<li>Voce 3</li>
</ul>
Il primo passo da compiere è settare il margine zero per eliminare la tabulazione sul tag UL.
ul
{
margin: 0px;
}
Il secondo passo da compiere è sul tag LI per settare la proprietà float a sinistra (Left) e la proprietà display su Inline. Nel seguente modo:
li
{
float: Left;
display: Inline;
}
E' anche possibile definire una larghezza massima di ciascuna voce del menù. Per farlo è sufficiente aggiungere tra le proprietà LI anche il parametro che imposta la sua larghezza. Ad esempio:
li
{
float: Left;
display: Inline;
width: 100px;
}
Il browser visualizzerà ogni menù in orizzontale anziché in verticale.