Come creare una navigazione reattiva

Una delle parti più difficili da essere responsified su un sito web è “la navigazione”, questa parte è molto importante per l'accessibilità del sito, poiché questo è uno dei modi in cui i visitatori salgono sulle pagine web.

Ci sono in realtà molti modi per creare una navigazione reattiva del sito web e anche alcuni plugin jQuery sono disponibili per farlo in un secondo.

Tuttavia, piuttosto che applicare una soluzione istantanea, in questo post, ti porteremo avanti come costruire una semplice navigazione da terra e utilizzando le query multimediali CSS3 e un po 'di jQuery per visualizzarlo in dimensioni ridotte come gli smartphone in modo appropriato.

Quindi, cominciamo.

dimostrazione
Scarica fonte

HTML

Prima di tutto, aggiungiamo il meta viewport all'interno di capo etichetta. Questo meta viewport è necessario un tag per ridimensionare correttamente la nostra pagina all'interno di qualsiasi dimensione dello schermo, in particolare nel viewport mobile.

... e poi aggiungi il seguente frammento come markup di navigazione all'interno del corpo etichetta.

   Casa
 Come
 Icone
 Design
 Web 2.0
 Utensili
 
 Menu

Come puoi vedere sopra, abbiamo sei collegamenti al menu principale e abbiamo aggiunto un altro link dopo di essi. Questo link aggiuntivo verrà utilizzato per Tirare il menu di navigazione quando è nascosto in un piccolo schermo.

Ulteriori letture: Non dimenticare il meta tag viewport.

stili

In questa sezione, iniziamo a disegnare la navigazione. Lo stile qui è solo decorativo, puoi scegliere qualsiasi colore come desideri. Ma in questo caso, noi (personalmente) vogliamo il corpo avere un colore morbido e cremoso.

 body background-color: # ece8e5;

Il nav tag che definisce la navigazione avrà 100% a tutta larghezza della finestra del browser, mentre il ul dove contiene i link del nostro menu principale 600px per la larghezza.

 nav height: 40px; larghezza: 100%; sfondo: # 455868; font-size: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; posizione: relativa; border-bottom: 2px solid # 283744;  nav ul padding: 0; margine: 0 auto; larghezza: 600 px; altezza: 40px;

Allora lo faremo galleggiante i collegamenti del menu a sinistra, in modo che vengano visualizzati orizzontalmente affiancati, ma il fatto di fluttuare un elemento causerà anche il collasso dei genitori.

 nav li display: inline; float: a sinistra;

Se noti il markup HTML sopra, abbiamo già aggiunto clearfix nel classe attributo per entrambi nav e ul per chiarire le cose quando facciamo fluttuare gli elementi al suo interno usando questo hafix CSS. Quindi, aggiungiamo le seguenti regole di stile nel foglio di stile.

 .clearfix: before, .clearfix: after content: ""; display: tabella;  .clearfix: after clear: both;  .clearfix * zoom: 1;

Poiché abbiamo sei collegamenti a menu e abbiamo anche specificato il contenitore 600px, ogni link di menu avrà 100px per la larghezza.

 nav a color: #fff; display: blocco in linea; larghezza: 100 px; allineamento del testo: centro; decorazione del testo: nessuna; altezza della linea: 40px; text-shadow: 1px 1px 0px # 283744;

I collegamenti del menu saranno separati con 1px bordo destro, tranne che per l'ultimo. Ricorda il nostro post precedente sul modello di box, la larghezza del menu sarà espansa per 1px realizzandolo 101px come aggiunta al bordo, così qui cambiamo il box-sizing modello a border-box per mantenere il menu rimane 100px.

 nav li a border-right: 1px solid # 576979; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  nav li: last-child a border-right: 0;

Successivamente, il menu avrà un colore più luminoso quando è in : hover o :attivo stato.

 nav a: hover, nav a: active background-color: # 8c99a4;

... e infine, il collegamento aggiuntivo sarà nascosto (per lo schermo del desktop).

 nav a # pull display: none;

A questo punto, modifichiamo solo la navigazione e non accadrà nulla quando ridimensioneremo la finestra del browser. Quindi, passiamo al prossimo passo.

Ulteriori letture: Dimensionamento box CSS3 (Hongkiat.com)

Media Queries

