Izradite odgovarajući navigacijski Javascript izbornik

Odzivni web dizajn (RWD) imao je ogroman utjecaj na to kako naša industrija razvija web stranice i aplikacije za različite uređaje. Kamo god pogledamo postoje nove tehnike, alati i razmišljanja o toj temi. RWD nam pruža alate koji su nam potrebni za stvaranje izvrsnih iskustava za mnoštvo uređaja koje naši korisnici imaju.

Izvorni članak Ethana Marcottea ocrtava tri temeljna dijela responzivnog dizajna: fluidne rešetke, fleksibilne slike i upiti za medije. Iako JavaScript nije jedan od tih temelja RWD-a, on programerima omogućuje poboljšanje interakcija i stvaranje bogatijih iskustava za korisnike. Mnogi ljudi (uključujući i mene) tvrdili bi da bi naš sadržaj trebao biti dostupan korisnicima bez omogućene JavaScript. Tu prolazimo kroz tanku liniju između upotrebe JavaScripta kako bismo učinili naše web stranice korisnijima i skrivanja sadržaja iza JS zida.

  • Dobiti izvorne datoteke za ovaj vodič

Ako potrošite neko vrijeme pišući JavaScript za RWD, sigurno ćete naići na rad Scott Jehl od Grupa žarnih niti . Sreća nam je što postoje takvi ljudi koji stvaraju i dijele alate koji pomažu prilagodljivom dizajnu naprijed.



Izgradimo nešto

Nemam određenu raščlambu koliko vremena provodimo na svakom odjeljku naših web stranica, ali navigaciji (posebno za velike web lokacije) uglavnom posvećujemo više nego bilo kojem drugom aspektu. Osiguravanje da imamo pravi sadržaj, osiguranje da je dobro organiziran, da je lako doći do njega, da je dostupan i da funkcije svih uređaja do kojih možemo doći mogu u najmanju ruku oduzimati vrijeme.

Koristite jQuery za jednostavno rješavanje nedosljednosti preglednika s vezama događaja i olakšajte prebacivanje klasa na DOM elemente

Koristite jQuery za jednostavno rješavanje nedosljednosti preglednika s vezama događaja i olakšajte prebacivanje klasa na DOM elemente

Dakle, da bismo si olakšali život, napravimo odgovarajuću navigaciju. Nekoliko je ciljeva za ovu navigaciju:

  1. Dobro raditi na malim i velikim ekranima.
  2. Za rad u Chromeu, Safariju, Firefoxu i IE (8+).
  3. Za rad s JavaScriptom ili bez njega.

Oznaka

Ako ne koristite datoteke iz vodiča, sada bi bilo sjajno vrijeme za barem kopiranje baza.css . Budući da je naš fokus ovdje JavaScript, nećemo puno gledati CSS. Samo naprijed i zgrabite datoteku index.html iz udžbeničkih datoteka i krenimo.

Jednom kada pogledate HTML, možda se pitate: zašto je nav u podnožju? Dobro pitanje. Jedan od naših ciljeva bio je učiniti navigaciju dostupnom korisnicima koji nisu JavaScript. Za korisnike na malim zaslonima bez JS-a ne želimo da navigacija pojede zaslon kad posjete stranicu. Dakle, u zaglavlju imamo vezu do navigacije koja postoji (proširena) u podnožju.

Navigacija u maloj veličini nakon dodirivanja / klika na ikonu izbornika za izlaganje elementa izvan platna

Navigacija u maloj veličini nakon dodirivanja / klika na ikonu izbornika za izlaganje elementa izvan platna

Najmanje najmanje

Općenito je puno lakše izgraditi responzivne web stranice ako započnete s najmanjom veličinom i od tamo radite. U ovom trenutku trebali biste imati navigaciju koja radi na malim veličinama s isključenim JavaScriptom, ima Prikaži Nav link (koji trenutno ne radi ništa) u ovoj veličini kada je omogućen JavaScript i radi jednostavnim lebdenjem na velikim veličinama s JavaScriptom i bez njega.

Počnimo dodavati JavaScript kako bismo udahnuli malo života maloj navigaciji. Morat ćete dodati reference na jQuery i navigacijski JavaScript neposredno prije završne oznake tijela index.html .

Započet ćemo sa sljedećim u nav.js . Ovo će stvoriti objekt ( prozor.NAV ) da sadrži sav kôd za kontrolu naše navigacije:

(function() { window.NAV = { $body: $('body'), $subMenus: $('.subMenu'), toggle: function(e) { e.preventDefault(); NAV.$body.toggleClass('mainMenu-is-open'); }, bindEvents: function() { $('.js-togglesOffCanvas').on('click', NAV.toggle); }, init: function() { NAV.bindEvents(); } } })(); NAV.init();

