Drop Down Menù a più livelli per Blogger.

Continuo la rassegna di menù che riescono a funzionare anche con i nuovi template del Designer Modelli. Quello che vado a presentare è stato chiamato dall'autore "Flex Level Drop Down Menu" e ha una struttura multilivello che si apre sotto forma di popup al passaggio del mouse.
Date un'occhiata alla

             Demo del Drop Down Menù per Blogger -

Vediamo come procedere all'installazione. Si va su Design > Modifica HTML e si cerca la riga </head>. Dopo aver salvato il modello, si incolla subito sopra il codice seguente

<!--Flexleveldropdown Menu Inizio-->
<link href='  ....   /flexdropdown.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='  .... /flexdropdown.js' type='text/javascript'>
/***********************************************
* Flex Level Drop Down 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>
<noscript><a href='http://goo.gl/Qxmkf' target='_blank'>Drop Down Flex Level Menù</a></noscript>
<!--Flexleveldropdown Menù Fine - www.ideepercomputeredinternet.com-->

Dove al posto degli URL evidenziati di rosso si inseriscono quelli ottenuti da DropBox dopo aver caricato i due file che possono essere scaricati da questo archivio. Si Salva il modello. Si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla un codice simile a questo

• Esempio di codice del Flex Level Drop Down Menù -

I collegamenti e le voci possono essere personalizzate a piacere. Per creare delle voci secondarie si inserisce un elenco, per esempio questo
<ul>                 <li><a href="#">Sub Item 5.2.1a</a></li>
                <li><a href="#">Sub Item 5.2.2a</a></li>
                <li><a href="#">Sub Item 5.2.3a</a></li>
                <li><a href="#">Sub Item 5.2.4a</a></li>
                </ul>
tra i tag </a> e </li> della voce del livello superiore. Per maggiore chiarezza ho evidenziato di colori di diversi questi tre elementi. I simboli di cancelletto possono essere lasciati o sostituiti con un URL di collegamento. Il tag target="_blank" serve per aprire la pagina in un'altra scheda del browser. Dopo aver salvato l'elemento pagina, si posiziona con il mouse in una sidebar.
La particolarità di questo menù è che volendo si può far aprire il popup del menù anche in un collegamento della pagina con questa sintassi

<a href="URL COLLEGAMENTO" data-flexmenu="flexmenu1">ANCHOR TEXT</a>


Se si apre il file flexdropdown.js con Notepad++ possono essere effettuate le seguenti personalizzazioni

animspeed: 200, //velocità animazione (in millisecondi)
showhidedelay: [150, 150], //intervallo prima della comparsa o scomparsa del menù (in millisecondi)
Con le modifiche al file CSS flexdropdown.css si possono variare parecchi parametri come i caratteri, i colori del testo e dello sfondo, i bordi e le dimensioni in pixel. Si può anche variare l'aspetto del menù contestuale inserendo dei parametri nel link
data-dir: Si inserisce "h" per vedere il menù in senso orizzontale il valore di default è "v"
data-offsets: si inseriscono due numeri [x,y] per specificare le coordinate di inizio del popup
Esempio di un collegamento potrebbe essere
<a href="http://www.ideepercomputeredinternet.com/" data-flexmenu="flexmenu1" data-offsets="[0,3]" >Idee per computer ed Internet</a>
come mostrato nel post di esempio. E' molto simile al Popup Menù presentato qualche settimana fa.
Fonte | Dynamic Drive -