Oct
30
Menu laterale con liste e CSS
Per una maggiore visibilità sui motori di ricerca è necessario ottimizzare il contenuto della pagina e indirizzarlo ad un target specifico, ma anche il codice stesso della pagina. Le guide SEO più importanti (soprattutto quelle redatte da Google stessa) indicano le liste HTML come metodo più facile per creare i menu. In effetti sia gli <ol> che gli <ul> rispettano una certa gerarchia, e questo al motore di ricerca facilita di molto l’indicizzazione.
In questo articolo usiamo un piccolo accorgimento per gli stili nei menu verticali formati da liste. Chiaramente con i CSS.
Questo è l’HTML dato:
<div id="menu"> <ol> <li>Pippo</li> <li>Pluto</li> <li>Paperino</li> <li>Nonna Papera</li> </ol> </div><!--//end #menu//-->
Prima di tutto nel CSS dovremo “azzerare” lo stile della lista. Vediamo come.
#menu ol {
margin:0;
padding:0;
}
Con queste due righe togliamo lo spazio che le liste creano automaticamente a sinistra (per metterci il disco nel caso degli <ul> o il numero progressivo negli <ol>). Ora togliamo i numeri progressivi dalla sinistra, dichiariamo la dimensione del font, mettiamo un bordo e impostiamo la spaziatura.
#menu ol li {
list-style:none;
font-size:1.5em;
border:1px solid #dbdbdb;
margin:0 0 5px 0;
padding:10px 10px 10px 10px;
}
Ed ecco pronto il nostro menu laterale. Chiaramente impostando una larghezza predefinita (width) per il div “#menu” è possibile rendere più somigliante ad un bottone il link nel menu.
