6 luglio 2009

36 commenti Condividi il post Facebook Twitter Google+

Come inserire un menu a tendina nel blog

Qualche giorno fa Ale del blog A spasso con Solidea e Ale mi ha chiesto se è possibile inserire un menu a tendina nel blog con alcune delle etichette dei post.

Nel loro blog infatti, tra i vari argomenti trattati, sono presenti numerosi post con tante buonissime ricette divise in categorie (primi, secondi, contorni, dolci, ecc).

Ale vorrebbe quindi inserire un menu a tendina con i link delle varie categorie di ricette.

Potrebbe anche essere comodo inserire nel blog un menu a tendina con i link dei post più letti o con i link dei blog amici.

Per creare un menu a tendina come questo vi basta scrivere:

<select name="tendina" size="1" onchange="alert('Hai selezionato ' + this.value)">
<option value="...">...</option>
<option value="Uno">Uno</option>
<option value="Due">Due</option>
<option value="Tre">Tre</option>
</select>
dove:
name: è il nome del menu a tendina; se nella pagina sono presenti più menu, ognuno dovrà avere un nome diverso.

size: è la dimensione del menu, cioè il numero delle righe che vengono visualizzate. Impostando per esempio size="3" il menu a tendina diventa così:


onchange: è un evento del menu a tendina; è possibile gestire quest'evento associando una funzione javascript che agirà ogni volta che viene selezionata una opzione del menu.

Per ogni opzione da visualizzare nel menu occorre inserire una riga:

<option value="valore">Descrizione</option>

E' possibile personalizzare il menu a tendina (colori, sfondo, font, ecc) aggiungendo l'attributo style; ad esempio aggiungendo:

<select name="tendina" size="1" style="border: 2px green solid; color: blue; background: gold; font-family: Verdana; font-weight: bold;">
<option value="...">...</option>
<option value="Uno">Uno</option>
<option value="Due">Due</option>
<option value="Tre">Tre</option>
</select>

il menu a tendina diventa così:

Vediamo ora il codice necessario per creare un menu a tendina con un elenco di link. Come esempio riporto quello con le etichette più cliccate sul mio blog.

Esistono due possibilità per aprire il link selezionato: in una nuova finesta oppure nella stessa pagina; vediamo in dettaglio i due casi.

- Link in una nuova finestra:

<select name="linkIole1" size="1" onchange="window.open(this.value)">
<option value="#">Seleziona</option>
<option value="http://iolecal.blogspot.com/search/label/blog">Blog</option>
<option value="http://iolecal.blogspot.com/search/label/grafica">Grafica</option>
<option value="http://iolecal.blogspot.com/search/label/tutorial">Tutorial</option>
<option value="http://iolecal.blogspot.com/search/label/web">Web</option>
<option value="http://iolecal.blogspot.com/search/label/widget">Widget</option>
</select>

- Link nella stessa pagina:

<select name="linkIole2" size="1" onchange="location.href=this.value">
<option value="#">Seleziona</option>
<option value="http://iolecal.blogspot.com/search/label/blog">Blog</option>
<option value="http://iolecal.blogspot.com/search/label/grafica">Grafica</option>
<option value="http://iolecal.blogspot.com/search/label/tutorial">Tutorial</option>
<option value="http://iolecal.blogspot.com/search/label/web">Web</option>
<option value="http://iolecal.blogspot.com/search/label/widget">Widget</option>
</select>

Resto a disposizione per qualsiasi dubbio o chiarimento!


Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

