Pubblicato il 05/05/11e aggiornato il

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

menù verticale bloggerIn 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.





5 commenti :

  1. OH! Forse ci siamo!! Dopo svariati menu e qualche mal di testa credo che questo sia il migliore, quello che fa al caso mio!!! COmpatibilissimo con tutti i browser ed efficace!! Incrocio le dita :)

    RispondiElimina
  2. salve, come si fanno a mettere tanti menu verticali come questo uno accanto all'altro sotto il titolo del blog? Grazie!

    RispondiElimina
  3. @Mario Alan
    Non si può fare. Se vuoi mettere molte voci devi scegliere altre tipologie di menù

    RispondiElimina
  4. Ciao ho un problema, come puoi vedere nel mio blog: http://ps3gameita.blogspot.it/

    ho sotto il box cerca una navbar molto semplice. Il mio problema è che vorrei mettere a destra delle immagini social ma non me li fa mettere me li mette ,come vedi, ìdi seguito ai normali bottoni del menù... come posso risolvere???

    RispondiElimina
  5. Utilissimo anche questo tutorial. Provato, modificato e utilizzato sul mio blog.
    Grazie infinite Ernesto.
    Buona serata,
    Ele

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.