Creare un menu orizzontale o verticale con i CSS

Come creare un menu orizzonatale o verticale con i CSS?

Realizzare un Menu è un procedimento abbastanza semplice. In questo articolo lo creeremo con l’aiuto dei tag HTML “ul” e “li” ed alcune proprietà dei fogli di stile. Vi mostrerò passo per passo come realizzare sia un menu orizzontale che un menu verticale. Inoltre inseriremo dei colori di sfondo e delle linee che separano le voci del menu.

Il codice HTML

Come dicevamo qualche riga sopra, il menu all’interno del file HTML utilizzerà i tag ul e li per elencare le varie voci. Ecco qui la struttura che resterà la stessa sia per il menu verticale sia per quello orizzontale:

Link 1
Link 2
Link 3
Link 4
Link 5

Ora vediamo invece come personalizzare la struttura attraverso il CSS.

Menu Orizzontale (CSS)

Per ottenere il nostro menu orizzontale dobbiamo applicare qualche regola CSS. Per prima cosa applichiamo uno stile al contenitore del menu:

#menu ul {
width:900px; /* Dimensioni della barra del menu */
padding:0;
margin:0 auto;
display:block;
list-style-type:none; /* Stile della lista */
}

Fatto questo dobbiamo definire il parametro che permette di visualizzare il menu orizzontalmente.

#menu li {
display:inline; 
}

Infine definiamo lo stile e i colori dei link e del testo

#menu a {
color:#fff; /* Colore del testo */
text-align:center; /* Testo allineato al centro */
text-decoration:none; /* Nessuna decorazione */
background:#909090; /* Colore dello sfondo */
padding:3px 45px; /* Distanza tra le singole voci */
border-right:2px solid #ffffff; 
}

E definiamo cosa deve accadere al passaggio del mouse sul nostro menu

#menu a:hover {
background:#007fff; /* Colore dello sfondo */
}

Ed ecco una anteprima di quello che otterrete.

Menu Verticale (CSS)

Per realizzare un menu verticale  il codice da inserire è molto simile. Qui sotto potete vedere parte del file CSS con le proprietà del menu verticale.

#menu ul {list-style-type:none; /* Nessuno stile applicato alla lista */
margin: 2px;
padding:0;
}
#menu li {
border-bottom: 1px solid #696969;
margin: 0px;
padding: 0px;
width: 140px;
}
#menu a {
text-decoration:none; /* Nessuna decorazione */
color:#fff; /* Colore Link */
background:#909090; /* Colore sfondo */
padding:3px; /* Distanza tra gli elementi */
display: block;
}
#menu a:hover {background:#007fff; /* Sfondo */
}

Ed ecco l’anteprima del menu verticale realizzato con un semplice foglio di stile.