Creați un meniu inteligent de navigare receptiv cu acest plugin jQuery

Fiecare site modern are nevoie de a aspectul receptiv și a navigabilitate utilizabilă. E o dată.

Dar, meniurile de hamburger pot merge atât de departe și ele schimbarea radicală a utilizabilității pentru diferite dimensiuni ale ecranului. Cea mai bună modalitate de a trata acest lucru este prin ascunzând în mod progresiv legăturile cu un plugin cum ar fi OkayNav.

Acest plugin gratuit jQuery adaugă o caracteristică foarte simplă a meniului la orice pagină și sascunde ascunse elementele de navigare, bazate pe diferite ferestre de vizualizare. În acest fel, utilizatorii de smartphone-uri au un singur meniu de hamburger, dar utilizatorii de tablete pot vedea și câteva link-uri.

În mod implicit, se bazează pe a

element și a listă lungă și neordonată. Până acum, nu cred că acest plugin acceptă dropdown-uri pe mai multe niveluri, dar dacă știi un pic de jQuery, poți să-l adaugi singur.

OkayNav este extrem de simplu și este destinate site-urilor mai simple care au doar o mână de link-uri de navigare. Aceste legături încet ascunde în spatele unui meniu de pe ecran odată ce au lovit un anumit punct de vedere și mai multe linkuri se ascund cu cât este mai mică browserul.

Va trebui împachetați lista neordonată într-un element de navigare și dați-i un ID specific. Atunci poti vizați întreaga navă cu okayNav () funcționează astfel:

 var navigație = $ ('# nav-main'); okayNav ();

Rețineți că acest lucru este doar setarea cea mai simplă fără caracteristici personalizate. Poți să lucrezi peste o duzină de opțiuni personalizate încorporată în această bibliotecă pentru a controla stilul pictogramei, animația meniului, funcția de sprijinire a glisării și funcțiile de apel invers.

Și puteți chiar să apelați meniul deschide / închide după voință prin trecerea unor valori specifice funcției. Iată un exemplu simplu deschideți navigația:

 navigation.okayNav ( 'openInvisibleNav');

Toate aceste coduri sunt bine documentate în GitHub repo care include și descărcarea scriptului. Dacă preferați ruta CDN, puteți folosi și RawGit link pentru a adăuga acest script direct de la GitHub.

OkayNav este excelent pentru site-uri mai mici care beneficiază de tehnica progresivă de navigație. Dar, dacă încă nu sunteți sigur de modul în care funcționează, verificați acest demo pe CodePen, care arată ce poate face acest plugin mic.