Come creare un menu orizzontale o verticale con html e css

Come creare un menu orizzontale o verticale con html e css

  • Blog
  • Letto 2498 volte

Ogni tanto mi trovo a combattere con le voci di menu disposte in orizzontale e verticale. Ecco quindi una semplice guida per realizzare un menu in html e disporlo in orizzontale o in verticale utilizzando i CSS.

Per prima cosa creiamo un menu in html

Schermata_2015-12-06_alle_12.19.08.png

Ora vediamo come personalizzare la struttura attraverso il CSS.

Menu Orizzontale

#menu ul {
width:800px; /* Dimensioni della barra del menu */
padding:0;
margin:0 auto;
display:block;
list-style-type:none; /* Stile della lista */
}
#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:#ff0000; /* Colore dello sfondo */
padding:4px 50px; /* Distanza tra le singole voci */
border-right:1px solid #ffffff; 
}

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

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

Menu Verticale

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 #123456;
margin: 0px;
padding: 0px;
width: 150px;
}
#menu a {
text-decoration:none; /* Nessuna decorazione */
color:#fff; /* Colore Link */
background:#123467; /* Colore sfondo */
padding:4px; /* Distanza tra gli elementi */
display: block;
}
#menu a:hover {background:#ff0000; /* Sfondo */
}

Spero vi sia d'aiuto ;)

Contattami


contattami.png

Sign up to keep in touch!

Se mi lasci la tua mail ti invierò comunicati stampa inerenti alla mia attività


Ovviamente puoi cancellarti quando lo ritieni opportuno