• Programmazione » CSS » Tutorial CSS

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.