Semplici passi per la creazione di una barra di navigazione fissa

Quando si progetta un sistema di navigazione per il proprio sito Web, è importante considerare le alterazioni dinamiche per la gestione del supporto mobile e dei progetti reattivi. Ma un altro approccio sistematico è quello di mantenere i tuoi visitatori in pieno controllo durante l'intero processo di visualizzazione. Ciò spesso richiede un menu di accesso rapido o un'area a discesa per l'estrazione di collegamenti ad altre pagine web.

In questo tutorial ho intenzione di costruire una barra di navigazione in alto che appare solo dopo aver superato la navigazione dell'intestazione. Questo effetto è ottimo se si dispone di alcune pagine che sono più comunemente accessibili dai visitatori. La barra di navigazione appiccicosa rimarrà fissa nella parte superiore dello schermo e scomparirà solo quando rientrerai nella zona di navigazione dell'intestazione. Per avere un'idea di cosa faremo, dai un'occhiata al mio esempio dimostrativo dal vivo dopo il salto!

Demo dal vivo - Scarica il codice sorgente

Strutturare il documento

Per prima cosa dovremmo creare l'area di lavoro del progetto e creare il codice HTML originale. Vale la pena notare che avremo bisogno di usare un jQuery molto semplice insieme agli effetti CSS.

Crea un nuovo set di documenti chiamato index.html e styles.css all'interno della stessa directory. Sto usando un'immagine di sfondo e un banner con logo personalizzati nella sezione dell'intestazione. Puoi scaricare queste risorse insieme al mio codice sorgente se vuoi risparmiare tempo. Ora nel file indice principale abbiamo bisogno di impostare un doctype HTML5 e aggiungere i collegamenti correlati.

Risolto il problema con la barra di navigazione superiore

Per fortuna molte delle risorse di cui abbiamo bisogno possono essere ospitate esternamente. Il nostro font Web personalizzato di Google denominato Capriola definisce il testo dell'intestazione e abbiamo anche bisogno di una copia dell'ultima libreria jQuery ospitata dal codice CDN di Google. La maggior parte di questo dovrebbe essere familiare, quindi passiamo ora al contenuto del corpo.

HTML Building Blocks

Il layout non è così complicato come si potrebbe pensare prima. Nella parte superiore, dopo aver aperto il tag body, è necessario impostare la barra di navigazione fissa. Questo elemento userà display: nessuno; inizialmente rimanere nascosto fino a dopo aver scrollato un po 'la pagina.

<ul> <li>Homepage</li> <li>Riguardo a noi</li> <li>Comunità</li> <li>Membri dello staff</li> <li>Contatto</li> </ul>

L'elemento UL interno centrerà tutti i collegamenti in modo che si trovino nella stessa posizione del contenuto principale. Quindi sotto questa barra di navigazione viene impostato il div del wrapper principale che centra la pagina a 710 px di larghezza, meno 30 px per il riempimento. Il totale è di 680 px, che è la dimensione perfetta per il freebie di Pontus Johansson utilizzato nel design del banner.

SomeWebsiteLogo <ul> <li>Homepage</li> <li>Riguardo a noi</li> <li>Comunità</li> <li>Membri dello staff</li> <li>Contatto</li> </ul>

La barra di navigazione principale ha gli stessi collegamenti identici a quelli che stiamo mantenendo nella barra dell'intestazione fissa. Ciò è stato fatto in base alla progettazione, tuttavia è possibile modificare le cose e inserire solo i collegamenti più importanti nella navigazione fissa. L'intestazione può contenere dropdown che si sentono anche fuori posto in una barra di navigazione fissa scorrevole.

Personalizzazione CSS

