Skapa smartare Responsive Navigation Menu med denna jQuery Plugin
Varje modern webbplats behöver en responsiv layout och a användbar navigering. Det är en given.
Men hamburger menyer kan bara gå så långt och de ändra användbarheten radikalt för olika skärmstorlekar. Det bättre sättet att hantera detta är genom gradvis dölja länkar med ett plugin som OkayNav.
Detta gratis jQuery-plugin lägger till en mycket enkel meny funktion till vilken sida som helst och slowly döljer navigeringsobjekt, baserat på olika visningsportar. På så sätt kan smartphone-användare ha en enda hamburger-meny, men tablet-användare kan också se några länkar.
Som standard är det baserat på a element och a länge oorderad lista. Hittills tror jag inte att det här plugin stöder flernivå-dropdowns men om du vet lite av jQuery kan du lägga till det här själv.
OkayNav är extremt enkelt och det är avsedd för enklare webbplatser som bara har en handfull navigationslänkar. Dessa länkar göm långsamt bakom en skärmmeny när de träffade en viss viewport och fler länkar håller gömmer sig ju mindre webbläsaren får.
Du måste pakka in din oordnade lista i ett navigeringselement och ge det ett visst ID. Då kan du rikta hela naven med okayNav () funktion så här:
varnavigering = $ ('# nav-main'). okayNav (); Observera att detta bara är enklaste inställningen utan några anpassade funktioner. Du kan arbeta med över ett dussin anpassade alternativ inbyggt i det här biblioteket för att styra ikonstilen, menyanimationen, svepstöd och återuppringningsfunktionerna.
Och du kan även kalla menyn till öppna / stänga efter vilja genom att ge specifika värden till funktionen. Här är ett enkelt exempel på öppna navigeringen:
navigation.okayNav ( 'openInvisibleNav');
Alla dessa koder är väl dokumenterade i GitHub repo som också innehåller en nedladdning av manuset. Om du föredrar CDN-rutten kan du också använda RawGit länk att lägga till det här skriptet direkt från GitHub.
OkayNav är bra för mindre platser som dra nytta av den progressiva navigeringstekniken. Men om du fortfarande är osäker på hur det fungerar kan du kolla in den här demo på CodePen och visa vad den här plugin kan göra.
