Ustvarite pametnejši odzivni navigacijski meni s tem vtičnikom jQuery
Vsako moderno spletno mesto potrebuje a odzivna postavitev in a uporabna navigacija. To je dano.
Toda meniji hamburgerjev lahko gredo le tako daleč in oni radikalno spremeni uporabnost za različne velikosti zaslona. Boljši način za reševanje tega je postopno skrivanje povezav z vtičnikom, kot je OkNav.
Ta brezplačen vtičnik jQuery doda zelo preprosto funkcijo menija na katero koli stran in jenizko skrije elemente navigacije, temelji na različnih pogledih. Na ta način imajo uporabniki pametnega telefona meni z enim samim hamburgerjem, vendar lahko uporabniki tablet vidijo tudi nekaj povezav.
Privzeto se opira na a element in a dolg neurejen seznam. Doslej menim, da ta vtičnik ne podpira padcev na več ravneh, toda če veste, da je del jQueryja, ga lahko dodate sami.
OkayNav je zelo preprosta in je namenjene za preprostejše spletne strani ki imajo le nekaj povezav za navigacijo. Te povezave počasi se skrivajte za zaslonski meni ko zadenejo določen pogled in več povezav se skriva manjši je brskalnik.
Morali boste zavijte neurejeni seznam v navigacijskem elementu in mu podajte določen ID. Potem pa lahko ciljati na celotno nav z okayNav () deluje tako:
var navigation = $ ('# nav-main'). okayNav (); Upoštevajte, da je to samo najenostavnejša nastavitev brez funkcij po meri. Lahko delaš več kot ducat možnosti po meri vgrajena v to knjižnico za nadzor slogov ikon, animacij menijev, podpore s potegom in funkcij povratnega klica.
Meni lahko celo pokličete odpiranje / zapiranje po volji s posredovanjem določenih vrednosti funkciji. Tu je preprost primer odprite navigacijo:
navigation.okayNav ('openInvisibleNav'); Vse te kode so dobro dokumentirane GitHub repo ki vključuje tudi prenos scenarija. Če vam je bolj všeč pot CDN, lahko uporabite tudi Povezava RawGit Če želite dodati ta skript neposredno iz GitHub.
OkNav je odlično za manjša mesta ki imajo koristi od tehnike progresivne navigacije. Ampak, če še vedno niste prepričani, kako to deluje, si oglejte ta demo na CodePen, ki prikazuje, kaj lahko ta mali plugin stori.
