A JQuery Plugin segítségével hozzon létre okosabb reagálású navigációs menüt
Minden modern webhelynek szüksége van a Reszponszív Elhelyezés és a használható navigáció. Ez egy adott.
De a hamburger menük csak annyira mennek, és ők radikálisan változtatni a használhatóságot különböző képméretekhez. A jobb módja ennek kezelése a a linkek fokozatos elrejtése egy pluginnal, mint például OkayNav.
Ez az ingyenes jQuery plugin nagyon egyszerű menüpontot ad bármely oldalra és sgyengén elrejti a navigációs elemeket, különböző nézetablakok alapján. Így az okostelefon-felhasználók rendelkezésére áll az egyetlen hamburger menü, de a tablet-felhasználók is láthatnak néhány linket.
Alapértelmezés szerint az a elem és a hosszú rendezetlen lista. Eddig nem hiszem, hogy ez a bővítmény támogatja a többszintű legördülő listákat, de ha tudsz egy kicsit a jQuery-ről, ezt hozzáadhatod magadhoz.
OkayNav rendkívül egyszerű és ez az egyszerűbb weboldalak számára készült csak néhány navigációs link van. Ezek a linkek lassan elrejtőzik a képernyőn kívüli menü mögött ha egy bizonyos nézetablakot és több link rejtőzik minél kisebb a böngésző.
Meg kell csomagolja be a rendezetlen listát egy navigációs elemben, és adjon meg egy meghatározott azonosítót. Akkor tudod célozza az egész navigációt a ... val okayNav () így működik:
var navigation = $ ('# nav-main'). okayNav (); Ne feledje, ez csak a legegyszerűbb beállítás egyedi funkciók nélkül. Tud dolgozni több mint egy tucat egyedi opció A könyvtárba beépített ikon az ikonstílus, a menü animáció, az ujjlenyomat-támogatás és a visszahívási funkciók vezérlésére szolgál.
És akkor is hívhatja a menüt nyitva / zárva lesz a meghatározott értékek átadásával. Itt egy egyszerű példa nyissa meg a navigációt:
navigation.okayNav ( 'openInvisibleNav');
Ezek a kódok jól dokumentáltak a GitHub repo amely tartalmazza a szkript letöltését is. Ha inkább a CDN útvonalat szeretné használni, akkor az is használható RawGit link hozzáadja ezt a szkriptet közvetlenül a GitHub-tól.
OkayNav nagyszerű a kisebb oldalak számára a progresszív navigációs technika előnyeit élvezik. De ha még mindig nem biztos benne, hogy ez hogyan működik, nézd meg ezt a demót a CodePen-en, amely megmutatja, hogy mit tehet ez a kis plugin.
