Pagina aggiornata... Domenica, 21 gennaio 2024 * Tempo di caricamento 0.15 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 12746 utenti


 H: 
Felice Estate e ...buona domenica!





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

Miryam
07/06/2024 15:32:30
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!
ೡ Scritto in... Home
 
Sabry
27/05/2024 09:09:32
Grazie per tutto, ti seguo da anni ormai e ammiro molto il tuo lavoro ... ho preso con piacere dei tuoi gadget ♥
ೡ ...commentario
 
Lu
23/05/2024 20:47:56
Grazie mille per il suggerimento, cara Penelope! Ci proverò finché non ci riuscirò. Quando sarà pronto te lo mostrerò.
ೡ Scritto in... Home
 
ೡPenelope ♥
23/05/2024 19:53:31
Ciao Lu puoi utilizzare una table o un div a cui inserire la tua immagine come sfondo, qui c'è il tutorial per le table [Link] si procede nello stesso modo nei div con background-image, e poi inserisci il codice del calendario, nella cella della table o all'interno del div
ೡ Scritto in... Calendario perpetuo
 
Lu
23/05/2024 18:59:24
Buon pomeriggio Penelope. Per favore, come faccio a inserire questo calendario in un tag, in modo che abbia un'immagine di sfondo?
ೡ Scritto in... Calendario perpetuo
 
Lu
22/05/2024 18:07:10
Ciao cara Penelope!Ho appena portato uno dei tuoi banner sul mio blog. Un abbraccio, buon pomeriggio!
ೡ Scritto in... Banner link del telaio ^_^
 
Rakel
21/05/2024 18:24:29
Ciao Penelope ho curiosato sul tuo blog ed ho trovato molte cose carine.Ho prelevato un Almanacco.Grazie
ೡ Scritto in... Almanacco trasparente
 
Cleo
21/05/2024 15:22:46
Buon compleanno tesoro [Link]
ೡ Scritto in... Home
 
Lu
20/05/2024 22:37:37
Che bello, ho trovato un pulsante che corrisponde al mio blog, l'ho già installato e sembra perfetto! Grazie mille per gli ottimi tutorial, amica Penelope!!
ೡ Scritto in... Bottoni top pagina
 
Lu
18/05/2024 17:03:22
Ciao cara Penelope! Che carini e delicati questi cursori, adoro quando porti cose che possono essere usate anche su Blogger ♥
ೡ Scritto in... Mini cursori
 





Gestisci le opzioni di privacy