Koostage tundlik Javascripti navigeerimismenüü

Tundlik veebidisain (RWD) on tohutult mõjutanud seda, kuidas meie tööstus arendab veebisaite ja rakendusi erinevatele seadmetele. Kõikjal, kuhu vaatame, leidub sellel teemal uusi tehnikaid, tööriistu ja mõtteid. RWD pakub meile tööriistu, mis on vajalikud paljude kasutajate jaoks paljude seadmete jaoks suurepäraste kogemuste loomiseks.

Ethan Marcotte'i originaalartikkel visandab reageeriva disaini kolm põhiosa: vooluvõrgud, paindlikud pildid ja meediumipäringud. Kuigi JavaScripti ei kuulu nende RWD aluste hulka, võimaldab see arendajatel tõhustada suhtlemist ja luua kasutajatele rikkamaid kogemusi. Paljud inimesed (ka mina) väidavad, et meie sisu peaks olema kasutajatele kättesaadav ilma JavaScripti lubamiseta. Siinkohal astume peene joone vahele JavaScripti kasutamise kaudu, et muuta meie veebisaidid paremini kasutatavaks, ja peidame sisu JS-i seina taha.

  • Hankige lähtefailid selle õpetuse jaoks

Kui veedate aega RWD jaoks JavaScripti kirjutamiseks, olete kindlasti selle tööga kokku puutunud Scott Jehl selle Hõõgniidi rühm . Meie jaoks on õnn, et sellised inimesed loovad ja jagavad tööriistu, mis aitavad reageerivat disaini edasi liikuda.

Ehitame midagi

Mul ei ole konkreetset jaotust selle kohta, kui palju aega me oma veebisaitide igas jaotises veedame, kuid üldiselt pühendame navigeerimisele (eriti suurte saitide jaoks) rohkem kui ükski teine ​​aspekt. Õige sisu tagamine, selle korralik korraldamine, hõlpsasti ligipääs, juurdepääsetavus ja funktsioonid kõigis seadmetes, mille kätte saame, võib olla pehmelt öeldes aeganõudev.

JQuery abil saate hõlpsalt brauseri vasturääkivusi sündmuste sidumiste abil lahendada ja muuta klasside vahetamine DOM-elementidele lihtsaks

JQuery abil saate hõlpsalt brauseri vasturääkivusi sündmuste sidumiste abil lahendada ja muuta klasside vahetamine DOM-elementidele lihtsaks

Ehitame oma elu lihtsustamiseks üles mõne reageeriva navigeerimise. Selle navigeerimise mõned eesmärgid on:

  1. Et hästi töötada väikestel ja suurtel ekraanidel.
  2. Chrome'is, Safaris, Firefoxis ja IE-s (8+) töötamiseks.
  3. JavaScripti abil või ilma töötamine.

Hinnalisand

Kui te ei kasuta õpetuse faile, oleks nüüd hea aeg vähemalt kopeerida alus.css . Kuna siin keskendume JavaScripti, ei hakka me CSS-i eriti vaatama. Minge edasi ja haarake fail index.html õpetusfailidest ja alustame.

Kui olete HTML-i vaadanud, võite endalt küsida: miks on jaluses olev nav? Hea küsimus. Üheks meie eesmärgiks oli muuta navigeerijate kasutajatele navigeerimine kättesaadavaks. Väikeste ekraanideta kasutajatel, kellel pole JS-i, ei soovi me, et navi lehte külastades ekraani ära sööks. Nii et päises on meil link navigeerimisele, mis on jaluses olemas (laiendatud).

Väikese suurusega navigeerimine pärast menüüikooni puudutamist / klõpsamist lõuendivälise elemendi paljastamiseks

Väikese suurusega navigeerimine pärast menüüikooni puudutamist / klõpsamist lõuendivälise elemendi paljastamiseks

Esiteks kõige väiksem

Reageerivate saitide loomine on üldiselt palju lihtsam, kui alustate kõige väiksema suurusega ja töötate sealt edasi. Siinkohal peaks teil olema navigeerimine, mis töötab väikeses suuruses, kui JavaScript on välja lülitatud, ja millel on Kuva nav link (mis praegu midagi ei tee) selles suuruses, kui JavaScripti on lubatud, ja töötab lihtsate suurte suurustega hõljumisega nii JavaScripti abil kui ka ilma.

