Pubblicato il 19/02/11 - aggiornato il  | 14 commenti :

Popup Menù compatibile con i template del Designer Modelli di Blogger.

Come installare il Menù a popup nella sidebar di Blogger.
Quello che vado a presentarvi è un menù molto particolare che ha le seguenti caratteristiche:

     E' multilivello e possono essere inserite moltissime voci
     E' utilizzabile soprattutto in una sidebar di sinistra
     Si può inserire questo menù contestualmente in qualsiasi link dentro un post o un widget
     Funziona con il modello Semplice del Designer Modelli e quindi è presumibile che non abbia       problemi anche con gli altri template più recenti
     Si visualizza correttamente anche con Internet Explorer anche se con questo browser è un po' più lento.
Prima di procedere all'installazione ecco come si presenta il menù quando si punta una delle sue voci con il mouse

popup menù per blogger
Nelle voci principali si possono inserire diversi livelli di voci secondarie o anche lasciarle da sole senza sottomenù. Sarà anche possibile inserire un elemento del menù in un qualunque collegamento. Si attiverà al passaggio del mouse

popup menù che si attiva al passaggio del mouse

Ho pubblicato sul web un esempio di questo menù

L'installazione segue i canoni consueti. Si va su Design > Modifica HTML e si cerca la riga </head> quindi, immediatamente sopra, si incolla il codice

