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 12713 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...

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
Gabriella ~ 09/03/2026 18:37:40
Ciao Penny, come sempre i tuoi lavori sono molto eleganti ,ne ho prelevato due per adesso ;) grazie
ૡScritto in Decori pagine Primavera
soleyada ~ 07/03/2026 22:02:27
Mi hai fatto tornare indietro nel tempo cara Penny, non smettere mai di splendere, è tutto stupendo qui, ti auguro il meglio, bacioni :-*
ૡScritto in Countdown Primavera
Cris ~ 24/02/2026 08:17:18
Ciao, e bentornata. Mi è sempre piaciuto il tuo bel sito. Ho creato da poco un blog, il tuo sito è il primo tra i miei preferiti.
ૡScritto in Home
MOra Ribelle ~ 16/02/2026 12:05:35
Buongiorno, contenta del tuo ritorno. Mi domando come metto anche io questo box saluti? grazie
ૡScritto in Gif & co...
Sari ~ 14/01/2026 17:31:32
Buon Anno Penelope. Ho prelevato un top pagina sostituendo quello natalizio. Tutto bello e utile qui, grazie.
ૡScritto in Marquee con Javascript
Frann ~ 25/12/2025 15:09:37
Cara amica Penelope, ti auguro un Natale, con pace, amore e tanta gioia. Bacione ~ Frann
ૡScritto in Home
filod'arianna ~ 24/12/2025 08:50:20
Auguri di buon Natale Penelope, e a tutti i visitatori del Telaio 🎄✨😃
ૡScritto in Home
Sari ~ 18/12/2025 22:01:59
Ciao Penelope, ti seguo da anni e tanto ho imparato dalle tue lezioni: grazie. Ti auguro un Natale sereno e, nonostante i tempi che stiamo vivendo, in allegria. Buon Natale
ૡScritto in Home