Menù orizzontale su più livelli da installare nella sidebar di sinistra.

Come creare un menù da inserire in una sidebar di Blogger senza javascript e solo con il CSS e che si anima al passaggio del cursore.

Dopo aver presentato un menù verticale senza javascript, usando lo stesso meccanismo, vado a illustrarne uno orizzontale che forse è anche più interessante. Anche in questo caso si utilizzano i CSS e gli effetti di transizione.

• Demo del menù orizzontale su più livelli -

Il seguente screenshot è esplicativo del suo funzionamento

Le singole voci sono inserite verticalmente ma ciascuna di esse ha tre voci secondarie. Naturalmente possono essere personalizzati colori, ombreggiature e dimensioni. Si va su Design > Modifica HTML e si salva il modello completo per un eventuale backup di ripristino. Si cerca la riga </head> e, subito sopra, si incolla il codice

<!-- Menù Orizzontale Scorrevole Inizio -->
<style>
#menuorizzontale {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#menuorizzontale li {
  background-color: #445566;
  border: 2px solid #AABBCC;
  box-shadow: 0 0 5px #FFFFFF inset;
  border-radius: 0 10px 10px 0;
  color: #EEEEEE;
  font-family: Tahoma;
  font-size: 24px;
  height: 32px;
  line-height: 32px;
  list-style-type: none;
  margin: 2px 0;
  position:relative;
  width: 100px;
  text-shadow: 1px 1px 1px #000000; 
  padding-left: 10px; 
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#menuorizzontale li div {
  left: 10px;
  position: absolute;
  top: -3px;
  width: 200px; 
  opacity: 0; 
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#menuorizzontale li:hover { padding-left: 300px; }
#menuorizzontale li:hover div { opacity: 1; }
#menuorizzontale li div a {
  color: #000000;
  font-size: 14px;
  margin: 0 5px;
  text-shadow: 1px 0 1px #FFFFFF;
}
#menuorizzontale li div a:hover {
  color: #FFFFFF;
  text-shadow: 1px 0 1px #000000;
}
</style>
<!-- Menù Orizzontale Scorrevole Fine - http://www.ideepercomputeredinternet.com  -->

Si salva il modello. Possono essere personalizzati i colori di background e del testo (leggi come fare nel post sui codici dei colori), si può modificare l'ombreggiatura cambiando i valori di

box-shadow: 0 0 5px #FFFFFF inset;

come pure l'arrotondamento della forma del menù (border-radius). Si può intervenire anche sulle dimensioni e sulla famiglia di caratteri. E' anche possibile intervenire sulla opacità e sulla larghezza del menù quando si punta con il mouse: padding-left: 300px;. Si deve adesso incollare il codice del menù in Design > Aggiungi un gadget > HTML/Javascript. Ecco un esempio di come potrebbe essere strutturato

<ul id="menuorizzontale">
  <li>Home     <div>
      <a href="#">Voce 11</a>
      <a href="#">Voce 12</a>
      <a href="#">Voce 13</a>     
    </div>
  </li>
  <li>Etichette
    <div>
      <a href="#">Voce 21</a>
      <a href="#">Voce 22</a>
      <a href="#">Voce 23</a>    
    </div>
  </li>
  <li>Articoli     <div>
      <a href="#">Voce 31</a>
      <a href="#">Voce 32</a>
      <a href="#">Voce 33</a>     
    </div>
  </li>
   <li>Risorse     <div>
      <a href="#">Voce 41</a>
      <a href="#">Voce 42</a>
      <a href="#">Voce 43</a>           
    </div>
  </li>
<!-- Possiamo aggiungere altri elementi -->
</ul>

Si possono inserire tutte le voci che si vogliono, oltre alle quattro che ho messo come esempio, seguendo la stessa sintassi. Al posto dei cancelletti ( # ) si mettono gli URL delle pagine e le espressioni colorate di blu vanno personalizzate. Il menù mostrerà perfettamente gli effetti di transizione con Chrome, Firefox e Opera mentre l'effetto su Internet Explorer 9 lascerà un po' a desiderare.