Realizzare liste di menu su più colonne con i CSS

Questo metodo, anche se vedremo tre esempi nel tutorial odierno, permette di non avere una pagina "kilometrica" e, soprattutto, che la stessa pagina possa "degradare" in maniera accessibile per tutti coloro i quali si avvalgono di lettori di schermo. Come ho scritto più su, vedremo un elenco composto da molte voci suddiviso su più colonne; gli esempi che faremo saranno tre:

Cominciamo con ordine e partiamo dall´inizio.

Dividere una lista su più colonne: elenco non ordinato.

Per questo primo esempio avremo bisogno di inserire il nostro elenco in un elemento contenitore. A tale elemento di blocco verrà assegnata la proprietà "float" perchè conterrà al suo interno una lista con la stessa caratteristica. Vediamo il codice sia del contenitore esterno, sia del menu:

.container{
margin:1em;
padding:0; 
width:40em; 
background-color: #e6e6e6; 
float:left; 
}

ul{
width: 30em;
list-style:none;
margin:0 0 0 1em; 
padding:0;
}

ul li{ 
float: left; 
width: 10em;  
}

ul li a{ 
display: block;
width:8em; 
text-decoration:none; 
background-color:transparent; 
color:#09d; 
font-weight: bold;
}

ul li a:hover{ 
color:#fff;
background-color:#900; 
font-weight:bold;
} 

Per prima cosa ho dichiarato un "contenitore", uno solo e non uno per ogni colonna in base a quante colonne vorremmo avere, dentro al quale metteremo il nostro elenco. Ad esso ho dato, oltre alle note dichiarazioni quali larghezza, margine, padding e colore di sfondo, la proprietà float:left. Perchè? Faccio una piccola "divagazione" per spiegarlo. Se si fa attenzione a quello che ho scritto per i tag ul e li, ho assegnato anche a loro larghezza e la proprietà float:left. Se non lo avessi fatto, saremmo incorsi in uno dei tanti bug di Internet Explorer. Cosa sarebbe accaduto? È presto detto. Un blocco flottante è a tutti gli effetti estraniato dal normale flusso; ne deriva, quindi, che un contenitore il quale ha al suo interno un altro flottante, si comporta come un box vuoto. La riprova sarebbe stata che: su Internet Explorer (il quale si "beve" tutto quello che gli si dà) avremmo visto allungarsi il contenitore in base a quanto contenuto ci mettiamo dentro e quindi il colore di background. I browser più seri (leggi FireFox, Mozilla ed Opera ecc...), avrebbero mostrato solo il contenuto, ma il contenitore non si sarebbe minimamente allungato e non avremmo visto il colore di sfondo celeste. Soluzione: si deve assegnare sia al contenitore che al contenuto, la proprietà float. Le altre dichiarazioni riguardano i tag <ul> e <li> quando ad essi sono associati dei link. Direi che per quanto riguarda il primo esempio è tutto. Vedete come, a rischio di diventare "pedante", con pochissime dichiarazioni, possiamo suddividere una grande quantità di voci elenco. Passiamo a vedere la pagina di esempio che ho realizzato. Senza dubbio vale molto più che mille parole.

Dividere una lista su più colonne: lista numerata

Al pari dell´esempio precedente, vedremo adesso come realizzare lo stesso elenco, suddiviso su tre colonne, con voci di lista numerate. La numerazione progressiva termina alla prima colonna, per esempio al numero 5, e riprende sulla seconda dal numero 6 e così via. Questo secondo esempio è leggermente diverso, nel metodo, dal primo. Qui avremo solo il contenitore "flottante" ma non anche le liste. Il risultato non cambia. Il codice è:

.container{
margin:1em; 
padding:0; 
width:10em; 
float: left; 
background-color:transparent; 
}

ol li a, ol li a:visited{
display:block; 
width:7em; 
text-decoration:none;
font-weight:bold;
color:#09d;
}

ol li a:hover{
color:#fff;
background-color:#900;
font-weight:bold;
}  

Ogni lista viene inserita nel proprio blocco (per questo motivo ho l´ho dichiarata con una classe) e la sua larghezza non è più, come il primo di 40 em, ma di 10 em. A tele blocco diamo, inoltre, la proprietà float. Stesso ed identico discorso per le voci elenco, come le precedenti, con le pseudoclassi a, a:visited, a:hover, a:active. Il secondo file di esempio rappresenta la lista numerata.

Dividere una lista su più colonne: usare le immagini come punto elenco

Arriviamo con questo terzo ed ultimo esempio, a visualizzare una immagine al posto del poco simpatico punto elenco di default. Potrebbe essere questo, forse, uno dei casi in cui maggiormente potrebbe essere usato un menu del genere perchè ci si potrebbe divertire a creare punti elenco simpatici da applicarli nelle nostre pagine. Il metodo applicato è uguale a quello per le liste numerate: un contenitore definito attraverso una classe ed al suo interno un elenco non ordinato. Il codice è:

.container{ 
margin:1em; 
padding:0;
width:10em; 
float:left;
}

ul li{ 
list-style-image: url(nomeImmagine.gif); 
padding: 0 0 0 5px; 
line-height:1.6em; 
}

ul li a{ 
display: block; 
width:7em; 
text-decoration:none; 
background-color:transparent; 
font-weight:bold; 
color:#09d;
}

ul li a:hover{ 
color:#fff;
background-color:#900; 
font-weight:bold;
} 

L´unica cosa che cambia, rispetto alla lista ordinata, è l´assegnazione di un punto elenco "grafico". Inoltre ho anche dichiarato una interlinea (line-height) tra una voce e l´altra. Per quanto riguarda i collegamenti, sono rimasti gli stessi degli altri 2 esempi. Non credo ci sia altro da aggiungere se non farvi vedere il terzo file di esempio.

Conclusioni

Anche per questo tutorial è tutto, con la speranza che possa essere di vostro interesse e possa tornare utile per le vostre applicazioni.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati