Pagina aggiornata... Domenica, 21 gennaio 2024 * Tempo di caricamento 0.25 secondi
Link navigazione : Home telaioHome ~ 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 ^_^




82.67%
Voti totali: 15
Rating... 5





Commentario...

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

Nickname
Home page
B i U   ^_^ o_O O_O *_* Gif...

  

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 ~ HomePage
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 12895 utenti


 H: 
Buon Autunno !





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



..:: html ::..





..:: Script page ::..



..:: Script gadget ::..




Accessori e gadget del telaio...


Spazio web...

Realizzare e gestire un sito web
nell'hosting free più famoso...

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

Angel
17/10/2024 16:24:12
Mi perdo a guardare il tuo Telaio.. è bello, con tante cosine che mi mandano in estasi.. e me le porto via.. Sei brava! Ciao, auguroni di ogni bene.
ೡ Scritto in... Settimanelli... Una gif per ogni giorno della settimana
 
Sognografica
08/10/2024 00:07:16
Ciao cara Penelope è stato un piacere trovare i tuoi saluti nella mia chattina contraccambio con tutto il cuore e ti mando un forte abbraccio ^_^♥
ೡ Scritto in... Home
 
Sari
28/09/2024 11:38:22
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.
ೡ Scritto in... Countdown stagioni e feste
 
Gabriella
19/09/2024 11:36:38
Penny sono bellissimi ! Complimenti
ೡ Scritto in... Countdown stagioni e feste
 
Elise
08/09/2024 18:17:18
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
ೡ Scritto in... Countdown stagioni e feste
 
Elise
05/09/2024 17:06:43
Ciao Penelope, ho prelevato due adottini "amo l'Inverno", come sempre sei bravissima!!!!!Grazie un abbraccione e buona serataElise
ೡ Scritto in... I love Winter...
 
DanyGraphic
31/08/2024 05:19:19
Sono passata per un saluto ....è sempre un piacere navigare nel tuo sito. Buon fine settimana
ೡ Scritto in... Home
 
Elise
02/08/2024 09:42:01
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
ೡ Scritto in... Home
 
Elise
20/07/2024 16:43:26
Ciao Penelope, ho preso un tuo bellissimo bottone top Home, spero non ti dispiaccia.Ti ringrazio.Un abbraccioneElise
ೡ Scritto in... Bottoni top page tag e pixel
 
Elise
19/07/2024 12:02:47
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
ೡ Scritto in... Stagione attuale vintage...