Pubblicato il 05/05/11 - aggiornato il  | 7 commenti :

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.
Il seguente screenshot è esplicativo del suo funzionamento
menù orizzontale su più livelli
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.


7 commenti :

  1. Ciao! Grazie sempre per i tuoi ottimi consigli.

    Per me questo andrebbe benissimo ma, solo una cosa, si può "stabilizzare" una voce (Home) in modo che sia cliccabile subito senza che si espanda?

    RispondiElimina
  2. @Novalis
    Non saprei come fare. Anche se si tolgono le voci secondarie si espande ugualmente

    RispondiElimina
  3. Come faccio ad inserire più voci ...anzichè solamente 3?

    RispondiElimina
    Risposte
    1. @# Dopo la riga ... Possiamo aggiungere altri elementi.... puoi aggiungere altre voci principale seguendo la stessa sintassi. per le voci secondarie è ancora più semplice. Per inserire cinque elementi nella Voce Etichette utilizzi questo codice

      <div>
      <a href="#">Voce 21</a>
      <a href="#">Voce 22</a>
      <a href="#">Voce 23</a>
      <a href="#">Voce 24</a>
      <a href="#">Voce 25</a>
      </div>

      Elimina
    2. ho provato....ma la voce aggiunta non risulta leggibile...bisogna modificare qualcos'altro

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy