Loo nutikam reageeriv navigatsioonimenüü selle jQuery pluginaga
Iga kaasaegne veebileht vajab a tundlik paigutus ja a kasutatav navigatsioon. See on antud.
Aga hamburgerite menüüd võivad minna ainult nii kaugele ja nad muuta kasutatavust radikaalselt erineva ekraani suuruse jaoks. Parem viis selle käsitlemiseks on linkide peitmine pistikprogrammiga, näiteks OkeiNav.
See tasuta jQuery plugin lisab väga lihtsa menüüfunktsiooni mis tahes lehele ja see on snavigeerimisobjekte peidetakse halvasti, põhinevad erinevatel vaatepunktidel. Nii on nutitelefoni kasutajatel ühtne hamburgerimenüü, kuid ka tablettide kasutajad näevad ka mõningaid linke.
Vaikimisi tugineb see a element ja a pikaajaline järjekorras olev nimekiri. Seni ma ei usu, et see plugin toetab mitmetasandilisi rippmenüüsid, kuid kui sa tead natuke jQuery'd, võite selle ise lisada.
OkayNav on äärmiselt lihtne ja see on mõeldud lihtsamatele veebisaitidele sellel on vaid mõned navigatsioonilinkid. Need lingid varjata aeglaselt välise menüü taha kui nad tabavad teatud vaateava ja rohkem linke peidetakse mida väiksem on brauser.
Sa pead murdke oma järjestamata nimekiri navigatsioonielemendis ja andke sellele konkreetne ID. Siis saate sihtige kogu navi koos okayNav () toimivad nii:
var navigation = $ ('# nav-main'). okayNav (); Pange tähele, et see on lihtsalt lihtsaim seadistamine ilma kohandatud funktsioonideta. Võite töötada üle tosina kohandatud valiku selle raamatukogu sisseehitatud ikooni stiili, menüü animatsiooni, tõmbetugede ja tagasihelistamise funktsioonide juhtimiseks.
Ja saate menüü isegi helistada avatud / sulge andes funktsioonile konkreetsed väärtused. Siin on lihtne näide avage navigatsioon:
navigation.okayNav ('openInvisibleNav'); Kõik need koodid on hästi dokumenteeritud GitHub repo sisaldab ka skripti allalaadimist. Kui eelistate CDN-marsruuti, siis võiksite seda kasutada RawGiti link lisada skript otse GitHubist.
OkeiNav on suur väiksemate saitide jaoks mis kasutavad progressiivset navigatsioonitehnikat. Aga kui sa pole veel kindel, kuidas see toimib, vaadake seda demot CodePenist, mis näitab, mida see väike plugin suudab teha.
