Come costruire un menu di navigazione in stile lava-lampada

Un paio di settimane fa, ho creato uno screencast che dimostrava come creare un menu di navigazione a tre livelli. In una email di risposta, uno dei nostri lettori ha richiesto un tutorial su come costruire un menu in stile lava-lamp. Fortunatamente, è un compito abbastanza semplice, soprattutto quando si utilizza una libreria JavaScript. Oggi ne costruiremo uno da zero.

Preferisci uno Screencast?

Passaggio 1 Creare il mark-up

Prima di poter creare questa semplice funzionalità, abbiamo bisogno di una base da cui partire. Nel tuo editor di codice preferito, crea un elenco non ordinato per la tua navigazione e importa sia l'interfaccia utente jQuery che jQuery, tramite Google.

     SpasticNav Plugin      Casa
 Di
 blog
 Maggiori informazioni sul mio portafoglio
 Contatto

Nota come abbiamo dato un ID di "selezionato" alla home page. Questo è abbastanza standard nella maggior parte dei siti web; consente di utilizzare come target la pagina corrente e di definire di conseguenza quella particolare voce di elenco.

Successivamente, dobbiamo decidere come implementare al meglio la funzionalità della lava-lamp. Per consentire la riusabilità, metteremo questo piccolo script in un plug-in e lo chiameremo come:

 $ ( '# Nav') spasticNav ().;

Dal momento che abbiamo deciso di creare un plug-in, andiamo avanti e creiamo un nuovo file per quello script, facendo riferimento al nostro mark-up. Lo chiameremo jquery.spasticNav.js.

Passaggio 2 Avvio del plug-in

Per ridurre il numero di variabili globali che dobbiamo creare, oltre a rimuovere qualsiasi possibilità del simbolo $ che si scontrerà con altre librerie JavaScript, racchiudiamo il nostro plugin in una funzione anonima autoeseguibile.

 (function ($) ) (jQuery);

Ora, jQuery verrà passato nel nostro plug-in e sarà rappresentato tramite il simbolo $.

Successivamente, è generalmente una buona pratica fornire agli utenti del plug-in la massima flessibilità possibile. Pertanto, daremo loro la possibilità di passare un oggetto letterale quando chiamano il plugin per sovrascrivere una manciata di impostazioni. A mio avviso, dovrebbero essere in grado di:

Imposta la quantità di sovrapposizione per il nostro piccolo blob. Questo si riferisce a quanto il blob supererà l'altezza del menu di navigazione.
Imposta la velocità
Imposta un reset, che fa ritornare il blob all'elemento della pagina corrente (supponendo che l'utente non faccia mai clic su un collegamento)
Imposta il colore del blob. Questo può essere realizzato con i CSS, ma è comunque una buona comodità.
Imposta l'opzione di andamento.

Ora, daremo il nome al nostro plug-in e lo renderemo uguale a una funzione. $ .fn è semplicemente un alias per jquery.prototype.

 $ .fn.spasticNav = function (options) ;

Sapendo che consentiremo queste sostituzioni, dobbiamo assicurarci di accettare un parametro "opzioni".

Passaggio 3 Opzioni di configurazione

Ora che abbiamo chiamato il nostro plugin, il passo successivo è creare le opzioni di configurazione.

 options = $ .extend (overlap: 20, speed: 500, reset: 1500, color: '# 0b2b61', easing: 'easeOutExpo', opzioni);

In alto, prendiamo la variabile options, impostando alcune proprietà e valori predefiniti e quindi estendendola con qualunque (se non altro) l'utente passa quando chiama il plugin. In questo modo, le opzioni che supereranno sostituiranno le nostre impostazioni predefinite. Ad esempio, se, quando chiamo questo plugin, passo:

 $ ('# nav'). spasticNav (speed: 2000, easing: 'easeOutElastic');

Queste due proprietà sovrascriveranno le impostazioni predefinite, mentre il resto delle opzioni rimarrà lo stesso.

Passaggio 4 Implementazione della funzionalità

