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 12725 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 ♥ ~ 30/03/2026 16:18:12
Ciao carissima Ahamiah non sono riuscita a lasciare un saluto nel tuo forum quindi ti ringrazio tantissimo e ti mando un forte abbraccio qui
ૡScritto in Datari con saluto more image
=ahamiah= ~ 29/03/2026 09:48:10
Buona domenica delle Palme, ho riscoperto il vostro forum e vi faccio i complimenti. Ho prelevato il codice di uno dei vostri saluti con data. Grazie a buon lavoro.
ૡScritto in Datari con saluto more image
Cris ~ 28/03/2026 18:34:53
Ciao, sono passata per un salutino. Buon fine settimana!
ૡScritto in Commenti telaio...
BiBi ~ 25/03/2026 06:50:49
Grazie mille
ૡScritto in Testo scorrevole left
Angel ~ 21/03/2026 16:59:16
Ho letto il tuo messaggio inizio pag. : "Codice marquee deprecato..." Io avevo sul mio sito frasi scorrevoli e ora sono ferme!! Non so più come fare... a inserire una frase scorrevole! Mi puoi aiutare? Grazie cmq Penelope. Grazie di tutte le tue meraviglie che crei. Buona domenica!
ૡScritto in Home
ParisNeoni ~ 21/03/2026 10:33:31
I've gone through presumably numerous articles on this same subject this month and none of them hit home the way yours did. There's a clarity here that's tough to fake.
ૡScritto in Home
ૡPenelope ♥ ~ 19/03/2026 21:16:39
Ciao cara Sari mi fa molto piacere volevo lasciare un saluto da te ma il blog è privato quindi lo faccio qui, un abbraccio forte forte buon blog!
ૡScritto in Calendari fiorellini
Sari ~ 19/03/2026 12:54:53
Sono Sari di vocedivento e sto allestendo il mio blog pasquale. A questo scopo ho prelevato il calendarietto a fiorellini azzurri.Grazie, come sempre. Ciao
ૡScritto in Calendari fiorellini
Cris ~ 16/03/2026 15:25:23
Ciao. Ho preso un tuo Almanacco, è perfetto per il mio blog. Grazie!
ૡScritto in Almanacco soft
Sabry ~ 10/03/2026 11:39:07
Io ti adoro ... vorrei tanto essere brava come te, ti seguo da anni e rimango sempre affascinata dalla tua astuzia e bravura e creativitá ♥ Prendo spunti ♥ Grazie di ♥
ૡScritto in Sfondo pagina