Luo älykkäämpi reagoiva navigointivalikko tällä jQuery-liitännällä
Jokainen nykyaikainen sivusto tarvitsee a reagoiva ulkoasu ja a käyttökelpoinen navigointi. Se on annettu.
Mutta hampurilaisvalikot voivat mennä vain niin pitkälle ja ne muuttaa radikaalisti käytettävyyttä vaihtelevat näytön koot. Parempi tapa käsitellä tätä on piilottaa asteittain linkit pluginilla, kuten OkayNav.
Tämä ilmainen jQuery-laajennus lisää hyvin yksinkertaisen valikkotoiminnon mihin tahansa sivuun ja se shitaasti piilottaa navigointikohdat, perustuvat eri näkymänportteihin. Tällä tavoin älypuhelinten käyttäjillä on yksi hampurilaisvalikko, mutta myös tabletin käyttäjät näkevät muutaman linkin.
Oletuksena se perustuu a elementti ja a pitkä järjestysluettelo. Toistaiseksi en usko, että tämä laajennus tukee monitasoista pudotusvalikkoa, mutta jos tiedät vähän jQueryä, voit lisätä tämän itse.
OkayNav on erittäin yksinkertainen ja se on tarkoitettu yksinkertaisemmille verkkosivuille joilla on vain muutama navigointilinkki. Nämä linkit piilota hitaasti ruudun ulkopuolisen valikon takana kun he osuvat tietyn näkymän ja lisää linkkejä piiloutuu mitä pienempi selain saa.
Sinun täytyy kääri järjestämätön lista navigointielementissä ja antaa sille tietty tunnus. Sitten voit kohdista koko nav kanssa okayNav () toimivat näin:
var navigation = $ ('# nav-main'). okayNav (); Huomaa, että tämä on vain yksinkertaisin asetus ilman mukautettuja ominaisuuksia. Voit työskennellä yli kymmenen mukautettua vaihtoehtoa kirjastoon, joka ohjaa kuvakkeen tyyliä, valikkojen animaatiota, pyyhkäisytukea ja takaisinsoitotoimintoja.
Voit myös soittaa valikkoon avaa / sulje antamalla toiminnalle tietyt arvot. Tässä on yksinkertainen esimerkki avaa navigointi:
navigation.okayNav (openInvisibleNav ');
Kaikki nämä koodit on dokumentoitu hyvin GitHub repo joka sisältää myös käsikirjoituksen lataamisen. Jos haluat CDN-reitin, voit käyttää sitä myös RawGit-linkki lisätä tämän komentosarjan suoraan GitHubista.
OkayNav on suuri pienille sivustoille jotka hyötyvät progressiivisesta navigointitekniikasta. Mutta jos olet vielä epävarma siitä, miten tämä toimii, tutustu CodePen-demoon, jossa näkyy, mitä tämä pieni plugin voi tehdä.