Ora siamo pronti per scorrere ogni elemento passato a questo plugin e implementare la funzionalità di lava-lamp. Ricorda, non possiamo presumere che l'utente passerà un singolo elemento a questo plugin. Potrebbero, se lo desiderano, fare riferimento a una classe, che si riferisce a più elementi che dovrebbero ricevere questa funzionalità. Come tale, chiameremo this.each per scorrere su ogni elemento nel set avvolto.

 ritorna this.each (function () );

All'interno di questa funzione, creeremo alcune variabili. Non tutti avranno immediatamente dei valori, ma dal momento che il motore JavaScript solleverà tutti i nomi delle variabili nella parte superiore della funzione comunque (dietro le quinte), è generalmente una buona pratica dichiararli all'inizio e poi inizializzarli in un secondo momento.

 var nav = $ (this), currentPageItem = $ ('# selected', nav), blob, reset;

nav: "Cache" Questo, avvolto nell'oggetto jQuery.
currentPageItem: Contiene l'elemento dell'elenco con un ID selezionato. Passiamo un secondo parametro per impostare il contesto da cui effettuare la ricerca. In questo modo, non dobbiamo attraversare l'intera dom per trovare questo elemento.
blob: Per mancanza di una parola migliore, questa variabile farà riferimento all'evidenziatore, che seguirà il nostro mouse quando passeremo il mouse sopra il menu.
ripristina: Questo memorizzerà un riferimento alla funzione setTimeout che verrà creata in seguito. È necessario per chiamare clearTimeout. Maggiori informazioni su questo presto ...

Ora che abbiamo dichiarato / inizializzato le nostre variabili, creiamo il blob effettivo, per così dire.

 $ ('') .css (width: currentPageItem.outerWidth (), height: currentPageItem.outerHeight () + options.overlap, left: currentPageItem.position (). left, top: currentPageItem.position (). top - options.overlap / 2, backgroundColor: options.color). AppendTo (this);

Il motivo per cui chiamiamo il metodo CSS, piuttosto che semplicemente aggiungere una classe, è perché questi valori variano a seconda della voce di elenco della pagina corrente. Come tale, dobbiamo usare JavaScript per recuperare i loro valori.

larghezza: Ottieni la larghezza di currentPageItem, inclusi i bordi e il riempimento.
altezza: Ottieni l'altezza di currentPageItem, inclusi i bordi e il riempimento. Inoltre, aggiungi la quantità di sovrapposizione, per estendere il blob all'esterno del menu.
sinistra: Imposta la proprietà sinistra del blob uguale alla posizione sinistra di currentPageItem. (Dobbiamo impostare un contesto di posizionamento nel nostro CSS affinché questo valore abbia effetto).
superiore: Imposta anche il valore superiore e centra verticalmente il blob.
colore di sfondo: Imposta il colore di sfondo.

Infine, aggiungiamo questo nuovo elemento alla lista Questo, o #nav.

Successivamente, dobbiamo memorizzare un riferimento a #blob. In questo modo, non dobbiamo cercare il DOM ogni volta che vogliamo accedervi. Abbiamo dichiarato il macchia variabile nella parte superiore della funzione. Ora inizializzalo.

 blob = $ ('# blob', nav);

Passaggio 5 L'evento Hover

