Menù Orizzontale Popup con Immagini per Blogger.

Utilizzando i javascript e i CSS di un menù che ho già presentato vediamo come sia possibile crearne un altro di forma orizzontale con una serie di immagini a rappresentare le singole categorie. Il concetto è quello di vedere un popup di un menù verticale quando si punta con il mouse una singola immagine. Evidentemente le foto inserite dovranno essere personalizzate e avere attinenza con le voci secondarie che saranno viste nel relativo menù. Mi rendo conto che è più difficile spiegarlo a parole che realizzarlo in pratica. Ecco la

• Demo del Menù Orizzontale con Immagini -

Quando passerete con il mouse sopra una delle sei immagini, apparirà il popup del menù che sarà diverso a seconda della foto puntata

Ho inserito sei immagini e un menù verticale di cinque voci per ciascuna foto ma non ci sono limiti a aggiungere altri elementi, se non quelli imposti dal layout. Per l'installazione andate su Design > Modifica HTML e cercate la riga </head>. Immediatamente sopra incollate il codice

<!--Popup Immagini 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>
<noscript><a href='http://goo.gl/nMzOv' target='_blank'>Horizontal Popup Menù with Images</a></noscript>
<!--Popup Immagini Menu Fine - www.ideepercomputeredinternet.com-->

Salvate il modello. Andate su Design > Elementi pagina > Aggiungi un gadget > HTML/Javascript e incollate un altro codice di quella che sarà la struttura del vostro menù. Ho pubblicato in rete un

• Esempio di codice HTML per Menù Popup -

E' formato da sei sezioni ciascuna delle quali inizia con la riga

<ul id="popmenuX" class="jqpopupmenu">

Al di sotto viene inserito l'elenco dei collegamenti con i nomi delle singole voci con questa struttura

<li><a href="URL COLLEGAMENTO">TITOLO ELEMENTO</a></li>

Dopo aver salvato il gadget, può essere posizionato dove si vuole visto che sarà comunque invisibile per i navigatori. Ricordo che per ciascuna immagine dobbiamo creare un menù, quindi il numero delle immagini deve essere uguale a quello dei menù inseriti in questa sezione.

Le foto dovranno essere inserite in un altro elemento dello stesso genere. Si torna quindi in Design > Aggiungi un gadget > HTML/Javascript e si incolla il codice relativo alle immagini da visualizzare in orizzontale

• Esempio di codice di immagini per il Popup Menù -

La personalizzazione riguarda i seguenti elementi

1. Dobbiamo inserire il riferimento popmenuX a ciascuna immagine
2. Il target="_blank" serve per aprire la pagina in un'altra scheda e può anche essere tolto quando i collegamenti sono interni al blog
3. title="TITOLO" mostrerà un tooltip con il nome della immagine. Può anche essere eliminato se non lo riteniamo utile
4. alt="TESTO ALTERNATIVO" va lasciato perché serve per i motori di ricerca. Inserite il nome della foto.
5. Gli URL colorati di blu rappresentano gli indirizzi delle immagini e possono essere sostituiti da quelli delle vostre foto che avrete precedentemente caricato su hosting tipo Picasa o Skydrive. Per dare una idea le immagini del menù sono in PNG di 64x64 pixel.
6. &#160; è il simbolo dello spazio in HTML. Ne ho inserito uno tra immagine e immagine ma se ne possono mettere anche di più oppure eliminarli.

Dopo aver cliccato su Salva, posizionate l'elemento nella parte alta del layout

 Salvate nuovamente il modello e andate a vedere l'effetto che fa nel vostro blog. C'è anche il Drop Down Flex Level Menù che si presta a questa ulteriore personalizzazione, non escludo di farci un altro post nei prossimi giorni.