CSS  »  Articoli  »  CSS 3 

In molti degli articoli precedenti ci siamo occupati delle novità che i CSS3 includono nella specifica. In questo articolo vogliamo utilizzare queste nuove proprietà per realizzare un menu a comparsa interamente in CSS senza utilizzare Javascript.

Il risultato che otterremo al termine dell’articolo è quello in Figura 1. Un menu nascosto che verrà visualizzato al passaggio del mouse. L’ispirazione è stata presa da un menu presente su CSSPlay realizzato, però, con sole immagini.

Ecco la demo del nostro menu.

Figura 1 - Risultato finale

Nella realizzazione del menu sono state utilizzate diverse proprietà presenti nel CSS3. Nella seguente lista sono elencati gli articoli in cui sono state trattate tali proprietà:

• Bordi con i CSS3
• Ombra sui box con i CSS3
• Le pseudo-classi strutturali
• Trasformazioni 2D con i CSS3
• Effetti di transizione con i CSS3

La struttura del menu

Cominciamo a disegnare una piccola bozza grafica del menu che vogliamo realizzare (Figura 2):

Figura 2 - Struttura del menu

Come possiamo vedere dalla Figura 2 la struttura è realizzata utilizzando semplicemente una lista non ordinata con due elementi. Nel primo elemento inseriremo la parte di menu che andrà nascosta, mentre nel secondo inseriremo la tab che resterà sempre visibile.

Realizziamo innanzitutto la struttura HTML che andremo poi a stilizzare con il foglio di stile. Il codice HTML di cui abbiamo bisogno è il seguente:

<ul id="menu">
 <li id="navigation">
   <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Servizi</a></li>
     <li><a href="#">Contatti</a></li>
   </ul>
 </li>
 <li id="tab">Menu</li>
</ul>

Il primo elemento della lista contiene a sua volta una nuova lista non ordinata con i link che andranno a comporre il menu effettivo.

Cominciamo a dare un po’ di stile alla pagina e al menu. Innanzitutto inseriamo un reset CSS all’inizio del foglio di stile per azzerare le formattazioni dei browser; io ho scelto quello di Eric Meyer.

Diamo poi un colore di sfondo alla pagina e definiamo le dimensioni del menu. Il codice è il seguente:

body {
  background-color: #f7f7f7;
  color: #222;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 18px;
  text-align:center;
}

ul#menu {
  background: url('images/gradient.jpg') repeat-x;
  border: 1px solid #ccc;
  width: 750px;
  margin: 0 auto;
}
  ul#menu li#navigation { height: 150px; }

    ul#menu li#navigation ul li {
      float: left;
      width: 150px;
    }

  ul#menu li#tab {
    font-weight: bold;
    line-height: 30px;
    height: 30px;
  }

Altri articoli

Altre guide

Altre newsletter