Izveidojiet viedāku reakcijas navigācijas izvēlni ar šo jQuery spraudni
Katrai mūsdienu vietnei ir nepieciešams atsaucīgs izkārtojums un a izmantojama navigācija. Tas ir dots.
Bet, hamburgeru izvēlnes var aiziet tikai tik tālu un tās radikāli mainīt lietojamību dažādiem ekrāna izmēriem. Labāks veids, kā rīkoties, ir pakāpeniski slēpj saites ar spraudni, piemēram, Labi!.
Šis bezmaksas jQuery spraudnis pievieno ļoti vienkāršu izvēlnes funkciju uz jebkuru lapu un tāvāji paslēpj navigācijas vienumus, balstās uz dažādām skatu vietām. Tādā veidā viedtālruņu lietotājiem ir viena hamburgeru izvēlne, bet arī planšetdatoru lietotāji var redzēt dažas saites.
Pēc noklusējuma tā balstās uz elementu un a garš neierobežots saraksts. Līdz šim es nedomāju, ka šis spraudnis atbalsta vairāku līmeņu nolaižamos sarakstus, bet, ja jūs zināt mazliet jQuery, jūs to varētu pievienot.
OkayNav ir ļoti vienkāršs un tas ir paredzētas vienkāršākām tīmekļa vietnēm ir tikai dažas navigācijas saites. Šīs saites lēnām slēpjas aiz ekrāna izvēlnes pēc tam, kad tie ir sasnieguši noteiktu skatījumu un vairāk saišu slēpjas jo mazāks pārlūks.
Jums būs nepieciešams wrap savu neierobežotu sarakstu navigācijas elementā un piešķir tam īpašu ID. Tad jūs varat mērķēt visu navigāciju Ar okayNav () darbojas šādi:
var navigation = $ ('# nav-main'). okayNav (); Ņemiet vērā, ka tas ir tikai vienkāršākais iestatījums bez pielāgotām funkcijām. Jūs varat strādāt ar vairāk nekā duci pielāgotu opciju iebūvēta šajā bibliotēkā, lai kontrolētu ikonu stilu, izvēlnes animāciju, zvēliens atbalstu un atzvanīšanas funkcijas.
Varat arī izsaukt izvēlni uz atvērt / aizvērt pēc vēlēšanās nododot īpašas vērtības funkcijai. Šeit ir vienkāršs piemērs atveriet navigāciju:
navigation.okayNav ('openInvisibleNav'); Visi šie kodi ir labi dokumentēti GitHub repo kas ietver arī skripta lejupielādi. Ja vēlaties izmantot CDN maršrutu, jūs varētu izmantot arī RawGit saite pievienot šo skriptu tieši no GitHub.
OkayNav ir lieliski piemēroti mazākām vietnēm kas gūst labumu no progresīvās navigācijas tehnikas. Bet, ja jūs joprojām neesat pārliecināts par to, kā tas darbojas, pārbaudiet šo demo par CodePen, kurā parādīts, ko var darīt šis mazais spraudnis.
