Anche se il linguaggio HTML definisce la struttura di un documento HTML, JavaScript rende pagine Web interattive. Eventi dell'utente ad esempio clic possono attivare qualsiasi funzione, compresi quelli che animano le parti della pagina. Un modo semplice per utilizzare JavaScript per mostrare o nascondere il menu del tuo sito Web con animazioni chiazza di petrolio è di includere la libreria jQuery. JQuery è una libreria di funzioni JavaScript che consente di combinare selettori Cascading Style Sheet, o CSS, con eventi e animazioni. Con jQuery e un breve script, è possibile aggiungere una scheda per visualizzare o nascondere il menu.

Istruzioni

1

Aggiungere questo codice sopra il tag di chiusura < / head > nel file HTML:

< script type = "text/javascript" per l'indirizzo del file di libreria di jQuery.

2

Scrivere un paio di apertura e chiusura tag script sotto il tag di script di libreria jQuery. Impostare il tipo di "text/javascript". Si scriverà funzione chiamate alla libreria jQuery tra questa coppia di tag.

< script type = "text/javascript" >

Qui va il codice JavaScript

< / script >

3

Trovare il codice per il menu nel file HTML. Aggiungere una coppia di tag div sotto il codice del menu e scrivere un tag di ancoraggio con testo che informa l'utente a fare clic sulla scheda per visualizzare o nascondere il menu. Avvolgere l'intero menu, tra cui la nuova scheda, con una nuova coppia di tag div. Ecco un esempio:

< div id = "menu-wrapper" >

< ul id = "menu" >

... menu items...

</UL >

< div id = "tab" >< href = "#" > Mostra/Nascondi < /a >< / div >

< / div >

4

Torna alla tua coppia di tag di script vuoto. Scrivere il codice pronto documento per evitare l'esecuzione dello script prima del caricamento della pagina:

Web {

chiamate di funzione jQuery andare qui

});

5

Scrivere il codice jQuery per selezionare Nascondi scheda il menu dal suo nome ID. Utilizzare l'evento click per fare qualcosa accadere quando l'utente fa clic sulla scheda.

$('#tab').click(function() () {

});

6

Effettuare una chiamata alla funzione jQuery toggle. Uso il nome ID del menu di wrapping div come il selettore per questa funzione, in questo modo:

$('#showhide').click(function() () {

$('#menu-wrap').toggle();

restituire false;

});

Avete bisogno di "return false" dopo il cavicchio per mantenere il browser tenta di caricare una pagina quando l'utente fa clic sul collegamento Nascondi.

Consigli & Avvertenze

• Modificare "toggle()" "slideToggle()" per ottenere un'animazione scorrevole per il vostro menu.
• Impostare la velocità di animazione per "toggle()" in millisecondi tra le parentesi in questo modo: $('#menu').toggle(500);