36 commenti

  1. Jole!!! prendo l'aereo e vengo da te..mi dai lezioni private? io ti preparo pranzo e cena....davvero devo fare un corso, non è possibile che io sia così....non posso dirlo (fascia protetta)

    RispondiElimina
  2. @Solidea: ok, ti aspetto all'aeroporto!

    RispondiElimina
  3. @Ale: ora hai tutte le istruzioni per inserire il menu nel blog... non hai più scuse. Io invece la torta fredda con yogurt e fragole ancora non l'ho fatta, questo week-end sono stata molto impegnata ;)

    RispondiElimina
  4. Grazie mille Iole!
    Sul tuo blog non si finisce mai di imparare!

    RispondiElimina
  5. capito seguendo un link...
    grazie per la tua disponibilità ad aiutare chi ne sa poco o nulla... ti linko da me ... così non ti perdo e torno con calma a visitarti ancora.... ;O) Viola

    RispondiElimina
  6. @Den: ^_^
    @Viola: passa quando vuoi e se hai richieste dimmi pure, ti aiuto volentieri!

    RispondiElimina
  7. Sempre ottimi questi post!
    Complimenti Iole
    Prossimamente preoverò ad inserirlo, ma adesso mi piacerebbe inserire alla fine del post alcuni link che si correlano al post soprascritto.
    Si può fare con una procedura automatica? oppure bisogna metterli uno per uno manualmente??
    Spero di essermi spiegato.

    RispondiElimina
  8. @vit: su molti blog ho notato il widget LinkWithin alla fine di ogni post che ti propone tre post correlati. A giorni pubblicherò un post per visualizzare alla fine di ogni post gli articoli correlati in base alle etichette.

    RispondiElimina
  9. finalmente sono riuscita ad iniziare queste benedette tendine...
    grazie
    Un abbraccio

    RispondiElimina
  10. @Ale: brava! Vedo che le hai anche personalizzate con i colori del vostro blog. Hai visto che è più facile fare le tendine che le torte?

    RispondiElimina
  11. Ciao Iole, piacere di conoscerti. Sono Elly di DolceMania per la Pasticceria.
    Io ho sempre letto il blog di Tenebrae e grazie a lui sono arrivata a te. Complimenti, ti linko nel mio blog di cucina. Cmq ti volevo chiedere che cosa devo scrivere nel onchange....non avrei capito cosa è.

    Grazie e spero che mi verrai a trovare :)

    RispondiElimina
  12. @€llY: grazie! aggiungerò presto un link al tuo blog.
    Nell'onchange del menu a tendina devi scrivere "window.open(this.value)" se vuoi che il link selezionato si apra in una nuova finestra oppure "location.href=this.value" per visualizzare il link nella stessa pagina.

    RispondiElimina
  13. ciao, ho trovato molto utile e semplice il tuo modo di spiegare come costruire il menù a tendina. Ci sono solo due problemi che ho riscontrato e che non riesco al momento a bypassare
    1) se voglio aprire il link in nuova finestra me lo blocca come popup (se apro nella stessa finestra no)
    2) mi "spagina" la struttura del blog ossia mi mette il post fuori visuale del tutto (la mia piattaforma è myblog) e questa cosa è accaduta con vari codici di menù
    ti ringrazio in anticipo se potrai fornirmi dettagli utili e in ogni caso grazie per i codici che hai postato
    (puoi lasciarmi un commento sul blog e così avrò una mail a cui contattarti)

    RispondiElimina
  14. @strega Athena: forse il problema del blocco dei popup dipende da qualche impostazione del tuo browser.
    Per la struttura del blog, purtroppo non so darti una risposta, non conosco la piattaforma myblog.
    Come ho già detto altre volte trovate i miei contatti (email e chat) cliccando sulle icone presenti sull'immagine di header. Cmp passerò sul tuo blog e ti lascerò la mia email!

    RispondiElimina
  15. Ciao Iole
    scusa se oggi ti disturbo ancora

    volevo chiederti
    io ho un menù orrizzontale sotto alla foto iniziale
    potre a quello aggiungere il menù a tendina
    e se si dove devo intervenire

    Grazie mille
    buona notte
    smack Manu

    RispondiElimina
  16. @Manu: se ho ben capito cosa vuoi fare, leggi il mio post Menu orizzontale per il blog! Per qualsiasi dubbio o chiarimento contattami pure.

    RispondiElimina
  17. Ciao Iole sono Tiziana del blog http://attivitacreativebambini.blogspot.com/
    ho un blog anche su splinder è possibile inserire un menù a tendina come l'ultimo che hai proposto su splinder??? Grazie

    RispondiElimina
  18. @Tiziana: penso che il menu a tendina si possa inserire anche in Splinder.
    So che alcuni lettori utilizzano il mio Google Translate Widget che come il menu a tendina contiene codice javascript e su Splinder è supportato.

    RispondiElimina
  19. Ciao sono Daniela...
    avrei un piccolo problema riguardando il menu a tendina...
    questo è il mio blog www.leyra86.blogspot.com
    dato che ho creato il template con un programma artisteer.. ho creato anche il menu' sul programma ho messo che doveva essere a tendina...ma sul blog non escono...come faccio a far si che esce a tendina grazie ciao ciao..^^

    RispondiElimina
  20. @Daniela: scusa se rispondo con così tanto ritardo ma al momento sono molto impegnata e purtroppo non sempre riesco a rispondere in tempi brevi alle richieste dei miei lettori.
    Non conosco il programma artisteer, ma creare un menu a tendina seguendo le istruzioni riportate nel post è molto semplice.

    RispondiElimina
  21. ciao salve io vorrei creare un menu a tendina che si aggiorna automaticamente con i bost in base alle etichette è possibile???

    RispondiElimina
  22. @ilenia: potresti darmi qualche dettaglio in più su come deve essere fatto il menu a tendina?

    RispondiElimina
  23. ciao Iole e grazie per il meraviglioso blog che curi...utile è dir poco!
    sono Annamaria e con mio marito ho un blog sulla pratica del portare i bambini: http://bottegabubamara.blogspot.com e vengo al dunque di una mia richiesta d'aiuto. Stiamo creando una raccolta di link da mettere in home e abbiamo pensato di usare una struttura con il menù a tendina come nell'esempio di questo tuo post. Il problema nasce quando si clicca su "seleziona" con il menù esteso, praticamente si apre la stessa pagina su un'altra scheda (usiamo ff) e come soluzione non ci piace. Abbiamo provato a togliere "onchange" e inserite "target="_blank" ad ogni link (escludendo ovviamente "seleziona") senza però avere risultati,potresti darci un tuo consiglio? Grazie Annamaria

    RispondiElimina
  24. ciao il tuo blog è molto bello...una domanda a proposito anzi due...
    una che se si puo avere un menu a tendina senza la selezione sulla freccetta cioe...quando vado con la manina su un menu esempio audio vorrei che si aprise una tendina e scorrerei con la manina e successivamente cliccarci su.
    -2 il codice che verra fuori dova andra inserito in che location della pagina nella versione HTML?

    grazie in anticipo

    RispondiElimina
  25. @Bottega Bubumara: affinché cliccando su Seleziona non si apra nessuna pagina occorre aggiungere una funzione javascript. Mandami via email il codice html del menu a tendina così gli aggiungo la funzione javascript.
    @Cris: quello che mi chiedi non si può fare. Il menu a tendina si apre solo cliccando sulla freccetta. In alternativa puoi usare un menu a tendina "aperto" impostando il parametro size con il valore delle voci presenti nel menu (nel post trovi un esempio con size="3").

    RispondiElimina
  26. Io non ho capito nnt!!! o.O Ho creato il blog, e mi servirebbe questo benedetto menu a tendina, perchè trattandosi di moda e make up, ad ogni etiketta voglio aggiungere la tendina con i vari brands oppure per quanto riguarda moda ad esempio delle sottocategorie, se mi potresti spiegare nel dettaglio come fare te ne sarei grata, ad esempio nn ho capito dove inserire il codice html, cakkio na volta su msn era tutto molto + semplice, per fortuna ke esistono persone come te ke ci capiscono qlks e aiutano noi, povere ignorantelle XD, cmq se vuoi passare dal mio blog, l'ho appena aperto, e spero di ricevere + visite T.T ahah un bacio

    RispondiElimina
  27. @Dyanuccia: penso che le istruzioni riportate nel post siano abbastanza dettagliate. Basta un po' di impegno e ci riuscirai come tutti gli altri lettori che lo hanno già aggiunto nei loro blog.

    RispondiElimina
  28. Ciao sto cercando di sistemare il mio blog ma sono alle prime armi!!! ho già il menu a tendina ma sono riuscita a collegare solo il link di un post ad ogni voce….vorrei assegnare ad ogni voce del menu un argomento e cliccando li che si raggruppassero i post della stessa materia, ad esempio cucito….spero sia riuscita a spiegarmi
    grazie

    barbara

    RispondiElimina
  29. @Barbara: per visualizzare più post che trattano gli stessi argomenti devi prima assegnare a ciascun post delle etichette. Puoi farlo cliccando sulla voce Etichette che si trova in alto a destra nell'editor dei post. Nel menu poi dovrai inserire i link delle varie etichette.

    RispondiElimina
  30. Ciao Iole, grazie mille con il tuo consiglio ho risolto, magari ti farò altre domande prima vado a dare una sbirciata se trovo già qualche risposta nel tuo blog….ti lascio l'indirizzo del mio blog è ancora in costruzione ma magari mi puoi dare qualche dritta!!!
    http://lecosedibibbi.blogspot.it
    barbara

    RispondiElimina
  31. @Barbara: sono contenta di esserti stata utile.
    Ho notato che nella home tuo blog passando con il mouse sopra le immagini compaiono tra "pallini" con scritto undefined mentre credo che i tre pallini dovrebbe contenere le informazioni della data del post (giorno, mese e anno). Ti consiglio quindi di dare un'occhiata al mio post Come risolvere il problema della data "undefined".

    RispondiElimina
  32. Ciao Iole per caso sai se è possibile fare una lista a tendina automatica di tutti i titoli degli articoli cliccabili? Automatica nel senso che come pubblico un articolo, la lista si aggiorna automaticamente. Si può fare? ciao

    RispondiElimina
    Risposte
    1. @DeepMoon: quello che mi chiedi si può fare! Aggiungo la tua richiesta alla lista dei widget da realizzare.

      Elimina
    2. Grazie mille, sei gentilissima. Lo attendo con ansia. Un abbraccio.

      Elimina

Se volete sostenere il mio blog, visitate questi siti. Grazie!
Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy