Menù Verticale per Blogger senza javascript.

Si sa che inserire javascript nel modello implica una diminuzione della velocità di caricamento, parametro che da circa un anno è entrato a far parte del "paniere" di Google per determinare il posizionamento di una pagina. I dati presi in considerazione sono comunque più di 200 e non si sa che peso sia stato dato alla rapidità con cui il sito si carica. Tra poco anche in Italia sarà introdotto il cosiddetto Panda Update e, quando accadrà, l'algoritmo diventerò ancora più complesso con risultanze tutte da verificare.

E' comunque sempre buona norma quella di cercare di mettere nel sito solo gadget utili e evitare quelli troppo pesanti. Vado a illustrare l'inserimento di un menù verticale che fa completamente a meno del javascript e che può essere inserito in una sidebar come menù di supporto a quello principale. Sono stati usati solo i CSS e gli attributi di transizione. Ecco uno screenshot

In posizione normale si visualizza solo un bottone che si apre mostrando i vari elementi al passaggio del mouse. Per l'installazione andate su Design > Modifica HTML e salvate il modello completo. Cercate la riga </head> e, subito sopra, incollate questo codice

<!-- Menu Scorrevole Inizio -->
<style>
#menuverticale {
  margin: 0 auto 50px;
  position: relative;
  width: 200px; 
  z-index: 100;
}
#menuverticale ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#menuverticale li { list-style-type: none; }
#menuverticale a {
  color: #445566;
  font-size: 17px;
  text-decoration: none;
  text-shadow: 1px 1px 1px #FFFFFF;
}
#menuverticale a:hover { color: #000; }
#menuverticale .visibile {
  background-color: #445566;
  border: 2px solid #AABBCC;
  border-radius: 4px;
  box-shadow: 0 0 5px #FFFFFF inset;
  cursor: pointer;
  padding: 5px 0;
  text-align: center;
  display: block;
  position: absolute;
  width: 200px;
}
#menuverticale ul.visibile li {
  color: #EEEEEE;
  font-family: Tahoma;
  font-size: 24px;
  text-shadow: 1px 1px 1px #000000;
}
#menuverticale ul.visibile ul li {
  background-color: #AABBCC;
  border-top: 2px solid #445566;
  padding: 0 0 5px; 
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#menuverticale .invisibile {
  display: block;
  padding: 0 10px;
  position: relative;
  top: 10px;
  height: 0;
  overflow: hidden; 
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#menuverticale ul.visibile ul li:hover { background-color: #CCDDEE; }
#menuverticale ul.visibile:hover .invisibile { height: 200px; }
</style>
<!-- Menu Scorrevole Fine - http://www.ideepercomputeredinternet.com -->

Salvate il modello. Sono stati inseriti i valori per la transizione che riguardano Firefox (-moz-transition), Chrome (-webkit-transition) e Opera (-o-transition). Con Internet Explorer 9 l'effetto lascia un po' a desiderare. Si possono personalizzare i colori del Menù (vedi codici dei colori) per quello che riguarda lo sfondo, il testo, il colore di background quando ci passa sopra il mouse, l'arrotondamento del bottone (border-radius) e molte altre cose ancora. Per la creazione del menù si può seguire questo codice di esempio

<div id="menuverticale">
  <ul class="visibile">
    <li>Home   <ul class="invisibile">
    <li><a href="#">Elemento 1</a></li>
    <li><a href="#">Elemento 2</a></li>
    <li><a href="#">Elemento 3</a></li>
    <li><a href="#">Elemento 4</a></li>
    <li><a href="#">Elemento 5</a></li>   
    </ul>
  </li></ul>
</div>

dove al posto dei cancelletti ( # )si inseriscono gli URL di riferimento e al posto delle espressioni di colore blu, i nomi delle voci che avete scelto. La dimensione verticale height: 200px; è stata calcolata per cinque elementi, si può però eliminarne qualcuno o inserirne altri lavorando appunto sui pixel di height e di z-index. E' anche presente l'ombreggiatura del testo

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

che può essere personalizzata come colore e dimensioni. Dopo che il codice precedente è stato personalizzato, incollatelo su Design > Aggiungi un gadget > HTML/Javascript e posizionatelo a piacere con il mouse in Design > Elementi pagina.

• Demo del Menù verticale con effetto di transizione -