Sezione del telaio dedicata alla realizzazione e
personalizzazione di pagine web, tutorial e guide per utilità, accessori e gadget
con tanti script utili e originali...
Pagina aggiornata... Domenica, 21 gennaio 2024 *
Tempo di caricamento
0.25
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:
- 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)
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 ♥
Buongiorno Penelope,è sempre interessante passare dalle tue pagine e scoprire il frutto del tuo lavoro. L'autunno è già felicemente iniziato ma ne prenderò ugualmente uno... sono così carini.Grazie.
Ciao Penelope, sono ancora qui, mi piace il tuo Countdown di Halloween e l'ho inserito nel mio blog.Grazie , un abbraccione e buona domenica!!!Baci Elise
Ciao Penelope, sono contenta che ti ricordi di me, ti dirò anche io sto poco al PC è un caldo veramente esagerato!!! Continuerò a seguirti , troppo belle le tue creazioni.Grazie un abbraccione e buona estate anche a te
Ciao Penelope, non so se ti ricordi di me, io è un pò che non vado sul blog, volevo solo dirti che che ho preso la stagione estate, sei bravissima Grazie e alla prossimaElise