Il sistema migliore per scrivere un buon menu è quello di ricorrere agli elenchi puntati, cioè le liste definite dal tag <ul>. L’aspetto di default di questa marcatura consiste in un elenco puntato di elementi che si susseguono uno sotto all’altro, grazie ai CSS, tuttavia, possiamo cambiare radicalmente l’aspetto delle liste. Grazie ad una semplice stilizzazione, ad esempio, possiamo creare, partendo da una lista di link, un semplice menu orizzontale. Questo il codice HTML del nostro menu:
<ul id="menu">
<li><a href="/homepage.html">Home Page</a></li>
<li><a href="/chisiamo.html">Chi siamo</a></li>
<li><a href="/contattaci.html">Contattaci</a></li>
</ul>Vediamo ora il codice CSS:
ul#menu { margin: 0px; padding: 0px; list-style-type: none; }
#menu li { display: inline; padding: 10px; }Semplicissimo!… Ma supponiamo di avere l’esigenza di centrare il nostro menu orizzontale all’interno della pagina o del suo contenitore. Come fare? Di default, infatti, la nostra lista orizzontale si posiziona sul margine sinistro del suo contenitore; per centrare la lista dobbiamo aggiungere width: 100%; text-align: center; alla prima riga del nostro CSS, in questo modo:
ul#menu { margin: 0px; padding: 0px; list-style-type: none; width: 100%; text-align: center; }
#menu li { display: inline; padding: 10px; }Ora il nostro menu orizzontale risulterà perfettamente centrato rispetto al suo contenitore!
