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:<option value="...">...</option>
<option value="Uno">Uno</option>
<option value="Due">Due</option>
<option value="Tre">Tre</option>
</select>
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>
<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>
<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>
<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.
Copyright 2008- 
Design by 
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@Solidea: ok, ti aspetto all'aeroporto!
RispondiEliminasmack!!!!!!!!!!!!!!!!
RispondiElimina@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 ;)
RispondiEliminaGrazie mille Iole!
RispondiEliminaSul tuo blog non si finisce mai di imparare!
capito seguendo un link...
RispondiEliminagrazie 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
@Den: ^_^
RispondiElimina@Viola: passa quando vuoi e se hai richieste dimmi pure, ti aiuto volentieri!
Sempre ottimi questi post!
RispondiEliminaComplimenti 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.
@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.
RispondiEliminafinalmente sono riuscita ad iniziare queste benedette tendine...
RispondiEliminagrazie
Un abbraccio
@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?
RispondiEliminaCiao Iole, piacere di conoscerti. Sono Elly di DolceMania per la Pasticceria.
RispondiEliminaIo 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 :)
@€llY: grazie! aggiungerò presto un link al tuo blog.
RispondiEliminaNell'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.
grazie!!! utilissimo!! :)
RispondiEliminaciao, 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
RispondiElimina1) 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)
@strega Athena: forse il problema del blocco dei popup dipende da qualche impostazione del tuo browser.
RispondiEliminaPer 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!
Ciao Iole
RispondiEliminascusa 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
@Manu: se ho ben capito cosa vuoi fare, leggi il mio post Menu orizzontale per il blog! Per qualsiasi dubbio o chiarimento contattami pure.
RispondiEliminaCiao Iole sono Tiziana del blog http://attivitacreativebambini.blogspot.com/
RispondiEliminaho un blog anche su splinder è possibile inserire un menù a tendina come l'ultimo che hai proposto su splinder??? Grazie
@Tiziana: penso che il menu a tendina si possa inserire anche in Splinder.
RispondiEliminaSo che alcuni lettori utilizzano il mio Google Translate Widget che come il menu a tendina contiene codice javascript e su Splinder è supportato.
Ciao sono Daniela...
RispondiEliminaavrei 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..^^
@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.
RispondiEliminaNon conosco il programma artisteer, ma creare un menu a tendina seguendo le istruzioni riportate nel post è molto semplice.
ciao salve io vorrei creare un menu a tendina che si aggiorna automaticamente con i bost in base alle etichette è possibile???
RispondiElimina@ilenia: potresti darmi qualche dettaglio in più su come deve essere fatto il menu a tendina?
RispondiEliminaciao Iole e grazie per il meraviglioso blog che curi...utile è dir poco!
RispondiEliminasono 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
ciao il tuo blog è molto bello...una domanda a proposito anzi due...
RispondiEliminauna 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
@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.
RispondiElimina@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").
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@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.
RispondiEliminaCiao 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
RispondiEliminagrazie
barbara
@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.
RispondiEliminaCiao 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!!!
RispondiEliminahttp://lecosedibibbi.blogspot.it
barbara
@Barbara: sono contenta di esserti stata utile.
RispondiEliminaHo 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".
@DeepMoon: quello che mi chiedi si può fare! Aggiungo la tua richiesta alla lista dei widget da realizzare.
RispondiElimina