Stvorite pametniji odgovarajući izbornik za navigaciju pomoću ovog dodatka jQuery
Svaka moderna web lokacija treba a odgovarajući izgled i a upotrebljiva navigacija. To je dano.
No, izbornici hamburgera mogu ići tako daleko i oni radikalno mijenjati upotrebljivost za različite veličine zaslona. Bolji način da to riješimo je progresivno skrivanje veza s dodatkom kao što je OkayNav.
Ovaj besplatni jQuery dodatak dodaje vrlo jednostavnu značajku izbornika na bilo koju stranicu iskriva navigacijske stavke, na temelju različitih prikaza. Na taj način korisnici pametnih telefona imaju jedan izbornik hamburgera, ali korisnici tableta mogu vidjeti i nekoliko veza.
Prema zadanim se postavkama oslanja na a element i a dugačak neuređen popis. Do sada mislim da ovaj dodatak ne podržava višedijelne dropdown-ove, ali ako znate nešto o jQuery-u, možete to sami dodati.
OkayNav je vrlo jednostavan i to je namijenjene jednostavnijim web-lokacijama koji imaju samo nekoliko navigacijskih veza. Ove veze polako se sakrijte iza off-screen izbornika nakon što su pogodili određeni prikaz i više se veza skriva što je preglednik manji.
Morat ćete zamotajte neuređeni popis u navigacijskom elementu i dati mu određeni ID. Zatim, možete ciljajte cijelu navigaciju s okayNav () funkcionirati ovako:
var navigation = $ ('# nav-main'). okayNav (); Napominjemo da je ovo samo najjednostavnije postavljanje bez prilagođenih značajki. Možeš raditi više od desetak prilagođenih opcija ugrađena u ovu biblioteku za kontrolu stila ikona, animacije izbornika, uklanjanja poteza i funkcija povratnog poziva.
Možete čak i pozvati izbornik otvoriti / zatvoriti po volji prosljeđivanjem određenih vrijednosti funkciji. Evo jednostavnog primjera otvorite navigaciju:
navigation.okayNav ( 'openInvisibleNav');
Svi ovi kodovi dobro su dokumentirani u GitHub repo koja također uključuje i preuzimanje skripte. Ako više volite CDN rutu, možete koristiti i Veza RawGit dodati ovu skriptu izravno iz GitHub.
OkayNav je izvrsno za manja mjesta koji imaju koristi od tehnike progresivne navigacije. Ali, ako još uvijek niste sigurni kako ovo funkcionira, provjerite ovaj demo na CodePen-u koji prikazuje što ovaj mali dodatak može učiniti.
