Dopo un lungo periodo di ricerca di layout responsive per dispositivi mobili, ho trascorso un bel po 'di tempo a sperimentare vari design dell'interfaccia utente. Uno degli hotspot principali nella pagina è spesso la navigazione principale del sito web. Gli utenti vogliono un accesso rapido alle pagine di contenuto, e questo sarà sempre il caso, sia su un monitor completo che su uno schermo di risposta mobile più piccolo.
Per questo tutorial voglio dimostrare come possiamo usare una combinazione di media query CSS3 insieme ad alcuni jQuery per gestire un menu di navigazione scorrevole. I collegamenti appariranno normalmente sul frontend, ma cadranno in un menu nascosto dopo il ridimensionamento sotto 600px. Invece vediamo una piccola icona del menu a tendina che si aprirà e si chiuderà al comando.
Demo dal vivo - Scarica il codice sorgente
Impostazione del documento
L'area di intestazione superiore contiene una piccola selezione di file che è necessario creare questo effetto. Sto includendo un foglio di stile personalizzato insieme a una copia dell'ultima libreria jQuery ospitata da Google. Tutte le funzioni JS personalizzate sono memorizzate in un file esterno denominato menu.js.
La maggior parte del markup della pagina è abbastanza irrilevante a parte l'area dell'intestazione. Ho tentato di mantenere tutto a un'altezza fissa, ma l'intestazione non può utilizzare una proprietà CSS fissa altrimenti la pagina non si espanderà quando si scorre il menu aperto e chiuso. Quindi i collegamenti di direzione e navigazione sono impostati da altezza della linea valori in CSS.
La pagina h1 titolo si adatta meglio come ultimo elemento in modo che l'intestazione mantenga sempre la sua altezza costante. Proprio accanto al titolo c'è un collegamento di ancoraggio con l'ID #navbtn e questo contiene l'icona di collegamento del menu scorrevole. Verrà visualizzato solo tramite CSS dopo che la larghezza scende al di sotto di una determinata soglia.
Posizioni di markup in CSS
In genere non considero nemmeno la richiesta di jQuery ogni volta che è possibile. L'unico problema con i menu di commutazione è che non possiamo farlo in modo efficiente in CSS. E i metodi jQuery applicheranno gli stili CSS in linea che annullano il foglio di stile predefinito. Quindi si tratta di posizionare gli elementi usando i CSS e aiutandoli ad animare correttamente con JavaScript.
Le mie reimpostazioni del browser CSS predefinite includono un set di codici personalizzati per la tipografia della pagina. Anche il nostro riquadro di sfondo del corpo è PS Neutro salvato da Modelli sottili. Ho dovuto dividere il contenitore wrapper e il contenitore del corpo in 2 div perché usiamo il lato imbottitura a sinistra ea destra per mantenere la pagina dal crescere al 100% della larghezza. Aggiunta di valori di margine su margine: 0 auto; la proprietà risulterà nel perdere il posizionamento centrato.
Disegnando l'interno #navbtn verrà visualizzato nascosto fino al ridimensionamento inferiore a 560 px utilizzando le query multimediali. Tutto il resto è impostato tra cui altezza, larghezza e posizione.
Stili reattivi
Ci sono solo un piccolo numero di modifiche che ho apportato quando la finestra del browser si ridimensiona più piccola di 560px. Non penso che questo sia un numero magico, ma sembra essere una bella area quando la navigazione di default inizierà a scontrarsi con il testo del logo. Questo è quando abbiamo bisogno di nascondere il menu di navigazione e visualizzare l'icona di commutazione.
Significa anche rimuovere il posizionamento assoluto dall'elemento nav in modo che venga visualizzato come un blocco statico. I collegamenti di ancoraggio nav verranno visualizzati come file piene al 100% per una maggiore accessibilità quando si tocca uno schermo mobile. Anche le intestazioni + paragrafi della pagina interna verranno ridimensionate un po 'più piccole, insieme ai valori dell'altezza della linea regolati.
Interazioni con JavaScript
L'ultimo bit di codice in menu.js potrebbe anche essere incluso direttamente nel documento HTML. Ma dal momento che dobbiamo gestire più di un singolo metodo di commutazione, è più pulito e più efficiente separare il markup dagli effetti dinamici. Analizzerò questo file in sezioni in modo che sia più facile da leggere.
Il primo grosso pezzo è probabilmente il più confuso. Si occupa di bug minori quando si ridimensionano i browser da reattivo a non reattivo e non dovrebbe interessare affatto gli smartphone. Alleghiamo un gestore di eventi al controllo della finestra .on () ridimensiona. Le due istruzioni logiche distinte si stanno confrontando con la variabile che ha come target l'elemento nav dell'intestazione, insieme al collegamento toggle del menu nav.
Quando il browser diventa reattivo e l'utente alterna il menu aperto / chiuso aggiungerà un inline stile attributo. Questo avrà la precedenza su tutto ciò che è scritto nel foglio di stile ed è un problema dopo che il menu è stato aperto e chiuso. Il nav avrà uno stile permanente di display: nessuno; anche dopo essere stato ridimensionato con dimensioni superiori a 560 px.
Questo è ciò che l'istruzione 2nd if {} sta cercando. Quando il menu di navigazione e il pulsante del menu sono entrambi nascosti, il layout era reattivo, l'utente ha aperto / chiuso il menu e quindi ridimensionato alla vista normale. Quindi abbiamo solo bisogno di visualizzare di nuovo il navigatore ma c'è un problema. Il metodo show () di jQuery aggiungerà anche gli stili in linea, il che significa che quando si ridimensiona in modo reattivo il menu di navigazione rimane aperto permanentemente. Per risolvere questo problema, aggiungerò una classe .keep-nav-chiusa. Questo sarà aggiunto solo se il nav è chiuso e poi ridimensionato più grande - se è lasciato aperto quando reattivo rimarrà aperto quando ridimensionato più grande e nuovamente giù.
Ora l'altra istruzione if {} dovrebbe avere un senso sul motivo per cui stiamo controllando questa classe. Apparirà solo dopo il 2 ° tempo di ridimensionamento e apertura del nav, quindi sappiamo come rimuovere la classe in questo modo rimane chiusa quando ridimensioni su una larghezza reattiva. È un bug strano e devo ancora trovare una soluzione più piccola o più veloce per gestire gli stili jQuery in linea, oltre a rimuovere completamente l'attributo (che causa ancora problemi). Quindi ora passiamo a dare un'occhiata al segmento finale di JavaScript.
Entrambi i gestori di eventi controllano gli eventi di clic su diversi target. Il primo è bloccato su tutti i diversi link di ancoraggio nelle sezioni di navigazione e piè di pagina dell'intestazione. I valori href sono simboli hash (#) che non vanno da nessuna parte, quindi li ho semplicemente impostati per non caricare nulla. Questo è simile quando fai clic sul pulsante di navigazione perché non vogliamo caricare un hash nell'URL della pagina. Invece il menu di navigazione nascosta reattiva si aprirà e si chiuderà a 350 millisecondi ignorando completamente il valore href.
Demo dal vivo - Scarica il codice sorgente