Avrete notato che Mauro Accornero, nostro lettore da tempo, è diventato anche nostro autore. Oltretutto ha aperto da poco un blog tutto suo, che a mio parere è una dispensa di perle di utilità non indifferente. Quella che vi ripropongo oggi è una cosa che succede spesso, una domanda a cui spesso mi trovo a dover rispondere sui forum e nelle mail, e Mauro molto semplicemente ce la spiega una volta per tutte:
Un menu orizzontale non è difficile da realizzare, dovendo restituire una lista di voci, categorie o sezioni si utilizza solitamente il tag
.
Il codice per realizzare un menu orizzontale è molto semplice
- Elemento lista
- Elemento lista
- …
Nel css invece sarà sufficiente definire un display:inline per affiancare gli elementi della lista.
li{ margin:0px; padding:0px; display:inline; }L’effetto desiderato è subito ottenuto, ovviamente in base alla grafica desiderata bisognerà tenere conto del comportamento di internet explorer nei confronti delle proprietà degli elementi in linea, le casistiche sono molteplici e verranno affrontate in un articolo a parte.
Una problematica comune a tutti i browser è invece l’aggiunta di uno spazio tra gli elementi in linea, questo comportamento nei browser non è un baco e per risolverlo di norma è sufficiente scrivere il codice html senza spazi tra gli elementi di linea.
- Elemento lista
- Elemento lista
- …
Questa soluzione è immediata ed efficace, è però impossibile da realizzare in un contesto nel quale non è possibile modificare il codice html, ad esempio se abbiamo un cms che ci mette a disposizione delle funzioni per ritornare liste di elementi dovremmo modificare il codice html all’interno della funzione, cosa che non sempre risulta fattibile.
Per risolvere questa casistica con i css è possibile utilizzare un margine destro negativo per gli elementi
- .
li{ margin:0 -3em 0 0; padding:0px; display:inline; }Nella regola ho utilizzato il valore di -0.3em in modo che il margine sia proporzionale al testo, è utile fare qualche prova per capire quale sia la misura ottimale da adottare a seconda della grafica delle voci e degli elementi contenuti.