Ora dobbiamo "ascoltare" quando l'utente si posiziona su una delle voci dell'elenco (escludendo ovviamente il blob) nel nostro menu di navigazione. Quando lo fanno, imposteremo la larghezza e le proprietà di sinistra del blob uguale a quella dell'elemento di elenco attualmente al passaggio del mouse.

 $ ('li: not (#blob)', nav) .hover (function () // mouse over clearTimeout (reset); blob.animate (left: $ (this) .position (). left, width: $ (this) .width (), duration: options.speed, easing: options.easing, queue: false);, function () // mouse out reset = setTimeout (function () blob.animate (width: currentPageItem.outerWidth (), left: currentPageItem.position (). left, options.speed), options.reset););

Per riassumere lo script sopra ...

Ottieni tutti gli elementi della lista, non la #blob, nel menu di navigazione, e quando sono al passaggio del mouse, esegui una funzione.
Animare il blob e impostare i suoi valori di sinistra e larghezza uguali a quelli della voce dell'elenco sospesa.
Passa un oggetto letterale come secondo parametro dell'animazione, e imposta la durata e l'andamento uguale a ciò che impostiamo nelle nostre opzioni di configurazione. Imposta la coda su false per impedire l'accumulo dell'animazione.
Quando toccheranno, chiamate setTimeOut, che riporterà il blob all'elemento della pagina corrente. Se non lo facessimo e l'utente non ha fatto clic su un link di navigazione, il menu mostrerebbe che erano attivi
una pagina completamente diversa. Questo, dopo circa un secondo, animerà nuovamente il blob a currentPageItem.

E questo è tutto ciò che c'è da fare! Questo è un plugin super semplice. Il prossimo passo è quello di personalizzare il nostro menu di navigazione.

Passaggio 6 Disegnare il menu

Senza alcuno stile, il nostro menu dovrebbe assomigliare a questo:

Iniziamo con lo stile "nav" ul. Apri il tuo file style.css e aggiungi:

 #nav position: relativo; sfondo: # 292929; fluttuare: a sinistra;

Quindi, modificheremo ogni voce dell'elenco.

 #nav li float: left; stile elenco: nessuno; border-right: 1px solid # 4a4a4a; border-left: 1px solido nero;

Questo semplicemente fa fluttuare ciascun elemento della lista a sinistra e aggiunge un bordo a ciascun lato.

Andando avanti, dovremo definire i tag di ancoraggio nel nostro menu di navigazione.

 #nav li a color: # e3e3e3; posizione: relativa; z-index: 2; fluttuare: a sinistra; font-size: 30px; font-family: helvetica, arial, sans-serif; decorazione del testo: nessuna; imbottitura: 30px 45px;

Stiamo impostando un colore, spostandoli a sinistra, impostando alcuni valori di font e una buona quantità di padding. Prendi nota della proprietà z-index. Questa è una necessità e verrà spiegata a breve. Tuttavia, ricorda che, per regolare lo z-index, dobbiamo impostare un contesto di posizionamento, cosa che abbiamo fatto.

Poiché non implementiamo un foglio di stile di reimpostazione completo, assicuriamoci di azzerare i margini e il riempimento predefiniti sui nostri ul e li, solo per evitare potenziali mal di testa.

 ul, li margine: 0; padding: 0;

L'ultimo passaggio consiste nello stile del blob stesso!

 #blob border-right: 1px solid # 0059ec; border-left: 1px solid # 0059ec; posizione: assoluta; inizio: 0; z-index: 1; sfondo: # 0b2b61; background: -moz-linear-gradient (in alto, # 0b2b61, # 1153c0); background: -webkit-gradient (lineare, in alto a sinistra, in basso a sinistra, da (# 0b2b61), a (# 1153c0)); -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 2px 3px 10px # 011331; -webkit-box-shadow: 2px 3px 10px # 011331;

Ancora una volta, abbiamo impostato dei bei colori per i nostri bordi e aggiunto alcuni colori di sfondo (compresi gradienti / bordi / ombre CSS3 per Firefox e Safari / Chrome). Ancora una volta, vediamo la proprietà z-index. Senza questo, il blob mostrerà sopra tutto il testo nel menu di navigazione. Per contrastare questo, dobbiamo essere sicuri che la sua proprietà z-index è INFERIORE rispetto a quella dell'elenco! Dobbiamo inoltre impostare la posizione su assoluto per regolare i suoi valori superiore e sinistro con il nostro plug-in.

Conclusione

Questo è tutto ciò che c'è da fare! Con il minimo sforzo, abbiamo creato un menu di navigazione dall'aspetto davvero pulito da zero. Fatemi sapere se avete domande! Grazie per aver letto e guardato.

Codice