<!--Popup Menu Inizio-->
<link href='https://sites.google.com/site/scriptperilblog/javascript-2/popupmenu.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/popupmenu.js ' type='text/javascript'>
/***********************************************
* Flex Level Popup Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<!--Popup Menu Fine - www.ideepercomputeredinternet.com-->

Si salva il modello. Si passa a Design > Elementi pagina > Aggiungi un gadget > HTML/Javascript e si incolla il codice del menù vero e proprio. Si posiziona possibilmente in alto a sinistra del layout. Ho postato un
Ho inserito quattro voci principali ma solo a tre ho messo dei sottomenù. Usando la sintassi
<p style="text-align:left"><a href="URL COLLEGAMENTO" data-popupmenu="popmenu1">Home</a></p>
L'ID del menù in questo caso è popmenu1 e se ne possono inserire tutti quelli che vogliamo. Le voci secondarie relative a questa voce saranno date per esempio da
<!--HTML for popup Menu 1-->
<ul id="popmenu1" class="jqpopupmenu">
<li><a href="
http://it-it.facebook.com/parsifal32"
>Facebook</a></li>
<li><a href="
http://twitter.com/parsifal32"
>Twitter</a></li>
</ul>

dove si riprende l'ID del menù (popmenu1) e si possono inserire tutti i collegamenti che vogliamo con la struttura
<li><a href="URL COLLEGAMENTO">TITOLO</a></li>
Per inserire più livelli si incolla un nuovo elenco che inizia con <ul> e termina con </ul> tra i tag </a> e </li>. Esempio:
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a
</a>
       
<ul>
        <li><a href="#">Sub Item 3.1a</a></li>
        <li><a href="#">Sub Item 3.2a</a></li>
        <li><a href="#">Sub Item 3.3a</a></li>
        <li><a href="#">Sub Item 3.4a</a></li>
        </ul>
</li>
<li><a href="#">Item 4a</a></li>


Ho colorato di blu l'elenco delle nuove voci aggiunte come sottolivello di Item Folder 3a e ho evidenziato di viola i due tag tra i quali è stato incollato il nuovo codice. Al post del cancelletto ( # ) si inseriscono gli URL dei titoli del menù.

Come accennato all'inizio, la particolarità di questo menù è che se ne può visualizzare un elemento anche all'interno di un post. Provate a puntare con il mouse quello presente nel post di test.  Si deve solo inserire un collegamento in modalità HTML con questa sintassi

 <a data-popupmenu="popmenuX" href="URL DEL COLLEGAMENTO">Anchor Text</a>
A seconda dell'ID inserito si visualizzerà il corrispondente menù quando si punterà il link con il mouse. Per fare delle personalizzazioni ulteriori, bisogna scaricare i due file CSS e JS che ho caricato sul mio account Google Sites con la modalità Schedario. Dopo che si sono variati i parametri, possono essere ricaricati su un hosting gratuito, lo stesso Google Sites oppure Google Code o DropBox; ne deve essere acquisito l'URL e si deve sostituire a quello presente nel primo codice. I parametri che si possono cambiare sono:
  1. popupmenuoffsets: [0, 0] - Si tratta delle coordinate x e y in cui compare il popup (nel file popupmenu.js )
  2. animspeed: 200 -  Velocità dello slide in millisecondi (nel file popupmenu.js )
  3. showhidedelay: [150, 150] - Intervallo di tempo per la comparsa del popup in millisecondi (nel file popupmenu.js )
  4. 160px; - larghezza del menù nel file popupmenu.css
  5. #F5F5F5; - colore di sfondo quando nel file popupmenu.css
  6. Nel file popupmenu.css si possono modificare moltissimi altri parametri che non sto qui ad elencare come il colore del menù e del testo a seconda degli eventi del mouse, la famiglia di caratteri e le loro dimensioni, la posizione della freccia (arrow) ecc.
Fonte | Dynamic Drive -


14 commenti :

  1. Ernesto lo DEVO girare a destra...ossia che si apra verso destra e non verso sinistra dato che la mia sidebar e' lì...
    Suggerimenti ? ^_^

    RispondiElimina
  2. @Astasia
    Vuoi dire che si apra verso sinistra perché hai una sidebar a destra :) Con questo menù non si può fare, vedo se ne trovo un altro.

    RispondiElimina
  3. Grazie del menu.
    Ho inserito questo nella sidebar. Peccato che come dici tu con IE ci sia qualche rallentamento e ictus temporaneo :)

    RispondiElimina
  4. ernesto questo tipo di menu puo essere buono per il mio blog??

    RispondiElimina
  5. @BrilliDiLuce
    C'è anche la versione con immagini che so essere stata installata da blog di beauty e nail art
    http://www.ideepercomputeredinternet.com/2011/03/menu-orizzontale-popup-con-immagini-per.html

    RispondiElimina
  6. Salve Ernesto, io ho problemi con la personalizzazione del menu (come il colore dello sfondo per esempio) in quanto non riesco a scaricare i file CSS e JS.
    Come faccio? Grazie dell'aiuto :)

    RispondiElimina
    Risposte
    1. Per personalizzare i colori basta che tu scarichi questo file
      https://sites.google.com/site/scriptperilblog/javascript-2/popupmenu.css
      Incolli l'URL nel browser e poi pigi su Invio. Il file poi lo puoi aprire con Notepad++
      http://www.ideepercomputeredinternet.com/2011/02/notepad-strumento-indispensabile-per.html
      cambi i codici dei colori
      http://www.ideepercomputeredinternet.com/2013/01/codici-colori-trasparenza.html
      poi salvi il file, lo carichi su Google Sites e l'indirizzo lo sostituisci nel codice
      http://www.ideepercomputeredinternet.com/2013/03/google-sites-hotlink.html
      @#

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Questo commento è stato eliminato dall'autore.

      Elimina
    4. Dovresti cercare in questo file
      https://sites.google.com/site/scriptperilblog/javascript-2/popupmenu.css
      incollandolo nel browser per poi andare su Invio. Non mi ricordo se sono immagini ma mi sembra di sì
      @#

      Elimina
    5. Salve Ernesto grazie della risposta, ho fatto tutto :)
      Un'ultima domanda, come faccio a cambiare colore alla freccetta sulla destra? Mi piacerebbe fosse bianca...le ho provate tutte ma non so dove intervenire!
      Grazie ancora

      Elimina
  7. Salve Ernesto,
    non riesco a vedere i sottomenù se il mio sito lo navigo su tablet e smartphone. In poche parole vedo solo il menù principale (le voci home, risorse blogger, effetti speciali, disclaimer). Mettendomi d'impegno riesco ad accedere alla voce "Item folder 3a" (sottomenù di "Risorse blogger") ma quando clicco su questa voce o la sua freccetta non riesco a visualizzare le voci successive, ossia "sub item 3.1-4".
    Cosa posso fare?
    Ti ringrazio della risposta.

    RispondiElimina
    Risposte
    1. Questo post è di sei anni fa e in quel periodo non ci si poneva in problema di visualizzare un elemento anche negli smartphone. Se ti piace ti consiglio di usarlo solo per la versione desktop e di aggiungere un menù specifico per il mobile come questo
      http://www.ideepercomputeredinternet.com/2015/06/blogger-mobile-menu.html
      @#

      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