Pubblicato il 17/07/09 - aggiornato il  | 47 commenti :

Come creare un menù a tendina, Drop Down Menu per Blogger.

Come creare un menù verticale a tendina per Blogger.
Può essere interessante creare un menù a tendina o, come si dice in lingua inglese, Drop Down Menu, per inserire dei collegamenti nella sidebar di sinistra o di destra di Blogger.



 Per inserirlo in un blog su Blogger bisogna andare su Layout > Elementi Pagina > Aggiungi un Gadget > HTML/Javascript ed inserire un codice nel corpo del widget.

Il codice da inserire è il seguente


<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="border: 2px solid; color: #191919; background: white; font-family: Trebuchet MS; font-weight: bold;" name="menu"
size="1">

<option/>MENU
<option value="URL_HOME">HOME <option value="URL_LINK1">NOME LINK1
<option value="URL_LINK2">NOME LINK2
<option value="URL_LINK3">NOME LINK3 </select></form>

in cui le parti in rosso sono da personalizzare.

  1. 2 sono i pixel di larghezza del bordo
  2. Solid è il tipo di tratto del bordo, si può scegliere anche dotted o dashed e pure un eventuale colore
  3. #191919 è il colore del testo
  4. White è il colore di sfondo che può essere adattato al blog. Si può inserire anche il codice esadecimale come nel punto 3)
  5. Trebuchet MS e la famiglia di caratteri
  6. Bold significa che sarà in grassetto, se si vuole normale si elimina font-weight
  7. 1 è il numero delle righe di menù che si visualizzano
  8. MENU è il titolo del menù a tendina
  9. URL_LINK e NOME LINK sono rispettivamente l’indirizzo e il nome della pagina o della sezione di archivio (cartelle tipo search) a cui si vuole creare un collegamento
  10. Si possono creare quanti collegamenti si vuole
Ecco un esempio di Menù, il cui codice è qui, creato con i collegamenti del mio Menu laterale



