Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.003 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Script_pagina » Menu a discesa o tendina

..:: Menu a discesa o tendina ::..

Un menu un po' scarno a mio parere ma utile in caso di tanti link che occuperebbero
troppo spazio, inoltre è facile da configurare e non sporca il codice^^

Esempio base...
...un po' di style ^_^
A colori!

- Il codice è semplicissimo, si utilizza un form in cui si inseriscono
i parametri per l'apertura dei link, ecco il codice base:

<form name="box_1" action=" ">
<select name="menu" onchange="window.open(box_1.menu.options[menu.selectedIndex].value,'_blank')">
<option value="0">MENU</option>
<option value="https://url pagina">Nome Link</option>
<option value="https://url pagina">Nome Link</option>
<option value="https://url pagina">Nome Link</option>
<option value="https://url pagina">Nome Link</option>
</select>
</form>

Vediamo a cosa servono i vari parametri


- Abbiamo dato un nome al form [form name="box_1"] parametro che sarà richiamato
nel tag che permetterà l'apertura dei link, in pratica diciamo al dove cosa^^

Invece action=" " è un parametro essenziale nei form che in genere si utilizzano per inviare informazioni e serve ad impostare l'url della pagina che elabora i dati inviati, pensate ad
un form per inviare le e-mail, in questo caso si lascia vuoto.

- Nella seconda riga c'è il tag più importante che appunto permetterà l'apertura dei link,
select name="menu" è il tag che definisce una lista, per lo stesso motivo del form
inseriremo un nome;

onchange="window.open(box_1.menu.options[menu.selectedIndex].value,'_blank')
ed ecco il motivo dei nomi nel form e nel select, con questo tag indichiamo che se
nel form box_1 viene cliccato un link della lista (select) menu deve aprire una pagina, con
il parametro value,'_blank' la pagina sarà aperta in una nuova finestra, per farli aprire
nella stessa pagina scriveremo value,'_self'

<option value="***">***</option> e qui c'è poco da spiegare, i tag per le opzioni,
ovvero in questo caso i link disponibili

N.B.: Nel caso vogliate utilizzare nella stessa pagina più menu a discesa ricordatevi di cambiare
il nome del form e di riportarlo poi correttamente nel tag di richiamo; per capirci meglio...

Secondo menu: form name="box_2"
onChange="window.open(box_2.menu.options[menu.selectedIndex].value,'_blank')

Terzo menu: form name="box_3"
onChange="window.open(box_3.menu.options[menu.selectedIndex].value,'_blank')

- I form non hanno una misura per la larghezza e occupano tutto lo spazio che trovano per cui postatelo dentro un div o una table invisibili^^

Vediamo come inserire dei parametri per personalizzare lo style

- Possiamo inserire parametri per il font, tipo, misura e colore (Esempio secondo menu)

<select name="menu" style="font-family: Tahoma; font-size: 12px; color:#4c412c" onchange="window.open(url1.menu.options[menu.selectedIndex].value,'_blank')">

- Coloriamo anche lo sfondo dei nomi link (Esempio terzo menu)

<option style="background-color:#fef0fe" value="0">Titolo menu</option>
<option style="background-color:#fefdc7" value="https://url pagina">Nome link</option>
<option style="background-color:#f1fedc" value="https://url pagina">Nome link</option>

# Prelevate qui il codice base





Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^

📄 🌷 Molto apprezzato
82.67%
Voti totali: 15
Rating... 4




Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^









I vostri commenti in questa pagina...


ૡPenelope ♥ ~ 25/03/2015 16:43:18
Grazie Giorgio ^_^
Giorgio ~ 19/03/2015 10:33:42
bel sito
ૡPenelope ♥ ~ 19/03/2014 17:03:51
Bene Luciano mi fa molto piacere Un abbraccio ^_^
Luciano ~ 12/03/2014 23:36:47
Finalmente uno che funziona!!!! Puoi vedere il risultato del lavoro sul sito che ho citato sopra, nella versione per dispositivi mobili


~ Pagina visitata da 12988 utenti





Segui il telaio su Facebook

* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥


Basi e utilità pagine web



html tag scrittura pagine web





Script per pagina



Script per gadget




Preleva anche tu una tag Help donna

Aiutami a diffondere il più possibile informazioni
utili alle donne vittime di abusi... Grazie!



Link del telaio...

ೡ Il telaio di Penelope
☆ Template webset e blog
☆ Un sito su AlterVista
☆ Gif & co...





I vostri messaggi...

ૡPenelope ♥ ~ 22/09/2026 20:36:49
Grazie a te carissima Marina
ૡScritto in Calendario magico box small
marina ~ 20/09/2026 20:04:19
Grazie infinite per il bellissimo calendario.
ૡScritto in Calendario magico box small
ૡPenelope ♥ ~ 14/09/2026 22:32:30
Cara Filo d'arianna un po' di anni fa ho realizzato qualche grafica per ForumFree ed era un delirio non so se è ancora così ma la grafica si componeva con decine di piccole immagini, davvero tanto lavoro nemmeno gratificante purtroppo, per quanto riguarda i tutorial, sono una maniaca di html, php e js ma sulla gestione di un forum non saprei da dove partire Un abbraccio forte
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 14/09/2026 18:34:20
Carissima Filo d'arianna grazie alla tua segnalazione ho risolto un problema nel commentario purtroppo per evitare spam e messaggi sgradevoli avevo impostato un eccesso nei controlli, ripristinato, ora si può commentare e mettere url del proprio spazio senza problemi grazie infinite cara un abbraccio forte forte
ૡScritto in Home
filod'arianna ~ 14/09/2026 07:41:37
Ciao Penelope! Ho preso il Settimanello micioso:-DL'ho inserito all'interno della sezione "Appunti" sul mio forum, però ho visto che non si può più linkare qui nei messaggi, non riesco a farti vedere dove l'ho inserito. Ad ogni modo il forum è Librandosi tra le pagine, su forumfree. Un abbraccio a presto!
ૡScritto in Home
filod'arianna ~ 12/09/2026 06:52:57
Hai mai pensato di buttarti nel creare grafica e tutorial per ForumFree? 😂 Sto scherzando, ma solo a metà! Sarebbe fantastico. Ne approfitterei immediatamente
ૡScritto in Blogger Kit Autunno
ૡPenelope ♥ ~ 11/09/2026 16:56:26
Carissima Filod'arianna ti ringrazio tantissimo è il più bel complimento che si possa riceve! Un abbraccio forte e viva l'autunno!!!
ૡScritto in Blogger Kit Autunno
filod'arianna ~ 10/09/2026 07:03:48
Adoro il colore di Ortensie vorrei un blog su Blogger solo per i tuoi kit e i tuoi accessori:-D Grazie mille per tutto ciò che metti a disposizione carissima 😘N.B. Anch'io non vedevo l'ora che arrivasse un po' di fresco -.-'
ૡScritto in Blogger Kit Autunno
Cris ~ 02/07/2026 19:45:24
Ciao, sono passata per un salutino e per rivedere il tuo sito. Buona serata e buon fine settimana.
ૡScritto in *Amici del telaio...*
DanyGraphic ~ 30/05/2026 15:30:54
Ciao Penny , sempre belle e interessanti le tue pagine .Un abbraccio e buon fine settimana
ૡScritto in Home