Share
Come sai, in questi giorni ci sono una miriade di librerie javascript in competizione. Anche se preferisco jQuery, mi è sempre piaciuto il modo in cui il menu di MooTools ha funzionato. Quindi in questo tutorial ricreeremo lo stesso effetto ... ma lo faremo in jQuery!
Iniziamo scrivendo l'HTML necessario per creare una semplice navigazione verticale. Per la struttura, come avrai intuito, useremo una lista non ordinata con il nome dell'ID "Scorrevole navigazioneInoltre, aggiungeremo dei collegamenti e forniremo ciascun elemento della lista il nome della classe "Sliding-elemento".
Aggiungerò anche un elemento titolo. Questa è una cosa utile per fare come molti blog WordPress, per esempio, hanno elementi titolo nella loro navigazione barra laterale (ad esempio "Archivi"). Quindi sarebbe simile a questo:
Ora, creiamo un documento HTML dove possiamo mettere il lavoro che abbiamo appena fatto. Crea un nuovo file HTML e chiamalo demo.html. Quindi apri questo file con il tuo editor di testo preferito e inserisci il seguente codice:
Effetto di navigazione usando jQuery
Titolo di navigazione
- Link 1
- Link 2
- Link 3
- Link 4
- Link 5
Ci sono alcune cose da notare qui:
Ora che abbiamo il nostro file HTML etichettato e funzionante, aggiungiamo alcuni stili. Ricorda che il nostro documento HTML punta a un file CSS chiamato styles.css. Quindi, iniziamo creando un file chiamato styles.css e salvandolo nella stessa directory in cui risiede il nostro documento HTML. Come abbiamo fatto nel passaggio precedente, apri questo file con il tuo editor di testo preferito e inserisci il seguente codice:
body margin: 0; padding: 0; sfondo: # 1d1d1d; famiglia di font: "Lucida Grande", Verdana, sans-serif; dimensione carattere: 100%; ul # sliding-navigation list-style: none; font-size: .75em; margine: 30px 0; ul # sliding-navigation li.sliding-element h3, ul # sliding-navigation li.sliding-element a display: block; larghezza: 150 px; imbottitura: 5px 15px; margine: 0; margin-bottom: 5px; ul # sliding-navigation li.sliding-element h3 color: #fff; sfondo: # 333; border: 1px solid # 1a1a1a; font-weight: normal; ul # sliding-navigation li.sliding-element a color: # 999; sfondo: # 222; border: 1px solid # 1a1a1a; decorazione del testo: nessuna; ul # sliding-navigation li.sliding-element a: hover color: # ffff66;
A questo punto la tua pagina demo.html dovrebbe essere simile a questa:
Quindi, è finalmente ora di iniziare a usare jQuery. Ma prima di poter iniziare, dobbiamo fare alcune cose:
Questo è il tuo file HTML
dovrebbe assomigliare ora:Effetto di navigazione usando jQuery
Ora creeremo la funzione che farà tutto il sollevamento "pesante" affinché l'effetto scorrevole funzioni. Questa funzione richiede cinque parametri (navigation_id, pad_out, pad_in, time e moltiplicatore) e li usa come segue:
Quindi, apri il tuo file sliding_effect.js e inserisci il seguente codice:
funzione slide (navigation_id, pad_out, pad_in, time, moltiplicatore) // crea i percorsi target var list_elements = navigation_id + "li.sliding-element"; var link_elements = list_elements + "a"; // avvia il timer utilizzato per l'animazione scorrevole var timer = 0; // crea l'animazione della diapositiva per tutti gli elementi della lista $ (list_elements) .each (function (i) // margin left = - ([width of element] + [totale padding verticale dell'elemento]) $ (this) .css ( "margin-left", "- 180px"); // aggiorna il timer timer = (timer * moltiplicatore + tempo); $ (questo) .animate (marginLeft: "0", timer); $ (this) .animate (marginLeft: "15px", timer); $ (this) .animate (marginLeft: "0", timer);); // crea l'effetto hover-slide per tutti gli elementi di collegamento $ (link_elements) .each (function (i) $ (this) .hover (function () $ (this) .animate (paddingLeft: pad_out, 150) ;, function () $ (this) .animate (paddingLeft: pad_in, 150);););
Tutto quello che dobbiamo fare per attivare lo script è chiamare la funzione quando la pagina è stata caricata. Ci sono due posti in cui inserire il seguente snippet di codice. Può essere scritto all'interno del file sliding_effect.js (ho scelto questa opzione per questo tutorial) o chiamato all'interno dell'HTML usando un
Di Bedrich Rios
Notare che ho aggiunto l'immagine all'interno dell'elemento "navigation-block" e gli ho dato un ID chiamato "hide". Inoltre ho aggiunto un elemento di titolo e sottotitolo. Ora aggiungiamo un po 'di CSS in più al nostro file styles.css come segue:
h2 color: # 999; margin-bottom: 0; margin-left: 13px; background: url (navigazione.jpg) no-repeat; altezza: 40px; h2 span display: none; p color: # ffff66; margin-top: .5em; font-size: .75em; padding-left: 15px; # navigation-block position: relative; top: 200px; a sinistra: 200px; #hide position: absolute; top: 30px; a sinistra: -190px;
Quindi prima nel
Si noti inoltre che l'elemento "blocco di navigazione" ora ha una posizione relativa, in modo che possiamo spostare l'immagine "nascondi" a sinistra. Questo farà apparire le schede da sotto di esso.
Infine, per dare un po 'di rifinitura alle nostre schede, ho aggiunto un'immagine di sfondo sottile simile a un'ombreggiatura come questa:
ul # sliding-navigation li.sliding-element h3 color: #fff; background: # 333 url (heading_bg.jpg) repeat-y; font-weight: normal;
E abbiamo finito!
Visualizza l'effetto finale
Scarica l'HTML / Immagini / JS
Accentsconagua