Rakenna reagoiva Javascript-navigointivalikko

Reagoiva verkkosivujen suunnittelu (RWD) on vaikuttanut valtavasti siihen, miten teollisuutemme kehittää verkkosivustoja ja sovelluksia eri laitteille. Kaikkialla, missä katsomme, on uusia tekniikoita, työkaluja ja ajatuksia aiheesta. RWD tarjoaa meille työkalut, joita tarvitsemme luomaan mahtavia kokemuksia käyttäjiemme monille laitteille.

Ethan Marcotten alkuperäinen artikkeli hahmotellaan reagoivan suunnittelun kolme ydintä: nesteruudukot, joustavat kuvat ja mediakyselyt. Vaikka JavaScript ei ole yksi näistä RWD: n perustoista, se antaa kehittäjien parantaa vuorovaikutusta ja luoda rikkaampia kokemuksia käyttäjille. Monet ihmiset (myös minä) väittäisivät, että sisältömme pitäisi olla käyttäjien saatavilla ilman JavaScriptiä. Tässä juoksemme hienon rajan JavaScriptin käytön avulla verkkosivustojemme käyttökelpoisuuden parantamiseksi ja sisällön piilottamisen JS-seinän taakse.



  • Hanki lähdetiedostot tähän opetusohjelmaan

Jos vietät jonkin aikaa RWD-JavaScriptiä kirjoittaessasi, olet varmasti törmännyt työhösi Scott Jehl n Filament Group . Meille on onnekas, että on olemassa ihmisiä, jotka luovat ja jakavat työkaluja reagoivan suunnittelun eteenpäin viemiseksi.

Rakennetaan jotain

Minulla ei ole tarkkaa erittelyä siitä, kuinka paljon aikaa vietämme verkkosivustojemme kullekin osalle, mutta omistamme yleensä enemmän navigointiin (etenkin suurille sivustoille) kuin mikään muu näkökohta. Varmista, että meillä on oikea sisältö, varmista, että se on järjestetty hyvin, että siihen on helppo päästä, että se on helposti käytettävissä ja että se toimii kaikilla laitteilla, joihin voimme saada käsiinsä, voi olla aikaa vievää.

Käytä jQueryä selaimen epäjohdonmukaisuuksien helpottamiseen tapahtumasidonnaisuuksilla ja helpota luokkien vaihtamista DOM-elementteihin



Käytä jQueryä selaimen epäjohdonmukaisuuksien helpottamiseen tapahtumasidonnaisuuksilla ja helpota luokkien vaihtamista DOM-elementteihin

Joten helpottaaksemme elämäämme, rakennetaan reagoiva navigointi. Muutama tavoite tälle navigoinnille on:

  1. Toimivat hyvin pienillä ja suurilla näytöillä.
  2. Toimii Chromessa, Safarissa, Firefoxissa ja IE: ssä (8+).
  3. Toimii JavaScriptin kanssa tai ilman sitä.

Merkintä

Jos et käytä opetusohjelman tiedostoja, olisi nyt hyvä aika ainakin kopioida base.css . Koska keskitymme tässä JavaScriptiin, emme aio tarkastella paljon CSS: ää. Mene eteenpäin ja tartu index.html-tiedostoon opetusohjelman tiedostoista ja aloitetaan.

Kun olet tarkastellut HTML-koodia, saatat kysyä itseltäsi: miksi navi on alatunnisteessa? Hyvä kysymys. Yksi tavoitteistamme oli antaa navigointi muiden kuin JavaScript-käyttäjien saataville. Pienillä näytöillä, joissa ei ole JS: ää, käyttäjille emme halua, että navi syö sivun, kun he vierailevat sivulla. Joten otsikossa on linkki navigointiin, joka on olemassa (laajennettu) alatunnisteessa.



Pienikokoinen navigointi koskettamalla / napsauttamalla valikkokuvaketta paljastamaan kankaan ulkopuolinen elementti

Pienikokoinen navigointi koskettamalla / napsauttamalla valikkokuvaketta paljastamaan kankaan ulkopuolinen elementti

Pienin ensin

Reagoivien sivustojen luominen on yleensä paljon helpompaa, jos aloitat pienimmällä koolla ja työskentelet sieltä ylöspäin. Tässä vaiheessa sinulla pitäisi olla navigointi, joka toimii pienessä koossa, kun JavaScript ei ole käytössä, ja siinä on Näytä Nav linkki (joka ei tällä hetkellä tee mitään) tässä koossa, kun JavaScripti on käytössä, ja se toimii yksinkertaisen hiiren ollessa isoissa kooissa sekä JavaScriptin kanssa että ilman sitä.

