Pubblicato il 29/10/11 - aggiornato il  | 13 commenti :

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
    Il menù resterà aperto fintanto che non si ricaricherà la pagina o non si cliccherà nuovamente sul bottone
    menù-scorrevole 
    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
    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
    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.


    13 commenti :

    1. Ma è bellissimo! Lo provo subito sperando vada tutto bene... :D

      RispondiElimina
    2. E' come immaginavo, incompatibile con qualche altro mio widget... infatti sul mio blog di prova va benissimo... devo adesso scoprire il problema :P

      RispondiElimina
    3. anche a me non funziona... ho il dubbio che dia fastidio l'effetto "sangue che cola" perché ho notato che se clicco i link quando sono vicino al sangue non si aprono... Riproverò martedì, ora mi piace troppo quest'effetto! :)

      RispondiElimina
    4. @Silvia
      Sicuramente dà noia perché l'immagine del sangue che cola è trasparente ma molto alta.

      RispondiElimina
    5. Niente da fare, purtroppo dev'essere incompatibile con qualche altra cosa... peccato, mi piaceva molto.

      RispondiElimina
    6. niente da fare, anche questo menù non funziona sul mio template...uffa

      RispondiElimina
    7. @bizzo
      Il menù è basato su Scriptaculous e quindi non funziona nei modelli che hanno anche JQuery

      RispondiElimina
    8. capito...non è che sapresti consigliarmi un menu a tendina compatibile con jquery e col mio template?
      ciao e grazie ;)

      RispondiElimina
    9. @bizzo
      Prova con questo
      http://www.ideepercomputeredinternet.com/2009/07/come-inserire-un-menu-laterale-tendina.html
      se ti piace

      RispondiElimina
    10. ma anche nella pagina demo non si apre...come fare??

      RispondiElimina
      Risposte
      1. @# Se non funziona più neppure nella pagina di demo allora sono avvenute delle modifiche nei template di Blogger che non lo rendono più installabile.

        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