04 marzo 2011

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

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

menù orizzontale popup

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

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

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

menù popup immagini

 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.




29 commenti:

  1. grazie mille Ernesto... lo apprezzo tantissimo! Ho notato anche la nuvoletta con il numero di commenti dentro... ci hai già fatto un articolo? Credo di essermelo perso. GRAZIE!

    RispondiElimina
  2. @Dea
    Due articoli per l'icona con il numero dei commenti
    http://www.ideepercomputeredinternet.com/2010/01/come-inserire-una-icona-con-il-numero.html
    http://www.ideepercomputeredinternet.com/2011/01/inserire-una-icona-con-il-numero-dei.html

    RispondiElimina
  3. ciao parsifal, post utilissimo :)
    ho solo un piccolo problema: come faccio a trasformare le immagini in 64x64?

    perchè mettendo direttamente il link da internet mi vengono grosse 355x550 pixel :(

    Grazie mille Valeria

    RispondiElimina
  4. @Valeria
    Scarichi le immagini che ti servono, quindi le ridimensioni con Pixlr
    http://www.ideepercomputeredinternet.com/2011/01/pixlr-per-modificare-foto-e-immagini.html
    Le carichi su Picasa e ne acquisisci l'URL

    RispondiElimina
  5. ora ci provo e ti so dire, se uso paint va bene lo stesso?

    RispondiElimina
  6. @Valeria
    Certo che va bene! Ti ho indicato quel sito perché pensavo non avessi nessun programma nel computer in grado di ridimensionare le foto :)

    RispondiElimina
  7. Ernesto scusa (spero di non chiedere troppo). Oltre alla foto (vorrei mettere volti di persone) si possono mettere anche didascalie per spiegare chi sono?

    RispondiElimina
  8. @Stefano
    Prova a caricare le foto su Picasa e a inserire le didascalie quindi acquisiscine l'URL. Non ho provato ma potrebbe funzionare. Altrimenti puoi crearle con WLW, copiare il codice e incollarlo al posto di quello della immagine.

    RispondiElimina
  9. Perdono ma le immagini devono avere tutte la stessa dimensione? (sono all'opera)

    RispondiElimina
  10. @Soffio di Dea
    In teoria no, ma cerca di fare in modo che non ci sia troppa differenza altrimenti potrebbero non visualizzarsi correttamente in linea retta

    RispondiElimina
  11. ok... si cerco di dare la stessa altezza così sono allineate ma la larghezza inevitabilmente cambia per via delle scritte. Speriamo bene. Continuo. Grazie :)

    RispondiElimina
  12. Allora l'ho ultimato graficamente ma devo ancora sistemare le voci e adattare i colori al mio blog... (sta venendo troppo carino, grazie!). Prima di allargare gli spazi tra le immagini volevo chiederti se fosse possibile inserire il modulo "ricerca" in questo menu...

    RispondiElimina
  13. @Soffio di Dea
    In teoria è possibile ma solo con la ricerca classica e non quella di Adsense. Ci sarebbero però molte difficoltà da superare. Il post di riferimento potrebbe essere questo
    http://www.ideepercomputeredinternet.com/2011/01/menu-orizzontale-con-casella-di-ricerca.html

    RispondiElimina
  14. ok magari finisco di sistemarlo e poi eventualmente ci provo. Merci.

    RispondiElimina
  15. Ernesto (ahahahah rido da sola al solo pensiero della mia ennesima richiesta!) una cosa del genere ora mi serve verticale per il menu laterale. Le immagini invece di essere allineate orizzontalmente dovrebbero essere una sopra l'altra... come posso fare? (sei autorizzato a mandarmi a quel paese -.-)

    RispondiElimina
  16. @Soffio di Dea
    Cercherò di rimanere calmo...
    Vai su WLW. Inserisci una tabella di 6 righe e 1 colonna. Per ogni cella inserisci una immagine con il collegamento secondo la sintassi spiegata in questo post
    http://www.ideepercomputeredinternet.com/2011/03/menu-orizzontale-popup-con-immagini-per.html
    In WLW vai su Origine e copia il codice HTML quindi lo incolli su Design > Aggiungi un gadget HTML > HTML/Java e lo posizioni nella sidebar.

    RispondiElimina
  17. ehm grazie :) lo terrò presente... stavo provando e ho visto che aumentando gli spazi possono posizionarsi come si vogliono anche verticalmente. Cmnq il menu orizz è fatto... troppo carino (secondo me)... grazie mille :) p.s. meno male che siamo lontani se no mi facevi camminare sui ceci! -.-

    RispondiElimina
  18. Caro Ernesto un'ulteriore domanda prima di provare ad installare il menù. Le pagine statiche che ho creato possono coesistere con il menù o creano incompatibilità e quindi vanno tolte? Grazie e ciao.

    RispondiElimina
  19. @Stefano
    Nessuna incompatibilità per le pagine statiche

    @Soffio di Dea
    Per mettere le immagini in verticale basta che inserisci il tag < br/ > dopo ciascuna immagine oppure < div > all'inizio e < /div > dopo il codice dell'immagine. Ovviamente senza spazi dopo e prima dei segni di maggiore e minore.

    RispondiElimina
  20. Quando inserisco nel modello (sopra l'head) non mi fa fare il salvataggio e mi segnala:
    The string "--" is not permitted within comments

    RispondiElimina
  21. erensto, posso applicare questo tipo di menu senza però mettere nessun immagine sotto?? me lo consigli per il mio blog??

    RispondiElimina
  22. @BrilliDiLuce
    Certo però devi metterci dei link. Invece di questo tipo di codice
    https://docs.google.com/document/pub?id=179BG5vbKlWoa18B8GypzrCB9GVUj3zizlOJkejHrRaA
    devi inserire delle righe di questo genere
    <a data-popupmenu="popmenu1" href="#" target="_blank" >Voce del Menù</a>

    P.S Come consigli estetici non mi sbilancio mai perché non ho quello che sia definisce un gran buongusto

    RispondiElimina
  23. io questa parte di qui: https://docs.google.com/document/pub?id=179BG5vbKlWoa18B8GypzrCB9GVUj3zizlOJkejHrRaA nella descrizione cheh ai fatto non la trovo.

    RispondiElimina
  24. @BrilliDiLuce
    E' l'indirizzo della pagina in cui c'è il codice di esempio

    RispondiElimina
  25. Ciao Ernesto,
    probabilmente sarai in vacanza e mi risponderai ahimé al tuo ritorno o magari sarò così fortunata da ricevere una risposta già ora!!

    Allora, nel mio blog El Paladar Feliz, su cui ho fatto duemila modifiche alcune delle quali scriteriate dal punto di vista html, mi piacerebbe personalizzare il menu delle pagine statiche. Il top sarebbe utilizzare l'idea di questo post, quindi un'immagine per ogni pagina al posto della triste scritta di default.
    Il problema è che a me non interessa mettere dei sottolink, ma puramente le immagini che se cliccate aprono la pagina statica corrispondente.

    Non so bene come procedere...

    Puoi aiutarmi per favore??

    Grazie.

    La Fra

    RispondiElimina
  26. @La Fra
    Il post di riferimento è questo
    http://www.ideepercomputeredinternet.com/2011/02/come-aggiungere-link-al-widget-delle.html
    Devi considerare che puoi togliere tutti i link delle pagine statiche e inserire tutti gli altri collegamenti che ti pare.
    Se vuoi inserire delle immagini al posto del testo linkato puoi usare questa sintassi
    <li><a href='Indirizzo Link'><img src="URL Immagine" alt="nome immagine></a></li>

    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.