47 commenti :

  1. Ciao Ernesto,
    proverò pure questo quando avrò tempo a disposizione per farlo.

    Ciao

    RispondiElimina
  2. @Mr Nessuno
    Non è una gran feature però penso possa essere utile :))

    RispondiElimina
  3. Bene sto inziando a seguirti, ti ho aggiunta/o in bacheca. Stavo cercando da tempo la possibilità di colorare un pò questo piccolo menù, usavo il java classico ma l'ho sostituito con questo. Ti risulta sia compatibile con tutti i browser? Se il Trebuchet non è installato visualizza un altro carattere di default? Non mi sembra sfrutti java questo menù, mi sbaglio?
    Scusa le domande. Paolo

    RispondiElimina
  4. @Auto...
    Invece di Trebuchet MS puoi inserire un altra famiglia di font adatta a quella del tuo blog. Il linguaggio è come spesso capita un po' misto HTML e Javascript (non Java). Mi risulta compatibile con tutti i browser ma confesso di non averlo mai utilizzato perché poco flessibile

    RispondiElimina
  5. Salve Parsifal. Si, per il font il Trebuchet va benissimo (lo uso anche io sul sito) la domanda era sul visitatore che non abbia il Trebuchet installato, se riesca comunque a leggerci qualcosa. Il SO o Broswer (?) penso che dia la possibilità comunque di applicarci un'alternativa, anche se non fosse esplicitamente citata nello script una famiglia di caratteri (confermi ?)

    L'altro punto invece non mi è molto chiaro, flessibilità in che senso? Nel mio caso ad esempio ho preferito inserire il tuo script piuttosto che un menu dinamico come quello che utilizzi come "indice" nonostante sia ineccepibilmente molto più accativante, questo perchè temo che non possa essere compatibile con tutti i browser (come mi sembra sia specificato anche in DinamicDrive) e quindi ho preferito la sostanza. Può sembrare banale ma molti utenti stanno sempre di più usando strade "diverse" da quelle che erano gli standard "popolari" di Casa Microsoft e compagnia varia..
    Scusa se mi dilungo ogni volta..
    Paolo

    RispondiElimina
  6. @Paolo
    Quando un font non è presente su un computer o un browser viene visualizzato quello di default. Fai una prova con Blogger, in ogni caso quelli più comuni sono ovunque! Per quanto riguarda la non flessibilità di quel menù mi riferivo all'impossibilità di modificarne le dimensioni. Prima di inserire una qualsiasi modifica sul blog la testo sempre oltre che su Firefox, che uso regolarmente anche su IE8, Opera e Chrome. Sono stato scottato in passato e adesso ci sto attento :)
    Tutti i menù che ho presentato in questo ultimo mese sono visibili in tutti i browser. Su Dynamic Drive ci sono solo delle riserve su IE8 e solo in alcuni casi.
    Ciao

    RispondiElimina
  7. Scusa Prsifal, ciao e complimenti per il sito. Ma ammesso che inserisco questo menu' sul blog, se metto i link ad altre pagine mi dice pagina non trovata.. Insomma, come faccio a generare nuove pagine su blogger? (Del tipo www.nomesito.com/blabla.html) Non so se mi spiego
    Scusa l'ignoranza risp e graxie

    RispondiElimina
  8. @Anonimo
    Devi mettere un link a delle pagine che esistono già. Per esempio questa pagina ha come URL
    http://parsifal32.blogspot.com/2009/07/come-creare-un-menu-tendina-drop-down.html?showComment=1250851940453#c1112271768215986507
    L'indirizzo si copia dalla barra degli indirizzi sul browser. Vai sulla pagina, clicchi con il destro del mouse su "Seleziona tutto" e copi l'indirizzo, quindi lo incolli nel menù.
    Ovviamente quello che ho incollato è l'URL del commento mentre quello della pagina è
    http://parsifal32.blogspot.com/2009/07/come-creare-un-menu-tendina-drop-down.html
    Spero di essere stato chiaro. Ciao

    RispondiElimina
  9. Sì, quello lo sapevo già, ma non si può proprio creare una pagina tipo come altervista? e poi gli altri blog creati con blogger non hanno la struttura del tuo, e cioè a differenza degli altri siti creati con blogspot il tuo ha le pagine ben divise che terminano in html. Come si fa? Scusa il disturbo

    RispondiElimina
  10. @Anonimo
    Tutti i blog creati con Blogger sono esattamente come il mio. L'homepage ha un indirizzo tipo
    miosito.blogspot.com
    ma quando clicchi sul titolo di un articolo l'URL del post è miosito.blogspot.com/2009/08/titolo-articolo.html
    ovviamente 2009 è l'anno e 08 è il mese che possono cambiare. E' per tutti così, senza eccezioni.
    Naturalmente gli archivi, che puoi trovare cercando p.e il mese di agosto in archivio blog hanno un'altro tipo di URL così come le etichette che hanno una struttura mioblog.blogspot.com/search/label/etichetta.
    Con Wordpress puoi creare delle pagine statiche ma con Blogger non si può. Anche con Altervista puoi creare delle pagine ma non puoi inserirci la pubblicità; in ogni caso le puoi sempre sfruttare per linkarle nel menù

    RispondiElimina
  11. ditemi che c'e' qualcuno vi prego! Ho creato il menu a tendina, ma ora come faccio a mettere in ordine alfabetico tutti i links? Aiuto!

    RispondiElimina
  12. @ISIDE
    La domanda è veramente strana. Immagino che tu sappia mettere in ordine alfabetico dei nomi!
    L'operazione è puramente manuale. Li metti uno sotto all'altro in quale ordine preferisci, ovviamente anche in quello alfabetico :)

    RispondiElimina
  13. lo sapevo che rispondevi cosi! Intendevo in automatico! :)

    RispondiElimina
  14. sono un po pigra! Sai ho circa 400 link da inserire!

    RispondiElimina
  15. @ISIDE
    Se sai usare il programma Excel puoi inserire tutta la lista di link e quindi attivare il comando per metterli in ordine alfabetico

    RispondiElimina
  16. Volevo trovare una via piu breve, ma temo che non esista! Blogger fornisce solo l'elenco e non il menu a tendina!

    RispondiElimina
  17. Ma il fatto e' che io devo inserire continuamente i link! Ho un blog di giochi escape e devo archiviare le soluzioni!

    RispondiElimina
  18. Comunque devo ringraziarti per tutti i consigli che dai! Sono veramente molto chiari!Bravo!Per quanto riguarda il mio elenco credo che dovro' vincere la pigrizia ))

    RispondiElimina
  19. Buona Notte Parsifal32))E grazie; almeno ora ho il mio menu a tendina!

    RispondiElimina
  20. Allora mi sa che devo imparare a usare Excel!Grazie ! Ti faro' sapere se ho fatto qualche progresso!)))))

    RispondiElimina
  21. metto l'URL del sito a cui voglio collegarmi dalla tendina ma non esce nulla...come mai??

    RispondiElimina
  22. @antonio contini
    Se vuoi inserire un menù nel blog invece di adottare questa tecnica che è più didattica che operativa ti consiglio di leggere uno dei seguenti articoli
    http://parsifal32.blogspot.com/2009/07/come-creare-un-menu-espandibile-da.html
    http://parsifal32.blogspot.com/2009/07/come-inserire-un-menu-laterale-tendina.html
    http://parsifal32.blogspot.com/2009/07/come-inserire-tre-menu-scorrevoli.html
    http://parsifal32.blogspot.com/2010/01/come-inserire-un-menu-orizzontale.html
    http://parsifal32.blogspot.com/2010/02/come-inserire-nel-blog-un-menu.html
    In questo blog ne puoi trovare anche altri.
    Ciao

    RispondiElimina
  23. ciao, ho utilizzato questo gadget in un blog ma ho notato che anziche reindirizzare, i link aprono nuove schede. è possibile evitare questo piccolo inconveniente e far si che il link si apra nella scheda corrente?
    grazie e complimenti per il blog utilissimo

    RispondiElimina
  24. @giof
    Naturalmente sì, basta sostituire nella prima parte del codice
    value,'_blank' con value,'_self'
    Ciao

    RispondiElimina
  25. Oddio che genio che sei!!! l'hai spiegato benissimo grzie! :)

    RispondiElimina
  26. Ernesto solo una cosa: perchè chiamano sempre loyout quello che è il design?

    RispondiElimina
  27. Però a me servirebbe un menu come quello di questo sito. Mi puoi dare il link?

    RispondiElimina
  28. @Corvo Michele
    Layout letteralmente significa schema, impaginazione, progetto, disposizione,... può quindi essere usato con vari significati.
    Il menù di questo sito lo puoi trovare qui sotto
    http://www.ideepercomputeredinternet.com/2009/10/come-creare-chrome-drop-down-menu-un.html
    Ciao

    RispondiElimina
  29. Utilissimo questo codice, però mi chiedevo se fosse possibile aumentare l'altezza della tendina.
    Cliccando sulla freccettina si vedono immediatamente 19 voci e poi si deve scorrere con la scrollbar. A me servirebbe più alta...
    Grazie

    RispondiElimina
  30. @Kaleela
    Dipende dalla posizione in cui la metti. Non è presente nessun parametro che ne determina la lunghezza.

    RispondiElimina
  31. Ti ringrazio infinitamente per aver risposto!!
    Bene, vorrà dire che vedrò di mettere le voci più importanti nella parte superiore.

    Comunque grazie ancora perché questo menu l'ho cercato per un sacco di tempo.

    RispondiElimina
  32. Buongiorno Parsifal. Sono ui per la prima volta perché ho trovato questo interessante post sul menu drop down. Mi sembra però che codice ed esempio da te fatto non vada bene per quello che ho bisogno di creare. Se puoi andare sul mio blog http://sinfoniadivoci.blogspot.com/ forse mi riuscirà di spiegarmi meglio. Io vorrei cioè incrociare Associazioni con Categorie (vedi il mio blog a destra sotto il menu di navigazione). Vale a dire vorrei creare una categoria seneca e una sottocategoria anziani, un'altra sottocategoria eventi e via dicendo. Poiché il blog raduna alcune associazioni (per ora solo due) vorrei che fosse possibile selezionare oltre che tutti i post di una determinata associazione, anche i soli post di quella associazione che abbiano la categoria "anziani" per fare un esempio oppure la categoria "testimonianze" e via dicendo. Mi puoi dare una mano? Grazie.

    RispondiElimina
  33. @Ambra
    Con Blogger non si possono creare sottocategorie. Si può fare solo con Wordpress. Con Blogger le etichette sono tutte alla pari non è possibile creare una gerarchia.

    RispondiElimina
  34. Peccato! Ma grazie dell'informazione, così mi metto il cuore in pace e non cerco più di creare delle sottocategorie, fra l'altro senza riuscirci.

    RispondiElimina
  35. Bello l'articolo, volevo inserirlo nel mio blog facendo un paio di modifiche che non mi riescono però, e sarebbero:
    mettere 2 menù uno a fianco all'latro, a me vengono sempre uno sotto l'altro.. e poi che il link non portasse ad un'altra pagina (windows.open) ma che si aprisse nella stessa (location.href).
    ma non riesco a implementare il codice, mi dai un suggerimento?

    grazie mille

    RispondiElimina
    Risposte
    1. @Mabur
      Per mettere due o tre menù uno a fianco all'altro usa una tabella a una riga e due/tre colonne. Forse ti può aiutare questo post
      http://www.ideepercomputeredinternet.com/2012/08/galleria-immagini-blogger.html

      Elimina
  36. vorrei che non si vada in un'altra pagina quando si clicca nelle sezioni del menù ma togliendo quel _blank tutti i link smettono di funzionare. Non si può fare proprio nulla per questo?

    RispondiElimina
    Risposte
    1. Ora sono al cellulare e non posso fare una ricerca per dirti il tag con certezza, magari falla tu, ma prova a sostituire _blank con _self
      @#

      Elimina
    2. ho provato io e con il tuo consiglio ha funzionato perfettamente, grazie.

      Elimina
  37. E' possibile personalizzare il menù a tendina dell'Archivio Blog di Blogger?

    RispondiElimina
    Risposte
    1. Con l'Archivio si può fare poco comunque ci sono già un sacco di opzioni di configurazione andando su Modifica. Si può scegliere Compatto, Compresso e a Gerarchia. Di più è difficile
      @#

      Elimina
  38. Buongiorno Ernesto! sono riuscita a mettere più menu ma vorrei sapere se C'è la possibilità di centrare o allineare a sinistra il menu a tendina? me li allinea automaticamente a sinistra ma dovrò aggiungerne altri e vorrei dividerli. Grazie :)

    RispondiElimina
    Risposte
    1. @# Prima del codice del menu incolla questa riga
      <div align="center">
      per centrarlo o questa
      <div align="right">
      per visualizzarlo sulla destra. Alla fine del codice invece incolla questo tag di chiusura
      </div>

      Elimina

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