Quando si costruisce una semplice pagina Web, può spesso avere senso inserire il contenuto in un singolo layout anziché in più pagine. Questi siti Web a pagina singola sono utili quando si dispone di un piccolo progetto o portfolio che richiede una presenza online. Se dividi il contenuto in sezioni pulite, i visitatori potrebbero utilizzare una piccola navigazione scorrevole per avanzare velocemente lungo la pagina.
In questo tutorial voglio dimostrare come è possibile creare una navigazione scorrevole personalizzata con jQuery. Esistono molti plugin alternativi che forniscono queste funzionalità e fanno risparmiare tempo. Ma voglio mostrare come possiamo ottenere questo effetto usando solo jQuery e il plugin scrollTo per prestazioni ottimizzate. Guarda la mia demo di esempio dal vivo per dare un'occhiata a ciò che faremo.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Per prima cosa ho scaricato una copia locale di jQuery da conservare con gli altri file di script. Inoltre abbiamo bisogno di una copia del plugin jQuery.scrollTo che è un singolo file .js. Ho creato due file alternativi index.html e styles.css per la struttura della pagina. Possiamo prima analizzare i contenuti principali.
I contenuti delle intestazioni dovrebbero essere semplici e non eccessivamente complicati. Il file indice utilizza un doctype HTML5 insieme al foglio di stile e ai due file JS che abbiamo scaricato. Ovviamente ci sono alternative per personalizzare l'effetto scroll, ma in questa situazione è molto più semplice implementare un plugin. All'interno della pagina HTML possiamo vedere come è impostata la navigazione.
Tutta la pagina è contenuta all'interno di un wrapper utilizzando l'ID #w. Un altro div #soddisfare segna il contenuto interiore nella pagina. Questa navigazione fissa è mantenuta all'interno del contenuto della pagina per la mia demo, ma potresti teoricamente spostarla in qualsiasi altro posto che si adatti bene. Dal momento che verrà risolto, puoi sempre far scorrere il menu insieme all'utente, indipendentemente dal posizionamento.
Il container #stickynav è usato per mantenere tutti gli elementi interni in cima al contenuto della pagina. Sto usando la proprietà z-index CSS insieme ai float interni su tutti gli elementi dell'elenco. Si noti che i valori HREF puntano tutti verso un segno cancelletto posizionato altrove nella pagina. Possiamo usare questo valore per determinare dove dovrebbe andare il nostro cursore.
Contenuto interno
Dopo aver chiuso il blocco di navigazione troviamo un piccolo numero di sezioni di contenuto. C'è molto spazio extra tra i contenuti, solo così puoi vedere come si comporterebbe in una tipica pagina web. Ogni contenitore di blocchi utilizza HTML5
elemento insieme a un nome di classe .sezione.
La classe viene utilizzata per gli stili duplicati trovati in ciascuna delle aree di contenuto. Risparmierà spazio nel foglio di stile durante la copia su più proprietà per ogni elemento. Puntando l'ID della sezione potremmo applicare sfondi unici, colori del testo, ombre di riquadri e altri effetti simili.
Questo metodo può includere tutte le sezioni di contenuto interno di cui hai bisogno. Sebbene il menu di navigazione possa eventualmente diventare troppo ampio. In questo caso potrebbe anche essere posizionato in alto come una barra di navigazione fissa. L'ho tenuto all'interno del content div in modo da poter vedere come funziona la soluzione costruita attorno a un modello di pagina. Passiamo agli stili CSS per maggiori dettagli.
CSS Page Design
Volevo davvero distinguere tra la barra in alto e questa navigazione fissa appiccicosa. Avremmo potuto aggiustare la barra di navigazione marrone molto alta che contiene anche un link, ma questo può consumare una piccola porzione del layout. Invece ho creato una nuova lista non ordinata e ho stilizzato ogni link per fluttuare uno accanto all'altro - mantenendo il menu più stretto e più compatto.
Guardando il contenitore #stickynav noterai che si estenderà per l'intera larghezza della pagina. Usando uno sfondo trasparente non è certamente evidente, ma tieni questo in mente poiché puoi espandere la navigazione ancora più ampia per riempire l'involucro della pagina esterna.
Un'altra parte interessante del mio foglio di stile ha i moduli di input e di pagina. Queste regole si trovano tutte nella parte inferiore del file insieme agli aggiornamenti tipografici. Nota come ogni intestazione è centrata sulla pagina per offrire spazio laterale per questi elementi di navigazione. Non sarebbe difficile riallineare queste intestazioni sul lato destro dando ancora più spazio ai collegamenti di navigazione.
Non ho il modulo di contatto che invia da nessuna parte ma volevo che avesse alcuni stili personalizzati decenti. Sicuramente niente di speciale ma resetta i font e i colori di default. Inoltre, se è necessario espandere l'area del contenuto centrale, è possibile trovare la larghezza: proprietà 750px allegata sull'involucro esterno. Niente fuori dall'ordinario, ma è bene comprendere questi stili di base.
Scorrimento uniforme con jQuery
Ora questo blocco finale di codice è piuttosto semplice anche se difficilmente si capisce lo scripting. Ho aggiunto un nuovo tag prima della mia chiusura che si rivolge ai collegamenti di ancoraggio nav fissi. Ogni volta che un utente fa clic, estrai il valore hash e scorri immediatamente nella sezione di quella pagina.
Il metodo jQuery .click () include un parametro per il gestore eventi. Con questo parametro si annulla il comportamento predefinito in modo che il browser non salti in basso nella pagina. Quindi jQuery scrollTo viene eseguito per il targeting del valore corrente del link this.hash.
L'effetto è semplice ma a portata di mano perché è possibile implementare il concetto di pagina molto rapidamente. Sono sicuro che ci sono altri plugin simili relativi a jQuery scrollTo, e se hai tempo può essere divertente giocare con alternative.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
I siti web più semplici non richiedono un sistema di menu contorto e l'utilizzo di tecniche come questa può aiutare nell'organizzazione dei contenuti. Spero che questo tutorial possa essere utile per gli sviluppatori che creano un semplice layout di pagina web. jQuery è molto estensibile ed è facile espandere questo codebase nel proprio plugin jQuery. Sentiti libero di scaricare una copia del mio codice sorgente e vedere se è possibile incorporare questo effetto con qualsiasi progetto futuro.