The u tome gore navedena metoda sadrži sve potrebne postavke. Evo poziva NAV.bindEvents , koji koristi jQuery za vezanje događaja klika na bilo što s klasom js-togglesOffCanvas , nazvati NAV.toggle metoda .

NAV.preklopiti zaustavit će pokretanje zadanog događaja (tako da ne slijedimo veze koje ne želimo) i upotrijebiti jQuery za prebacivanje mainMenu-is-open razred na tijelu. Ovo će postaviti CSS pravila za premještanje .glavniNav div (trenutno pozicioniran s lijeve strane zaslona) u pregled pomoću CSS transformacija. Koristeći prevesti3d forsira hardversko ubrzanje u WebKitu. Dakle, možemo otkriti što je dostupno pomoću Modernizr i koristiti prevesti3d (ako je dostupno) za uglađenije animacije.

Isticanje div sloja preko JavaScripta. Događaj klika na ovom div-u vezan je za akciju zatvaranja izbornika

Isticanje div sloja preko JavaScripta. Događaj klika na ovom div-u vezan je za akciju zatvaranja izbornika

Budući da je naš događaj vezan za nastavu js-togglesOffCanvas , morat ćete dodati tu klasu na vezu show u zaglavlju:

Show Nav

Sada biste trebali imati navigaciju koja klizi s lijeve strane na maloj veličini kada kliknete na Prikaži Nav veza. Ali pričekajte - nemamo načina zatvoriti navigaciju sada kad smo je otvorili. Popravimo to.

Htio bih imati gumb u gornjem lijevom kutu na istom mjestu na kojem je bila otvorena veza prije nego što smo je pomaknuli udesno. Također bih volio da mogu kliknuti bilo što s desne strane navigacije da pokrenem zatvaranje. Umjesto da pokušavamo dodati slušatelj događaja svemu s desne strane, ubacimo prekrivajući div i osluškujmo klikove na njega. Stvorite JS varijablu za pohranu oznaka i dodajte u naš NAV objekt:

window.NAV = { $clickOverlay: $(' '), …

Zatim ćemo dodati redak u u tome metoda za dodavanje ovog div-a u DOM. Na ovaj način dodajemo ovo samo ako imamo JS i možda je aktivirana navigacija izvan platna.

umjetnici pera i tinte 19. stoljeće
init: function() { NAV.$clickOverlay.appendTo('body'); NAV.bindEvents(); }

Ako želite vidjeti taj div, dodajte klasu vidljivo: budući da je ovaj element nevidljiv, ovo može biti korisno za testiranje. Sad je dobro vrijeme za dodavanje gumba za zatvaranje u samu navigaciju. Dodati samo unutar :

Close Menu

Sada možemo zatvoriti navigaciju - olakšanje - iako ne možemo doći do veza druge razine u ovom stanju izvan platna. U vezi s tim možemo učiniti nekoliko promjena u našem nav.js datoteka. Prvo dodajte ovu metodu u NISU objekt:

toggleSubNav: function(e) { e.preventDefault(); $(this).siblings('ul').stop().slideToggle('fast'); },

Zatim dodajte obradu klikova za .js-togglesSubMenu do NAV.bindEvents .

bindEvents: function() { $('.js-togglesOffCanvas').on('click', NAV.toggle); $('.mainNav').on('click', '.js-togglesSubMenu', NAV.toggleSubNav); },

Dodajte js-togglesSubMenu klase na bilo koju vezu koja bi trebala otvoriti podizbornik

    u index.html .

  • Products

    Ova se navigacija sada stvarno sastavlja, ali ako se zezate, možete pronaći nekoliko problema. Prva se prikazuje kada je nav-off izvan platna otvoren i kada promjena medijskog upita uzrokuje da se raspored prebaci na izgled koji nije izvan platna. Sve izgleda slomljeno: tijelo element još uvijek ima klasu mainMenu-is-open primijenjena. Također, ako otvorite i zatvorite podizbornik, efekt lebdenja na njemu na većoj veličini neće raditi - problem ako se točka prekida na kojoj se taj prekidač nalazi između portretnog i pejzažnog načina rada ručnog uređaja.

    Navigacija izvan platna otvorena je i potpuno proširena da bi se otvorio izbornik druge razine

    Navigacija izvan platna otvorena je i potpuno proširena da bi se otvorio izbornik druge razine

    Trenutno preglednici ne aktiviraju događaje kada se medijski upiti promijene. No noviji preglednici imaju pristup utvrđivanju primjenjuje li se određeni medijski upit putem API API matchMedia . U ovom slučaju koristit ću omot, provjera medija , koji sam napisao oko matchMedia API-ja. Omogućuje nam postavljanje funkcija za izvršavanje kada medijski upit postane, ili prestane biti aktivan. Da bismo to učinili, dodali smo referencu na mediaCheck u index.html neposredno prije nav.js :

    Dalje, morat ćemo dodati kôd za prepoznavanje provjera medija koje medijske upite gledati i također što učiniti kada se promijene. Dodajte ove retke na kraju init-a funkcija() .

    mediaCheck({ media: '(min-width: 35em)', entry: function() { NAV.clear(); } });

    Sada dodajte NAV.jasno metoda. Uklonite mainMenu-is-open klase iz tijela, resetiranje elemenata premještenih kako bi se navigacija vratila na njihova prava mjesta i uklanjanje umetnutih stilova jQuery animacije dodanih elementima:

    window.NAV = { $subMenus: $('.subMenu'), clear: function() { NAV.$body.removeClass('mainMenu-is-open'); NAV.$subMenus.removeAttr('style'); } …

    Sada, kad god širina preglednika postane veća ili jednaka 35ems, mainMenu-is-open klase i uklonit će se umetnuti stilovi iz jQueryja.

    Uređaji u smjeru kazaljke na satu od gore lijevo: Apple iPad, BlackBerry Z10 i Apple

    Uređaji u smjeru kazaljke na satu od gore lijevo: Apple iPad, BlackBerry Z10 i Appleov iPhone 5

    Sljedeće pitanje koje postoji je da se prijelazi koji stvaraju kliznu animaciju izvan platna i dalje primjenjuju kada se navigacija prebacuje između konteksta. To rezultira prilično ružnim prebacivanjem između medijskih upita. Na nadogradnji za prvi problem možemo se nadovezati dodavanjem sljedeće metode prozor.NAV :

    toggleAnimations: function() { if ( APP.getState() === 'small' ) { NAV.$body.addClass('enableAnimations'); } else { NAV.$body.removeClass('enableAnimations'); } },

    Izmijenite provjera medija pozvati init metodu ovako:

    mediaCheck({ media: '(min-width: 30em)', entry: function() { NAV.clear(); NAV.toggleAnimations(); }, exit: function() { NAV.toggleAnimations(); } });

    I na kraju, izmijenite redak 80 od baza.css biti:

    .enableAnimations .mainNav, .enableAnimations .mainContent, .enableAnimations .masthead, .enableAnimations .clickOverlay {

    Sada su prijelazi vezani za enableAnimations razred koji je prisutan, a taj se razred primjenjuje samo na malim veličinama.

    Treće izdanje primijetit ćete ako pokušate kliknuti na izbornik proizvoda veće veličine. Pregled navigacije druge razine u ovoj veličini trebao bi se odvijati lebdenjem. Obrađivač klikova koji smo primijenili za rješavanje manjih dimenzija još uvijek puca.

    Korištenje Modernizra daje nam način da koristimo otkrivanje značajki za donošenje CSS i JavaScript odluka

    Korištenje Modernizra daje nam način da koristimo otkrivanje značajki za donošenje CSS i JavaScript odluka

    Ovo je malo nezgodnije. Izvorno sam razvio rješenje, ali uz pomoć Adam Simpson su napravili velika poboljšanja. Pogledaj app.js u datotekama tutorijala i vidjet ćete definiciju metode za APP.getState , koji ubrizgava element s ID-om VeličinaTest na stranicu. Ovaj element preuzima stilove iz CSS-a koje koristi da bi dobio ideju o tome koja je veličina preglednika u odnosu na definirane medijske upite. Dodajte app.js referenca na index.html:

    U CSS-u ćete pronaći sljedeće izjave (ovo je pomalo hakiranje):

    #sizeTest { font-size: 10px; } @media (min-width: 30em) { #sizeTest { font-size: 30px; } }

    APP.getState provjerava veličina fonta ovog elementa za vraćanje niza (koji možete definirati): bilo mali ili velika . Isprobali smo druge pristupe, ali ovaj ima najbolju podršku za više preglednika / uređaja. To se zatim može koristiti za kontrolu logičkog tijeka našeg JavaScript-a. NAV.toggleSubNav postaje:

    toggleSubNav: function(e) { e.preventDefault(); if ( APP.getState() === 'small' ) { $(this).siblings('ul').stop().slideToggle('fast'); } }

    Sada će se prebacivanje JavaScript dogoditi samo na malim veličinama.

    Zaključak

    U ovom trenutku trebali biste imati prilično solidnu navigaciju koja će raditi gotovo bilo gdje. Ako se želite još detaljnije baviti, preporučio bih sljedeće Scott Jehl , Brad Frost i Iskra : samo smo ogrebali površinu onoga što možemo učiniti kako bismo poboljšali naše responzivne web stranice pomoću JavaScript-a.

    Riječi: Rob Tarr

    Ovaj članak od Rob Tarr izvorno pojavio u neto magazin izdanje 245.