Menù scorrevole a scomparsa sulla destra del blog.

La realizzazione di un menù è sempre una cosa difficoltosa perché non è semplice trovare dei codici compatibili con il modello che stiamo usando e, adattare il menù al layout, qualche volta si rivela una vera e propria impresa. Una soluzione poco invasiva è data dai menù scorrevoli che si aprono al passaggio o al click del mouse. Ricordo di aver già pubblicato almeno tre post in merito:

1) Menù laterale scorrevole - 
2) Tre slide menù nei tre lati del layout -
3) Slide Menù per i nuovi modelli -

Adesso vado a presentare una variante di menù laterale da installarsi sulla destra del layout. Si aprirà cliccando con il mouse sopra al pulsante

• Demo del menù laterale scorrevole -

Il menù resterà aperto fintanto che non si ricaricherà la pagina o non si cliccherà nuovamente sul bottone

 

Si potranno personalizzare i colori degli elementi del menù e altri parametri. I più esperti di grafica potranno modificare anche le immagini di default per renderle più adatte allo stile del loro blog. Per l'installazione si va su Modello > Backup/Ripristino > Salva modello completo per creare un backup di sicurezza. Quindi sempre su Modello > Modifica HTML > Procedi si cerca la riga ]]></b:skin> e, subito sopra, si incolla il codice

• CSS del Menù scorrevole per Blogger - 

Possono essere modificati i parametri colorati di rosso e accompagnati da un commento in verde. Si tratta della immagine di background del menù che è alta solo un pixel ma che ripete in senso verticale. E' dello stesso colore del bottone. Se si vuole cambiare il grigio, bisogna modificare il colore di questa immagine di sfondo e anche quello del bottone che vedremo essere presente in un altro codice.

Si può inoltre scegliere il colore del testo degli elementi del menù (#FFFFFF bianco) e il colore di sfondo delle singole voci (#D43356) che è identico al colore della icona presente nel bottone. E' possibile anche configurare il colore del testo al passaggio del mouse (#EEEEEE) e soprattutto l'altezza del menù da calcolare a seconda del numero degli elementi che vogliamo inserire all'interno.

Adesso si cerca la riga </head> e, subito prima, si incolla quest'altro codice

• Script dello Slide Menù per Blogger -

Come vedete dallo script si usano la librerie Scriptaculous e Prototype. Abbiamo quasi finito. Dobbiamo cercare la nuova riga </body> e, immediatamente sopra, incollare quest'ultimo codice

<!-- MENU SCORREVOLE INIZIO  -->
<div id='sideBar'>
<a href='javascript:void(0)' id='sideBarTab'><img alt='sideBar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnTZaMy3RaRNO_l0F14EdIeL16qi8EBsgXHHdT1KSyQT0GCLclodISM3WEEfL3WmpJq9M1ikZo6t0KnvdUr3eNlCOsoMssSe9ifCTJapfhOUV3PczCRI4NkfasS_w68AOUj3EMRI_ioNE/s137/bottone-del-menu.png' title='sideBar'/></a>
<div id='sideBarContents' style='display:none;'>
<div id='sideBarContentsInner'>
<h3><span>Collegamenti</span></h3>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='http://www.blogger.com/profile/03393759575661143644' target='_blank'>Blogger</a></li>
<li><a href='http://twitter.com/parsifal32' target='_blank'>Twitter</a></li>
<li><a href='#'>600 Tutorial</a></li>
<li><a href='#'>Modelli</a></li>
<li><a href='#'>Widget</a></li>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Fotomontaggi</a></li>
<li><a href='#'>PrettyPhoto</a></li>
<li><a href='#'>Halloween</a></li> </ul>
</div>
</div>
</div>
<!-- MENU SCORREVOLE FINE - http://www.ideepercomputeredinternet.com -->

Non resta che salvare il modello. L'URL colorato di rosso rappresenta l'immagine del bottone e può essere modificata o sostituita. La parola Collegamenti può essere cambiata con un'altra mentre il menù vero e proprio è colorato di verde e si trova tra il tag <ul> e il tag </ul> colorati di viola. La sintassi di ogni voce del menù scorrevole segue la seguente regola

<li><a href='URL_DEL_COLLEGAMENTO' target='_blank'>TESTO</a></li>

dove al posto di URL_DEL_COLLEGAMENTO incollate l'indirizzo del post, della pagina statica o della pagina dell'etichetta che volete linkare e in TESTO dovrà essere inserita la scritta che poi sarà vista realmente. L'attributo target='_blank' è opzionale e serve per far aprire il link in un'altra scheda del browser.