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

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

Ho pubblicato sul web un esempio di questo menù

• Demo del Popup 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

• Esempio di codice di Popup Menù -

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 -