Creare un menu orizzontale o verticale con i CSS

Realizzare un Menu è un procedimento abbastanza semplice. In questo articolo lo creeremo con l’aiuto dei tag HTMLul” 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.

Se volete approfondire ulteriormente potete trovare una classifica di libri che parlano di HTML e CSS ordinati per popolarità.

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:

<div id="menu">
<ul>
<li><a href="pagina1.html">Link 1</a><li>
<li><a href="pagina2.html">Link 2</a><li>
<li><a href="pagina3.html">Link 3</a><li>
<li><a href="pagina4.html">Link 4</a><li>
<li><a href="pagina5.html">Link 5</a><li>
</ul>
</div>

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-orizzontale-html-css

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.

menu-verticale-html-css

 

 

[wp_bannerize group=”webdesign” categories=”281,283″]

Luca Bovera

Marketing Communication Manager e ideatore at Marketing Creativo
Marketing Communication Manager per professione, progetti artistici che gli gironzolano in testa e una profonda curiosità che lo attira a vagare per il web alla ricerca della ultima chicca creativa.

Related posts:

Un commento su “Creare un menu orizzontale o verticale con i CSS

Lascia un commento

Shares