Aloitetaan lisäämällä JavaScriptiä, jotta voimme hengittää vähän elämää pienikokoisessa navigoinnissa. Sinun on lisättävä viittauksia jQueryyn ja navigointikoodauskoodiin juuri ennen kohteen lopputunnistetta index.html .

Aloitamme seuraavista nav.js . Tämä luo objektin ( ikkuna. NAV ) sisältää kaiken koodin navigoinnin hallitsemiseksi:

(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();

sen sisällä Yllä oleva menetelmä sisältää kaikki tarvittavat asetukset. Tässä se kutsuu NAV.bindEvents , joka käyttää jQueryä sitomaan napsautustapahtuman mihin tahansa luokkaan js-togglesOffCanvas , soittaa NAV.toggle-menetelmä .

NAV. Vaihda lopettaa oletustapahtuman laukeamisen (joten emme seuraa linkkejä, joita emme halua) ja vaihtaa jQueryä mainMenu on auki luokka kehossa. Tämä asettaa CSS-säännöt siirtämään .mainNav div (tällä hetkellä sijoitettu ruudun vasemmalta puolelta) näkymään CSS-muunnosten avulla. Käyttämällä kääntää3d pakottaa laitteistokiihdytyksen WebKitiin. Joten voimme havaita, mikä on käytettävissä Modernizr ja käyttää kääntää3d (jos saatavilla) tasaisempiin animaatioihin.

Korostetaan peittävä div JavaScriptin avulla. Tämän div: n napsautustapahtuma on sidottu sulkemisvalikkotoimintoon

Korostetaan peittävä div JavaScriptin avulla. Tämän div: n napsautustapahtuma on sidottu sulkemisvalikkotoimintoon

Koska tapahtumamme on sidottu luokkaan js-togglesOffCanvas , sinun on lisättävä kyseinen luokka otsikossa olevaan show-linkkiin:

Show Nav

Sinulla pitäisi nyt olla navigointi, joka liukuu vasemmalta puolelta pienessä koossa, kun napsautat Näytä Nav linkki. Mutta odota - meillä ei ole tapaa sulkea navigointia nyt, kun olemme avanneet sen. Korjataan se.

Haluaisin painikkeen vasemmassa yläkulmassa samassa paikassa, jossa avoin linkki oli ennen kuin liu'utimme sen oikealle. Haluaisin myös pystyä napsauttamaan mitä tahansa navigoinnin oikealla puolella käynnistääksesi sulkemisen. Sen sijaan, että yritämme lisätä tapahtumakuuntelijaa kaikkeen oikealla puolella, pudotetaan päällekkäin ja kuunnellaan sen napsautuksia. Luo JS-muuttuja merkinnän tallentamiseksi ja lisääminen NAV-objektiimme:

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

Lisätään sitten rivi sen sisällä menetelmä lisätä tämä div DOM: iin. Tällä tavoin lisäämme tämän vain, jos meillä on JS ja off-canvas -navigointi saattaa olla aktivoitu.

miten matematiikkaa käytetään graafisessa suunnittelussa
init: function() { NAV.$clickOverlay.appendTo('body'); NAV.bindEvents(); }

Jos haluat nähdä divin, lisää luokka näkyvä: koska tämä elementti on näkymätön, tästä voi olla apua testauksessa. Nyt on hyvä aika lisätä sulkemispainike itse naviin. Lisää vain sisällä :

Close Menu

Nyt voimme sulkea navigoinnin - helpotuksen - vaikka emme voi päästä toisen tason linkkeihin tässä kankaan ulkopuolisessa tilassa. Voimme tehdä jotain asialle muutamalla muutoksella nav.js tiedosto. Lisää ensin tämä menetelmä EIVÄT OLE esine:

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

Lisää seuraavaksi napsautuskäsittelijä kohteelle .js-togglesSubMenu että NAV.bindEvents .

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

Lisää js-togglesSubMenu luokka mihin tahansa linkkiin, jonka pitäisi avata alivalikko

    sisään index.html .

  • Products

    Tämä navigointi on todella tulossa yhteen nyt, mutta jos hämäät, voit löytää muutaman ongelman. Ensimmäinen näkyy, kun kankaan ulkopuolinen navi on auki ja media kyselyn muutos saa asettelun siirtymään ei-kankaalle -asetteluun. Kaikki näyttää rikki: runko elementillä on edelleen luokka mainMenu on auki sovellettu. Lisäksi, jos avaat ja suljet alivalikon, hiiren osoittava vaikutus siihen suuremmalla koolla ei toimi - ongelma, jos katkaisupiste, jossa kyseinen kytkin tapahtuu, on kämmenlaitteen pysty- ja vaakatilojen välillä.

    Off-canvas -navigointi avautui ja laajeni täysin paljastamaan toisen tason valikon

    Off-canvas -navigointi avautui ja laajeni täysin paljastamaan toisen tason valikon

    Tällä hetkellä selaimet eivät käynnistä tapahtumia, kun mediakyselyt muuttavat tilaa. Mutta uudemmilla selaimilla on pääsy määrittämään, käytetäänkö tiettyä mediakyselyä matchMedia -sovellusliittymä . Tässä tapauksessa käytän kääriä, mediaCheck , jonka kirjoitin matchMedia API: n ympärille. Sen avulla voimme määrittää toimintoja, jotka suoritetaan, kun mediakysely aktivoituu tai lakkaa olemasta aktiivinen. Tätä varten lisäämme viittauksen mediaCheck-tiedostoon index.html-tiedostossa juuri ennen nav.js :

    Seuraavaksi meidän on lisättävä koodi kertoa mediaCheck mitä mediakyselyjä on katsottava ja mitä tehdä, kun ne muuttuvat. Lisää nämä rivit aloituksen loppuun toiminto () .

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

    Lisää nyt NAV. Selvä menetelmä. Poista mainMenu on auki luokan rungosta, elementtien nollaaminen siirtyi siirtymiseksi takaisin oikeille paikoilleen ja poistamalla elementteihin lisätyt jQuery-animaatiot inline-tyylit:

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

    Nyt, kun selaimen leveys kasvaa tai on yhtä suuri kuin 35 kappaletta mainMenu on auki luokka ja jQueryn sisäiset tyylit poistetaan.

    Laitteet myötäpäivään ylhäältä vasemmalta: Apple iPad, BlackBerry Z10 ja Apple

    Laitteet myötäpäivään ylhäältä vasemmalta: Apple iPad, BlackBerry Z10 ja Applen iPhone 5

    Toinen olemassa oleva ongelma on se, että siirtymiä, jotka luovat kankaan ulkopuolisen liukuvan animaation, käytetään edelleen, kun navi vaihtaa kontekstien välillä. Tämä johtaa melko rumaan siirtymiseen mediakyselyjen välillä. Voimme hyödyntää ensimmäisen numeron korjausta lisäämällä seuraavan menetelmän ikkuna. NAV :

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

    Muokkaa mediaCheck kutsu init-menetelmällä näin:

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

    Ja lopuksi, muokkaa riviä 80 base.css olla:

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

    Nyt siirtymät on sidottu enableAnimations luokka on läsnä, ja sitä luokkaa käytetään vain pienessä koossa.

    Huomaat kolmannen ongelman, jos yrität napsauttaa suurempaa tuotevalikkoa. Toisen tason navin tarkasteleminen tässä koossa on hoidettava leijuttimen avulla. Napsautuskäsittelijä, jota käytimme käsittelemään pienempää kokoa, laukaisee edelleen.

    Modernizrin käyttäminen antaa meille mahdollisuuden käyttää ominaisuuksien tunnistusta CSS- ja JavaScript-päätösten tekemiseen

    Modernizrin käyttäminen antaa meille mahdollisuuden käyttää ominaisuuksien tunnistusta CSS- ja JavaScript-päätösten tekemiseen

    Tämä on vähän hankalampaa. Kehitin alun perin ratkaisun, mutta sen avulla Adam Simpson ovat tehneet suuria parannuksia. Katso app.js opetusohjelman tiedostoissa ja näet menetelmän määritelmän APP.getState , joka ruiskuttaa elementin, jonka tunnus on KokoTesti sivulle. Tämä elementti poimii tyylit CSS: stä, jonka avulla se saa käsityksen siitä, minkä kokoinen selain on suhteessa määritettyihin mediahakukyselyihin. Lisää app.js viittaus index.html:

    CSS: stä löydät seuraavat ilmoitukset (tämä on vähän hakkerointi):

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

    APP.getState tarkistaa Fonttikoko Tämän elementin palauttamiseksi merkkijono (jonka voit määrittää): joko pieni tai suuri . Olemme kokeilleet muita lähestymistapoja, mutta tällä on paras selainten ja laitteiden välinen tuki. Tätä voidaan sitten käyttää JavaScriptin logiikan kulun hallintaan. NAV.toggleSubNav tulee:

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

    Nyt JavaScript-vaihtaminen tapahtuu vain pienissä kooissa.

    Johtopäätös

    Tässä vaiheessa sinulla pitäisi olla melko vankka navigointi, joka toimii melkein missä tahansa. Jos haluat syventää, suosittelen seuraamaan Scott Jehl , Brad Frost ja Sparkbox : Olemme vain raaputtaneet pintaa siitä, mitä voimme tehdä parantaaksemme reagoivia verkkosivustojamme JavaScriptin avulla.

    Sanat: Rob Tarr

    Tämä artikkeli on Rob Tarr ilmestyi alun perin nettilehti numero 245.