Prima di gestire il breve frammento di JavaScript lasciatemi spiegare come possiamo stilare tutto questo codice. Per prima cosa sto usando uno stile più personalizzato di reset basato sul foglio di stile originale di Eric Meyer. Ho definito il box-sizing proprietà come border-box in modo che i valori di larghezza esatta includano margine / riempimento e non espansione, come il comportamento predefinito.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, del, dfn, em, img, ins, kbd, q, s, samp, piccolo, strike, forte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td, articolo, a parte, canvas, dettagli, embed, figura, figcaption, footer, header, hgroup, menu, nav, output, ruby, sezione, riepilogo, ora, segno, audio, video {margine: 0; padding: 0; confine: 0; dimensione carattere: 100%; font: inherit; vertical-align: baseline; contorni: nessuno; -webkit-text-size-adjust: 100%; -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box; } html {height: 101%; } body {font-family: Tahoma, Verdana, Arial, sans-serif; dimensione carattere: 62,5%; altezza della linea: 1; imbottitura-fondo: 65px; background: # 444 url ​​('images / bg.png'); } articolo, a parte, dettagli, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote: before, blockquote: after, q: before, q: after {content: "; content: none;} strong {font-weight: bold;} table {border-collapse: collapse; border-spacing: 0;} img {border: 0; max-width: 100%;}

L'immagine di sfondo utilizza Debut Dark dal sito Web di Subtle Patterns. Ci sono molte trame ripetitive fantastiche che puoi scaricare gratuitamente per migliorare la qualità dei tuoi layout. Ma passando alla struttura principale abbiamo bisogno di configurare un contenitore wrapper in modo che si riempia naturalmente nel contenuto centrale. Anche lo sfondo dovrebbe apparire bianco nell'area del contenuto ma non nella sezione completa dell'intestazione.

#w {display: block; larghezza: 710 px; imbottitura: 14px 15px; margine: 0 auto; margin-top: 45px; } #content {display: block; sfondo: #fff; imbottitura: 14px 20px; } #logo {display: block; border: 1px solid # 232323; border-bottom-width: 0; } #logobg {display: block; larghezza: 100%; altezza: 130 px; background: url ('images / logo.png') in alto a sinistra nessuna ripetizione; text-indent: 100%; white-space: nowrap; overflow: nascosto; } / * top navigation * / #navigation {display: block; altezza: 35px; background-color: # 131313; background-image: -webkit-gradient (lineare, in alto a sinistra,a sinistra in basso, da (# 202020), a (# 131313)); background-image: -webkit-linear-gradient (in alto, # 202020, # 131313); background-image: -moz-linear-gradient (in alto, # 202020, # 131313); background-image: -ms-linear-gradient (in alto, # 202020, # 131313); background-image: -o-linear-gradient (in alto, # 202020, # 131313); background-image: linear-gradient (in alto, # 202020, # 131313); } #navigation ul {list-style: none; imbottitura: 0px 7px; } #navigation ul li {display: inline; fluttuare: a sinistra; } #navigation ul li a {display: block; imbottitura: 0 8px; colore: #fff; font-size: 1.1em; decorazione del testo: nessuna; altezza della linea: 35px; font-weight: bold; margine-destra: 6px; text-shadow: 1px 1px 1px # 000; -webkit-transition: tutti gli 0.2s lineari; -moz-transition: tutti 0.2s lineari; transizione: tutti 0,2s lineari; } #navigation ul li a: hover {color: # a8d6e7; }

Ho impostato un gradiente di sfondo ripetuto molto colorato nel menu di navigazione principale. Anche usando un'altezza fissa per la barra possiamo impostare lo stesso valore fisso per altezza della linea proprietà sugli elementi dell'elenco. Ciò impone che tutto il testo sia centrato verticalmente all'interno del contenitore della barra di navigazione. Ho incluso alcune proprietà di transizione CSS3 per gestire uno stato di hover più elegante.

Correzione della barra di navigazione nascosta

Nella parte inferiore del nostro foglio di stile CSS troverai tutti i codici relativi alla nostra navigazione fissa. Il contenitore si estende al 100% della larghezza della pagina in modo che vediamo la barra apparire su tutto lo schermo. Ma l'oggetto UL interno tiene tutti i collegamenti centrati nella stessa posizione dei nostri contenuti. Anche il colore di sfondo viene applicato usando la sintassi rgba () per trasparenza alfa.

/ * navigazione fissa nascosta * / #fixedbar {display: none; posizione: fissa; inizio: 0; larghezza: 100%; altezza: 80 px; sfondo: rgba (0,0,0,0,75); } #fixednav {display: block; larghezza: 710 px; margine: 0 auto; imbottitura: 0px 25px; } #fixednav li a {display: block; fluttuare: a sinistra; font-size: 1.75em; font-weight: bold; colore: # 96aed8; altezza della linea: 80 px; decorazione del testo: nessuna; imbottitura: 0px 8px; margine-destra: 6px; -webkit-transition: tutti gli 0.2s lineari; -moz-transition: tutti 0.2s lineari; transizione: tutti 0,2s lineari; } #fixednav li a: hover {color: #fff; sfondo: rgba (0,0,0,0.3); }

Ancora una volta possiamo vedere un'altezza fissa a 80 px che è abbastanza grande rispetto all'originale. Ma attira la tua attenzione e i collegamenti sono molto facili da manovrare. Volevo mantenere un effetto di animazione simile usando le transizioni CSS3 al passaggio del mouse. Quindi i link riempiono un altro sfondo del 30% che appare più scuro, ma comunque trasparente per il contenuto dietro di esso.

Gestire animazioni JavaScript

Sto guardando il fondo del nostro file index.html prima della chiusura finale etichetta. Qui voglio aggiungere un piccolo bit di JavaScript che gestirà gli effetti di scorrimento per visualizzare e nascondere la barra di navigazione fissa. Possiamo suddividerlo riga per riga per le cose più complicate.

$ (document) .ready (function () {$ ('# navigation a, #fixedbar a'). on ('click', function (e) {e.preventDefault ();}); $ (window) .on ('scroll', function () {var scrolltop = $ (this) .scrollTop (); if (scrolltop> = 215) {$ ('# fixedbar'). fadeIn (250);} else if (scrolltop <= 210 ) {$ ('# fixedbar'). fadeOut (250);}});});

La tipica chiamata jQuery sospende l'esecuzione per il DOM per completare il rendering prima di eseguire qualsiasi codice. Possiamo anche ignorare il primo blocco che utilizza la linea e.preventDefault (); per fermare i collegamenti di ancoraggio dal caricamento. Le cose più importanti sono gestite all'interno dell'ascoltatore dell'evento per $ (Window) .on ( 'scroll') che sta sparando una nuova funzione ogni volta che l'utente scorre verso l'alto o verso il basso.

La variabile? Scrolltop? contiene il valore in pixel dalla parte superiore dello schermo. Questo si aggiornerà ogni volta che l'utente scorre in una nuova posizione. Usando questo valore possiamo controllare se l'utente ha fatto scorrere oltre 215px e in tal caso, visualizzare la barra di navigazione nascosta. D'altra parte se scorrono fino a 210px o meno allora sappiamo che la barra di navigazione dell'intestazione principale sta venendo in vista, quindi nascondiamo la barra di navigazione fissa e riordina lo spazio sullo schermo.

Demo dal vivo - Scarica il codice sorgente

Pensieri finali

Anche se questo è un effetto relativamente semplice, il codice potrebbe creare confusione se non si ha familiarità con JavaScript. Dedica un po 'di tempo a esaminare i miei frammenti per assicurarti di capire come stiamo visualizzando e nascondendo il menu. Inoltre, sentitevi liberi di scaricare una copia del mio codice sorgente del progetto e giocarci da soli. Se desideri lasciare domande o commenti su questo tutorial, faccelo sapere nel thread post discussione.