19 febbraio 2011

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

Quello che vado a presentarvi è un menù molto particolare che ha le seguenti caratteristiche

  1. E' multilivello e possono essere inserite moltissime voci
  2. E' utilizzabile soprattutto in una sidebar di sinistra
  3. Si può inserire questo menù contestualmente in qualsiasi link dentro un post o un widget
  4. Funziona con il modello Semplice del Designer Modelli e quindi è presumibile che non abbia problemi anche con gli altri template più recenti
  5. 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 -




6 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

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.