Creëer slimmere responsieve navigatiemenu's met deze jQuery-plug-in
Elke moderne site heeft een responsieve lay-out en een bruikbare navigatie. Dat is een gegeven.
Maar hamburger-menu's kunnen alleen zo ver gaan en zij de bruikbaarheid radicaal veranderen voor variërende schermformaten. De betere manier om dit aan te pakken is door steeds meer verbanden verbergen met een plug-in zoals OkayNav.
Deze gratis jQuery-plug-in voegt een zeer eenvoudige menufunctie toe naar elke pagina en het isverbergt navigatie-items laag, gebaseerd op verschillende viewports. Op deze manier hebben smartphonegebruikers het enige hamburger-menu, maar tabletgebruikers kunnen ook een paar links zien.
Standaard is het afhankelijk van een element en een lange ongeordende lijst. Tot nu toe denk ik niet dat deze plug-in multi-level dropdowns ondersteunt, maar als je een beetje jQuery kent, zou je dit zelf kunnen toevoegen.
OkayNav is extreem eenvoudig en dat is het ook bedoeld voor eenvoudigere websites die slechts een handvol navigatielinks hebben. Deze links verberg je langzaam achter een menu op het scherm zodra ze op een bepaalde viewport en meer links blijven verborgen hoe kleiner de browser wordt.
Dat moet je doen pak je ongeordende lijst in in een navigatie-element en geef het een specifieke ID. Dan kunt u richt het hele nav met de okayNav () functie zoals deze:
var navigation = $ ('# nav-main'). okayNav (); Let op dit is gewoon de eenvoudigste installatie zonder speciale functies. Je kunt ermee werken meer dan een dozijn aangepaste opties ingebouwd in deze bibliotheek om de pictogramstijl, de menuanimatie, swipe-ondersteuning en callback-functies te beheren.
En je kunt zelfs het menu oproepen open / dicht bij wil door specifieke waarden door te geven aan de functie. Hier is een eenvoudig voorbeeld voor open de navigatie:
navigation.okayNav (openInvisibleNav);
Al deze codes zijn goed gedocumenteerd in de GitHub repo die ook een download van het script bevat. Als u de CDN-route verkiest, kunt u ook de RawGit-link om dit script rechtstreeks vanuit GitHub toe te voegen.
OkayNav is ideaal voor kleinere sites die profiteren van de progressieve navigatietechniek. Maar als je nog steeds niet zeker weet hoe dit werkt, bekijk dan deze demo op CodePen en laat zien wat deze kleine plug-in kan doen.
