Warning: file_get_contents(http://graph.facebook.com/?ids=https://raffaelegiovanditti.it/blog/come-creare-un-menu-orizzontale-o-verticale-con-html-e-css-1.html): failed to open stream: HTTP request failed! HTTP/1.1 403 Forbidden in /var/www/virtual/raffaelegiovanditti.it/htdocs/plugins/content/bt_socialshare/bt_socialshare.php on line 955
Come creare un menu orizzontale o verticale con html e css

Come creare un menu orizzontale o verticale con html e css

  • Blog
  • Letto 5052 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