Alustame JavaScripti lisamist, et puhata väikese suurusega navigeerimisele natuke elu. Peate lisama viited jQueryle ja navigeerimis JavaScripti vahetult enne index.html .

Alustame järgmistega aastal nav.js . See loob objekti ( aken.NAV ) sisaldab kogu navigeerimise juhtimiseks vajalikku koodi:

(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 selles meetod sisaldab kõiki vajalikke seadistusi. Siin see helistab NAV.bindEvents , mis kasutab jQuery klõpsamise sündmuse sidumiseks mis tahes klassiga js-togglesOffCanvas , helistada NAV.toggle meetod .

NAV. Lülita peatab vaikesündmuse käivitamise (nii et me ei järgi linke, mida me ei soovi) ja kasutab jQuery abil mainMenu on avatud klass kehal. See seab CSS-i reeglid .mainNav div (asub praegu ekraani vasakul küljel) CSS-i teisenduste abil vaade. Kasutamine tõlkima3d sunnib WebKitis riistvara kiirendama. Nii saame tuvastada, mis on saadaval Modernizr ja kasutada tõlkima3d (kui see on saadaval) sujuvamate animatsioonide jaoks.

Kihi div esiletõstmine JavaScripti kaudu. Selle div kliki sündmus on seotud menüü sulgemisega

Kihi div esiletõstmine JavaScripti kaudu. Selle div kliki sündmus on seotud menüü sulgemisega

Kuna meie üritus on seotud klassiga js-togglesOffCanvas , peate selle klassi lisama päises olevale lingile show:

Show Nav

Nüüd peaks teil olema navigeerimine, mis klõpsates vasakule küljele väikeses suuruses sisse libistab Kuva nav link. Kuid oodake - meil pole võimalust navigeerimist nüüd avada. Parandame selle.

Tahaksin, et vasakul ülaservas oleks nupp samas kohas, kus avatud link oli, enne kui libistasime selle paremale. Samuti sooviksin, et saaksin sulgemise käivitamiseks klõpsata mis tahes parempoolsel navigeerimisribal. Selle asemel, et proovida lisada sündmuste kuulaja kõigele, mis on paremal küljel, viskame ülekatte div ja kuulame sellel klikke. Looge JS-muutuja märgistuse salvestamiseks ja lisage meie NAV-i objektile:

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

Seejärel lisame reale rea selles meetod selle div lisamiseks DOM-i. Nii lisame selle ainult siis, kui meil on JS ja lõuendiväline navi võib olla aktiveeritud.

init: function() { NAV.$clickOverlay.appendTo('body'); NAV.bindEvents(); }

Kui soovite seda div näha, lisage klass nähtav: kuna see element on nähtamatu, võib see testimisel abiks olla. Nüüd on hea aeg sulgemisnupu lisamiseks navile endale. Lisa lihtsalt selle sees :

Close Menu

Nüüd võime oma navigeerimise sulgeda - kergendus -, kuigi me ei pääse selles lõuendivälises olekus teise taseme linkidele. Saame selles osas midagi teha, tehes paar muudatust nav.js faili. Esiteks lisage see meetod EI OLE objekt:

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

Järgmisena lisage saidile klõpsude käitleja .js-togglesSubMenu kuni NAV.bindEvents .

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

Lisage js-togglesSubMenu klass igale lingile, mis peaks avama alammenüü

    aastal index.html .

  • Products

    See navigeerimine on nüüd tõesti kokku saamas, kuid kui teete segadust, võite leida mõned probleemid. Esimene kuvatakse siis, kui lõuendiväline navi on avatud ja meediumipäringu muudatuse tõttu lülitatakse paigutus mitte-lõuendivälisele paigutusele. Kõik näib olevat katki: keha elemendil on endiselt klass mainMenu on avatud rakendatud. Samuti, kui avate alammenüü ja sulgete selle, siis suuremal suurusel hõljutus sellel ei toimi - probleem on siis, kui katkestuspunkt, millal see lüliti toimub, asub pihuseadme portree- ja maastiku režiimide vahel.

    Lõuendiväline navigeerimine avanes ja laienes täielikult, et kuvada teise taseme menüü

    Lõuendiväline navigeerimine avanes ja laienes täielikult, et kuvada teise taseme menüü

    Praegu ei käivita brauserid sündmusi, kui meediumipäringud muudavad olekut. Kuid uuematel brauseritel on juurdepääs kindlaksmääramiseks, kas konkreetse meediumipäringu kaudu rakendatakse matchMedia API . Sel juhul kasutan ümbrist, mediaCheck , mille kirjutasin matchMedia API ümber. See võimaldab meil seadistada funktsioone, mida käivitada, kui meediumipäring muutub aktiivseks või lakkab olemast. Selleks lisame vahetult enne index.html viite mediaCheckile nav.js :

    Järgmisena peame ütlemiseks lisama koodi mediaCheck milliseid meediumipäringuid vaadata ja mida teha ka siis, kui need muutuvad. Lisage need read initsiaadi lõppu funktsioon () .

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

    Nüüd lisage NAV.selge meetod. Eemalda mainMenu on avatud klassi kehast, elementide lähtestamine liikus, et navigeerida tagasi õigesse kohta, ja elementidele lisatud jQuery animatsioonide eemaldamine siseseid stiile:

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

    Nüüd, kui brauseri laius muutub suuremaks või võrdseks 35eemiga mainMenu on avatud klass ja jQuery tekstisisesed stiilid eemaldatakse.

    Seadmed päripäeva ülevalt vasakult: Apple iPad, BlackBerry Z10 ja Apple

    Seadmed päripäeva ülevalt vasakult: Apple iPad, BlackBerry Z10 ja Apple'i iPhone 5

    Teine probleem on see, et üleminekud, mis loovad lõuendivälise libiseva animatsiooni, rakendatakse endiselt siis, kui navi kontekstide vahel ümber lülitub. Selle tulemuseks on meediaküsimuste vahel üsna kole nihe. Esimese väljaande paranduse põhjal saame lisada järgmise meetodi aken.NAV :

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

    Muutke mediaCheck helistage init-meetodil nii:

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

    Ja lõpuks muutke rida 80 alus.css olla:

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

    Nüüd on üleminekud seotud enableAnimations klass on kohal ja seda klassi rakendatakse ainult väiksuse korral.

    Kolmandat probleemi märkate, kui proovite suuremate toodete menüül klõpsata. Selles suurusjärgus teise taseme navi vaatamist peaks hõljutama. Klõpsude haldur, mida kasutasime väiksema suurusega tegelemiseks, vallandab endiselt.

    Modernizri kasutamine annab meile võimaluse kasutada funktsioonide tuvastamist CSS-i ja JavaScripti otsuste tegemisel

    Modernizri kasutamine annab meile võimaluse kasutada funktsioonide tuvastamist CSS-i ja JavaScripti otsuste tegemisel

    See on natuke keerulisem. Algselt töötasin välja lahenduse, kuid abiga Adam Simpson teinud suuri parandusi. Vaata app.js õpetusfailides ja näete meetodi määratlust APP.getState , mis süstib elemendi ID-ga SizeTest lehele. See element võtab CSS-ist stiilid, mille abil saab aimu, kui suur on brauser määratletud meediumipäringutega võrreldes. Lisage app.js viide index.html-le:

    CSS-ist leiate järgmised deklaratsioonid (see on natuke häkkimine):

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

    APP.getState kontrollib fondi suurus selle elemendi tagastamiseks stringi (mille saate määratleda): kas väike või suur . Oleme proovinud muid lähenemisviise, kuid sellel on parim brauserite / seadmete tugi. Seejärel saab seda kasutada meie JavaScripti loogikavoo kontrollimiseks. NAV.toggleSubNav saab:

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

    Nüüd toimub JavaScripti ümberlülitamine ainult väikeste suuruste korral.

    Järeldus

    Sel hetkel peaks teil olema üsna kindel navigeerimine, mis töötab peaaegu kõikjal. Kui soovite edasi süveneda, soovitan järgida Scott Jehl , Brad Frost ja Süütekast : oleme kriimustanud ainult seda, mida saame JavaScripti abil oma tundlike veebisaitide täiustamiseks teha.

    Sõnad: Rob Tarr

    Selle artikli autor Rob Tarr ilmus algselt aastal netiajakiri väljaanne 245.