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.33
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 ♥
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
Ciao Penelope carissima, sono passata per un salutino ♥ Qui sempre bellissimo :) Sto lavorando al sitino in HTML nuovo ma fa caldissimo e mi sciolgo davanti al pc. Spero di metterlo online presto, tra i lavori handmade e la scrittura è arduo ma ci tengo a ritornare più attiva online♥ Smackete e buonissima estate a te ed ai ragazzi, dolce amica storica :D
Ciao Penelope, sono venuta a sbirciare il tuo sito dopo aver visto un tuo commento sul blog di Arwen. Penso proprio che userò qualcuna delle tue fatine per uno dei miei siti prossimamente... Ti terrò informata! Torno a trovarti... Buon weekend!