June 22
Anche se HTML definisce la struttura di un documento HTML, JavaScript rende le pagine web interattive. eventi utente, quali click possono innescare qualsiasi funzione, compresi quelli che animano le parti della pagina. Un modo semplice per usare JavaScript per mostrare o nascondere il menu del tuo sito web con animazioni chiazza di petrolio è quello di includere la libreria jQuery. JQuery è una libreria di funzioni JavaScript che permette di combinare Cascading Style Sheet, o CSS, selettori con eventi e animazioni. Con jQuery e un breve script, è possibile aggiungere una scheda per visualizzare o nascondere il menu.
1 Aggiungere questo codice al di sopra della </ head> tag di chiusura nel file HTML:
<Script type = "text / javascript" per l'indirizzo del file di libreria jQuery.
2 Scrivi una coppia di apertura e chiusura tag script sotto le jQuery tag script biblioteca. Impostare il tipo di "text / javascript". Potrai scrivere chiamate di funzione per la libreria jQuery tra questa coppia di tag.
<Script type = "text / javascript">
// Codice JavaScript va qui
</ Script>
3 Trovare il codice per il menu nel file HTML. Aggiungere un paio di tag div sotto il codice menu e scrivere un tag di ancoraggio con il testo dice l'utente a fare clic sulla scheda per nascondere o visualizzare il menu. Avvolgere l'intero menu, tra cui la nuova scheda, con un nuovo paio di tag div. Ecco un esempio:
<Div id = "menù-wrapper">
<Ul id = "menu">
... menu items...
</ Ul>
<Div id = "scheda"> <a href="#"> Mostra / Nascondi </a> </ div>
</ Div>
4 Torna al tuo paio di tag script vuoti. Scrivere il codice pronto documento per evitare di eseguire lo script prima del caricamento della pagina:
$ (Document) .ready (function () {
// Chiamate di funzione jQuery vanno in qui
});
5 Scrivere il codice jQuery per selezionare la scheda nascondere il menù con il suo nome ID. Utilizzare l'evento click per far succedere qualcosa quando l'utente fa clic sulla scheda.
$ ( '# Scheda'). Clic (function () {
});
6 Effettuare una chiamata alla funzione di commutazione jQuery. Utilizzare il nome ID del confezionamento div del menù come selettore per questa funzione, in questo modo:
$ ( '# MostrareNascondere'). Clic (function () {
$ ( '# Menù-wrap') alternare ().;
return false;
});
È necessario "return false" dopo l'interruttore per mantenere il browser da provare a caricare una pagina quando l'utente fa clic sulla pelle collegamento.