Le query multimediali CSS3 vengono utilizzate per definire in che modo gli stili verranno spostati in determinati punti di interruzione o in particolare le dimensioni dello schermo del dispositivo.

Poiché la nostra navigazione è inizialmente 600px fix-width, prima definiremo gli stili quando viene visualizzato 600px o dimensioni dello schermo inferiori, quindi in pratica, Questo è il nostro primo punto di interruzione.

In questa dimensione dello schermo, ciascuno dei due collegamenti di menu sarà visualizzato fianco a fianco, quindi il ulLa larghezza qui sarà 100% della finestra del browser mentre i collegamenti del menu avranno 50% per la larghezza.

 @media screen e (max-width: 600px) nav height: auto;  nav ul width: 100%; blocco di visualizzazione; altezza: auto;  nav li width: 50%; float: a sinistra; posizione: relativa;  nav li a border-bottom: 1px solid # 576979; border-right: 1px solid # 576979;  nav a text-align: left; larghezza: 100%; text-indent: 25px;

... e poi, definiamo anche come viene visualizzata la navigazione quando lo schermo si riduce 480px o inferiore (quindi questo è il nostro secondo punto di interruzione).

In questa dimensione dello schermo, il collegamento extra che abbiamo aggiunto prima inizierà a essere visibile e forniremo anche il link a “Menu” icona sul lato destro usando il :dopo pseudo-elemento, mentre i collegamenti del menu principale saranno nascosti per salvare più spazi verticali sullo schermo.

 @media solo schermo e (larghezza massima: 480px) nav border-bottom: 0;  nav ul display: none; altezza: auto;  nav a # pull display: block; background-color: # 283744; larghezza: 100%; posizione: relativa;  nav a # pull: after content: ""; background: url ('nav-icon.png') no-repeat; larghezza: 30 px; altezza: 30 px; display: blocco in linea; posizione: assoluta; a destra: 15px; inizio: 10px;

Infine, quando lo schermo diventa più piccolo 320px e abbassare il menu verrà visualizzato verticalmente dall'alto verso il basso.

 @media solo schermo e (max-larghezza: 320px) nav li display: block; float: none; larghezza: 100%;  nav li a border-bottom: 1px solid # 576979;

Ora puoi provare a ridimensionare la finestra del browser. Ora dovrebbe essere in grado di adattare le dimensioni dello schermo.

Ulteriori letture: Media query per dispositivi standard.

Mostrare il menu

A questo punto, il menu sarà ancora nascosto e sarà visibile solo quando è necessario toccando o facendo clic su “Menu” link e possiamo ottenere l'effetto usando jQuery slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('clic', funzione (e) e.preventDefault (); menu.slideToggle ();););

Tuttavia, quando ridimensionate la finestra del browser subito dopo aver appena visualizzato e nascosto il menu in uno schermo piccolo, il menu rimarrà nascosto, poiché display: nessuno lo stile generato da jQuery è ancora collegato nell'elemento.

Quindi, abbiamo bisogno di rimuovere questo stile sul ridimensionamento della finestra, come segue:

 $ (window) .resize (function () var w = $ (window) .width (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

Bene, sono tutti i codici di cui abbiamo bisogno, ora possiamo visualizzare la navigazione dai seguenti link e ti consigliamo di testarlo in uno strumento reattivo di test di progettazione, come il Responsinator, in modo che tu possa visualizzarlo in varie larghezze contemporaneamente.

dimostrazione
Scarica fonte

Bonus: un modo alternativo

Come abbiamo accennato in precedenza in questo post, ci sono altri modi per farlo e usare una libreria JavaScript chiamata SelectNav.js è uno dei modi più semplici. Questo è un puro JavaScript che non si basa su un'altra libreria di terze parti come jQuery.

Fondamentalmente, duplicherà il tuo menu di lista e lo trasformerà in a menu farà uso dell'interfaccia utente nativa dal dispositivo stesso.

Per favore, fai riferimento alla documentazione ufficiale per ulteriori implementazioni.

Conclusione

Siamo arrivati fino in fondo per creare una navigazione reattiva da zero. Questo che abbiamo creato qui è solo uno degli esempi e, come affermato in precedenza in questo post e mostrato sopra, ci sono molte altre soluzioni che puoi impiantare. Quindi, ora è la tua decisione di scegliere la pratica più adatta a soddisfare i requisiti e la struttura di navigazione del tuo sito web.