Sukurkite protingesnį reagavimo navigacijos meniu su šiuo jQuery įskiepiu
Kiekvienai šiuolaikinei svetainei reikia a atsakingas išdėstymas ir a naudinga navigacija. Tai yra duotas.
Tačiau, mėsainiai gali pereiti tik iki šiol ir jie radikaliai pakeisti naudojimo galimybes skirtingų ekrano dydžių. Geresnis būdas tai padaryti yra palaipsniui slėpti nuorodas su papildiniu, pvz., Gerai.
Šis nemokamas jQuery įskiepis priduria labai paprastą meniu funkciją į bet kurį puslapį ir jis yrašvelniai slepia navigacijos elementus, remiantis skirtingomis peržiūros sritimis. Tokiu būdu išmaniųjų telefonų naudotojai turi vieną hamburgerio meniu, tačiau planšetinių kompiuterių vartotojai taip pat gali matyti kelias nuorodas.
Pagal numatytuosius nustatymus jis remiasi a elementas ir a ilgas netvarkingas sąrašas. Iki šiol nemanau, kad šis įskiepis palaiko daugiapakopius išskleidžiamuosius sąrašus, bet jei žinote šiek tiek „JQuery“, galite tai pridėti.
Labai paprastas ir labai gerai skirtas paprastesnėms svetainėms tai tik keletas navigacijos nuorodų. Šios nuorodos lėtai paslėpti už ekrano ribų kai jie pasiekia tam tikrą peržiūros sritį ir daugiau nuorodų slepiasi kuo mažesnė naršyklė.
Jums reikės apvyniokite nereguliuojamą sąrašą navigacijos elemente ir suteikite jam konkretų ID. Tada galite nukreipti visą navigaciją su okayNav () veikia taip:
var navigation = $ ('# nav-main'). okayNav (); Atminkite, kad tai tik paprasčiausias nustatymas be jokių specialių funkcijų. Galite dirbti daugiau nei dešimt pasirinktinių parinkčių integruota į šią biblioteką, kad valdytumėte piktogramų stilių, meniu animaciją, braukimo palaikymą ir atgalinio ryšio funkcijas.
Ir netgi galite skambinti meniu atidaryti / uždaryti perduodant konkrečias vertes funkcijai. Štai paprastas pavyzdys atidarykite navigaciją:
navigation.okayNav („openInvisibleNav“);
Visi šie kodai yra gerai dokumentuoti GitHub repo kuris taip pat apima scenarijaus atsisiuntimą. Jei pageidaujate CDN maršruto, taip pat galite naudoti „RawGit“ nuoroda pridėti šį scenarijų tiesiai iš „GitHub“.
Labai gerai puikiai tinka mažesnėms svetainėms kuri naudojasi pažangia navigacijos technika. Tačiau, jei vis dar nesate tikri, kaip tai veikia, patikrinkite šį „CodePen“ demonstraciją, parodantį, ką šis mažas įskiepis gali padaryti.
