Crea un menu di navigazione reattivo più intelligente con questo plugin jQuery
Ogni sito moderno ha bisogno di a layout reattivo e a navigazione utilizzabile. Questo è un dato.
Ma i menu degli hamburger non possono che andare così lontano e loro cambia radicalmente usabilità per diverse dimensioni dello schermo. Il modo migliore per gestire questo è vicino nascondendo progressivamente i collegamenti con un plugin come OkayNav.
Questo plugin gratuito di jQuery aggiunge una funzione di menu molto semplice a qualsiasi pagina ed è snasconde a malapena gli elementi di navigazione, basato su diverse finestre. In questo modo gli utenti di smartphone hanno il menu di hamburger singolo, ma gli utenti di tablet possono vedere anche alcuni link.
Di default, si basa su a elemento e a lunga lista non ordinata. Finora, non penso che questo plugin supporti i dropdown multi-livello ma se conosci un po 'di jQuery puoi aggiungerlo tu stesso.
OkayNav è estremamente semplice e lo è significato per siti Web più semplici che hanno solo una manciata di link di navigazione. Questi collegamenti lentamente nascondersi dietro un menu fuori dallo schermo quando colpiscono una determinata finestra e più collegamenti si nascondono più piccolo diventa il browser.
Avrai bisogno di avvolgi la tua lista non ordinata in un elemento di navigazione e dargli un ID specifico. Allora puoi bersaglio l'intero nav con il okayNav () funzione come questa:
var navigation = $ ('# nav-main'). okayNav (); Nota questo è solo il installazione più semplice senza caratteristiche personalizzate. Puoi lavorare con oltre una dozzina di opzioni personalizzate incorporato in questa libreria per controllare lo stile dell'icona, l'animazione del menu, il supporto di scorrimento e le funzioni di callback.
E puoi anche chiamare il menu a apri / chiudi a piacimento passando specifici valori alla funzione. Ecco un semplice esempio per apri la navigazione:
navigation.okayNav ( 'openInvisibleNav');
Tutti questi codici sono ben documentati nel Repository GitHub che include anche un download dello script. Se si preferisce il percorso CDN, è possibile utilizzare anche il percorso Link RawGit per aggiungere questo script direttamente da GitHub.
OkayNav è ottimo per siti più piccoli che beneficiano della tecnica di navigazione progressiva. Ma, se non sei ancora sicuro di come funziona, prova questa demo su CodePen che mostra cosa può fare questo piccolo plugin.
