..:: uTiLiTà WeB ::..

= Tutorials =

:: pagina principale dei codici :: pagina di categoria :: home page ::

TUTTO SUI MENU' A TENDINA:

1) INSERIRE UN MENU A TENDINA SENZA PULSANTE DI CONFERMA
2) INSERIRE UN MENU A TENDINA CON PULSANTE DI CONFERMA

1) INSERIRE UN MENU A TENDINA SENZA PULSANTE DI CONFERMA

CHE COS'E' UN MENU A TENDINA SENZA PULSANTE DI CONFERMA?

E' un menu tramite il quale si può selezionare una pagina solo scorrendo
il menu stesso e selezionando un'opzione, senza il pulsante "ok".
Puoi vedere il demo
QUI.

CODICI DA COPIARE
 
CODICE 1

CODICE 2

SPIEGAZIONE
Il codice 1 va inserito nel TAG <HEAD>, il codice 2 nel TAG <BODY>,
dove si vuole che appaia il menu.
Mentre il codice 1 non necessita di modifiche, il codice 2 va
modificato così come spiegato qui di seguito.
MODIFICHE AL CODICE

ATTENZIONE: questa visualizzazione del codice serve per evidenziare le modifiche:
non copiarlo da qui ma da sopra.

<FORM ACTION="" METHOD=POST name=form1>

<SELECT NAME=menu1 onchange="MM_jumpMenu('parent',this,0)">

<OPTION>scegli una pagina

<OPTION VALUE="URL della pagina">descrizione

<OPTION VALUE="URL della pagina">descrizione

<OPTION VALUE="URL della pagina">descrizione

</SELECT></FONT>

</FORM>

Sostituisci la scritta in blu con la formula di scelta che preferisci.
Con questo tipo di menu ovviamente non è possibile preselezionare una
scelta, per cui è necessario inserire qui un testo che spiega l'azione da
compiere. Sostituisci alle scritte in rosso l'URL delle tue pagine e
alle scritte in verde la loro descrizione, che apparirà sul menu.
Possono essere aggiunte a piacimento altre strisce
<OPTION VALUE="
URL della pagina">descrizione
prima del TAG </SELECT> per aumentare le opzioni.

ALTRE MODIFICHE:

Volendo inserire in una stessa pagina web più menu senza pulsante di conferma, è necessario copiare il codice 2
nel TAG <BODY> tante volte quanti sono i menu che vogliamo inserire nella pagina (il codice 1 va invece inserito
nel TAG <HEAD> una sola volta). Poi effettuiamo le seguenti modifiche:

<FORM ACTION="" METHOD=POST name=form1>

<SELECT NAME=menu1 onchange="MM_jumpMenu('parent',this,0)">

<OPTION>scegli una pagina

<OPTION VALUE="URL della pagina">descrizione

<OPTION VALUE="URL della pagina">descrizione

<OPTION VALUE="URL della pagina">descrizione

</SELECT></FONT>

</FORM>

Modifichiamo le scritte in rosso (oltre a quelle in verde ovviamente, come spiegato in precedenza).
Ogni menu e ogni modulo che lo contiene devono avere nomi diversi:
chiameremo ad esempio "
form1" e "menu1" il primo menu, "form2" e "menu2"
il secondo, "
form 3" e "menu 3" il terzo, e così via.
Continuando in questo modo possiamo inserire vari menu
diversi in una stessa pagina. Vedi
QUI il demo.

:: TORNA SU ::

2) INSERIRE UN MENU A TENDINA CON PULSANTE DI CONFERMA  

CHE COS'E' UN MENU A TENDINA CON PULSANTE DI CONFERMA?

A differenza del precedente, per accedere ad una pagina con questo menu,
dopo aver selezionato la scelta tramite la tendina occorre premere il pulsante "ok".
Puoi vedere il demo
QUI.

CODICE DA COPIARE
 
CODICE 1

SPIEGAZIONE
Il codice va inserito nel TAG <BODY>, dove si vuole che appaia il menu,
e va modificato così come spiegato qui di seguito.
MODIFICHE AL CODICE

ATTENZIONE: questa visualizzazione del codice serve per evidenziare le modifiche:
non copiarlo da qui ma da sopra.

<FORM ACTION="" METHOD=POST name=form1>

<P><SELECT NAME=menu1>

<OPTION VALUE="URL della pagina" SELECTED>descrizione

<OPTION VALUE="URL della pagina">descrizione

<OPTION VALUE="URL della pagina">descrizione

</SELECT> <INPUT TYPE=button NAME=go VALUE="OK" onclick="window.location=document.form1.menu1.

options[document.form1.menu1.selectedIndex].value">

</FORM>

Sostituisci alle scritte in rosso l'URL delle tue pagine e alle scritte in verde
la loro descrizione, che apparirà sul menu.
La prima opzione è quella selezionata, che apparirà di default sul menu.
Per accedere alla relativa pagina basterà cliccare "OK",
mentre per accedere alle altre pagine occorrerà scorrere il menu e poi cliccare "OK".
Attenzione: la prima striscia (<OPTION VALUE="URL della pagina" SELECTED>descrizione)
non deve essere ripetuta, mentre possono essere aggiunte a piacimento altre strisce
<OPTION VALUE="URL della pagina">descrizione

prima del TAG </SELECT> per aumentare le opzioni.

La scritta in blu VALUE="OK" rappresenta il testo che apparirà nel tasto di invio.
La scritta OK può essere sostituita da qualunque altra scritta, p.es. "Vai!", "Invio" ecc.,
ma attenzione a non togliere le virgolette!

ALTRE MODIFICHE:

Volendo inserire in una stessa pagina web più menu con pulsante di conferma, è necessario copiare il codice
nel TAG <BODY> tante volte quanti sono i menu che vogliamo inserire nella pagina. Poi effettuiamo le seguenti modifiche:

<FORM ACTION="" METHOD=POST name=form1>

<P><SELECT NAME=menu1>

<OPTION VALUE="URL della pagina" SELECTED>descrizione

<OPTION VALUE="URL della pagina">descrizione

<OPTION VALUE="URL della pagina">descrizione

</SELECT> <INPUT TYPE=button NAME=go VALUE="OK" onclick="window.location=document.form1.menu1.

options[document.form1.menu1.selectedIndex].value">

</FORM>

Sostituiamo le scritte in verde così come spiegato precedentemente.
Per far funzionare due o più menu nella stessa pagina occorre modificare le scritte in rosso.
Ogni menu e ogni modulo che lo contiene devono avere nomi diversi:
chiameremo ad esempio "
form1" e "menu1" il primo menu, "form2" e "menu2" il secondo,
"
form 3" e "menu 3" il terzo, e così via.
Attenzione: come si vede i nomi del modulo e del menu sono ripetuti anche nella striscia
sotto le opzioni, per ben due volte, e devono essere modificati anche lì.
Continuando in questo modo possiamo inserire vari menu
diversi in una stessa pagina. Vedi
QUI il demo.

:: TORNA SU ::