Paolo De Feo
a- a+

Menu CSS3 con sottomenu

Vediamo come creare in modo facile e veloce un menu CSS3 orizzontale dotato di sottomenu. Codici ed esempio.

In questo tutorial vedremo come creare un menu CSS3 orizzontale snello e leggero dotato di sottomenu. La creazione di menu CSS3 di questo tipo è ottimo per gestire grandi quantità di contenuti in modo chiaro e lineare.

La realizzazione finale verrà posta in essere tramite l’utilizzo di fogli di stile e HTML puro: JavaScript o librerie jQuery non saranno necessari. Questo significa velocità di caricamento, pulizia nella codifica e rispetto degli standard.

Il CSS

Attraverso il nostro foglio di stile creeremo un menu arrotondato compatibile con tutti i browser: sarà la proprietà CSS3 border-radius a permetterci tale opera.

#menu {
  width: 960px;
  height: 40px;
  clear: both;
}

ul#nav {
  float: left;
  width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #dc0000 url(../img/immagine-back.png) repeat-x;
  -moz-border-radius-topright: 10px; // hack per Firefox 3.6 e inferiori
  -webkit-border-top-right-radius: 10px; //hack per Safari 4.1 – Google Chrome 3 e inferiori
  -moz-border-radius-topleft: 10px; //hack per Firefox 3.6 e inferiori
  -webkit-border-top-left-radius: 10px;  //hack per Safari 4.1 – Google Chrome 3 e inferiori

}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 30px;
  background: #dc0000 url(../img/immagine-back.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;     
}

ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #bb0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; 
}


ul#nav  ul {
  display: none;
}


ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
  background: #aa0000 url(../img/immagine-back.png) repeat-x;  
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px; 
}

ul#nav li:hover > ul li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  padding: 0 30px 0 0;
  background: #aa0000 url(../img/immagine-back.png) repeat-x; 
}

ul#nav li:hover > ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
}

Come specificato nell’esempio, possiamo utilizzare delle immagini per definire sfondi e spaziature.

Il markup HTML

Ora vediamo come implementare il menu nelle nostre pagine web. La codifica finale appare grossomodo così:

<div id="menu">

<ul id="nav">
<li><a href="link-ipertestuale">Menu 1</a>
 <ul>
 <li><a href="link-ipertestuale">Menu 1 Submenu 1</a></li>
 <li><a href="link-ipertestuale">Menu 1 Submenu 2</a></li>
 <li><a href="link-ipertestuale">Menu 1 Submenu 3</a></li>
 </ul>
</li>

<li><a href="link-ipertestuale">Menu 2</a>
 <ul>
 <li><a href="link-ipertestuale">Menu 2 Submenu 1</a></li>
 <li><a href="link-ipertestuale">Menu 2 Submenu 2</a></li>
 <li><a href="link-ipertestuale">Menu 2 Submenu 3</a></li>
 </ul>
</li>

<li><a href="link-ipertestuale">Menu 3</a>
 <ul>
 <li><a href="link-ipertestuale">Menu 3 Submenu 1</a></li>
 <li><a href="link-ipertestuale">Menu 3 Submenu 2</a></li>
 <li><a href="link-ipertestuale">Menu 3 Submenu 3</a></li>
 </ul>
</li> 
</ul>

</div>

Il nostro prodotto finale sarà semplice, leggero e ad alto livello di usabilità per gli utenti. Tali caratteristiche sono componenti essenziali per un progetto web di successo.



Ti potrebbe interessare anche

commenta la notizia

Ci sono 2 commenti
GiancarloMarazzini
molto interessante... lo sto provando e funziona molto bene. una sola domanda, come faccio a fare in modo che quando linko su una pagina del menu, questa cambia colore/sfondo nel menu stesso, in modo da indicare all'utilizzatore in quale parte del sito si trova?
grazie in anticipo
Giancarlo

Anonimo
sarebbe utile poter vedere un esempio, per capire, prima di studiarselo tutto, se è quello che interessa