Hozzon létre egy érzékeny Javascript navigációs menüt

Reszponzív webdesign (RWD) óriási hatással volt arra, hogy iparunk hogyan fejleszt weboldalakat és alkalmazásokat különböző eszközökhöz. Mindenhol új technikák, eszközök és gondolatok merülnek fel a témában. Az RWD biztosítja számunkra azokat az eszközöket, amelyekre szükségünk van ahhoz, hogy fantasztikus élményeket nyújtsunk a felhasználók számos eszközéhez.

Ethan Marcotte eredeti cikke a reszponzív tervezés három alapvető elemét vázolja fel: folyékony rácsok, rugalmas képek és média lekérdezések. Noha a JavaScript nem tartozik az RWD alapjai közé, lehetővé teszi a fejlesztők számára, hogy fokozzák az interakciókat és gazdagabb élményeket teremtsenek a felhasználók számára. Sokan (köztük én is) azt állítanánk, hogy tartalmunknak elérhetőnek kell lennie a felhasználók számára a JavaScript engedélyezése nélkül. Itt haladunk egy jó határ között a JavaScript használatával, hogy webhelyeink használhatóbbá váljanak, és a tartalom elrejtése a JS fal mögé.

  • Szerezd meg a forrás fájlok ehhez az oktatóanyaghoz

Ha valamilyen időt tölt az RWD JavaScript-írásával, biztosan találkozik a munkájával Scott Jehl a Izzócsoport . Számunkra szerencsés, hogy vannak olyan emberek, akik olyan eszközöket hoznak létre és osztanak meg, amelyek elősegítik az adaptív tervezés előrehaladását.



Építsünk valamit

Nincs külön részletezésem arról, hogy mennyi időt töltünk webhelyeink egyes szakaszain, de általában többet fordítunk a navigációra (különösen a nagy webhelyek esetében), mint bármely más szempontot. A megfelelő tartalom biztosítása, a megfelelő szervezés, a könnyű hozzáférés, a hozzáférhetőség és az összes olyan eszköz működése, amelyre a kezünkbe kerülhetünk, enyhén szólva is időigényes lehet.

A jQuery segítségével könnyedén kezelheti a böngésző ellentmondásait az esemény-összerendelésekkel, és megkönnyíti az osztályok DOM elemekre váltását

A jQuery segítségével könnyedén kezelheti a böngésző ellentmondásait az esemény-összerendelésekkel, és megkönnyíti az osztályok DOM elemekre váltását

Tehát, hogy megkönnyítsük az életünket, készítsünk néhány érzékeny navigációt. Néhány cél ennek a navigációnak:

  1. Jól működni kis és nagy képernyőkön.
  2. Chrome-ban, Safari-ban, Firefox-ban és IE (8+) verzióban dolgozni.
  3. JavaScript-mel vagy anélkül dolgozni.

A jelölés

Ha nem az oktatóanyag fájljait használja, akkor most jó alkalom lenne legalább másolni alap.css . Mivel itt a JavaScript-re összpontosítunk, nem fogunk sokat vizsgálni a CSS-en. Folytasd, és fogd meg az index.html fájlt az oktató fájlokból és kezdjük.

Miután megnézte a HTML-t, felteszi magának a kérdést: miért van a navigáció a láblécben? Jó kérdés. Az egyik célunk az volt, hogy elérhetővé tegyük a navigációt a nem JavaScript felhasználók számára. A JS nélküli kis képernyős felhasználók számára nem szeretnénk, ha a navigációs rendszer felemésztené a képernyőt, amikor meglátogatják az oldalt. Tehát a fejlécben van egy linkünk a navigációhoz, amely létezik (kibővítve) a láblécben.

A navigáció kis méretben, miután megérintette / rákattintott a menü ikonra a vászonon kívüli elem megjelenítéséhez

A navigáció kis méretben, miután megérintette / rákattintott a menü ikonra a vászonon kívüli elem megjelenítéséhez

Először a legkisebb

Általában sokkal könnyebb reszponzív webhelyeket létrehozni, ha a legkisebb méretből indul ki, és onnan dolgozik. Ezen a ponton olyan navigációval kell rendelkeznie, amely kis méretben működik, a JavaScript ki van kapcsolva, és rendelkezik egy Mutasd a Nav link (amely jelenleg nem tesz semmit) ekkora méretben, amikor a JavaScript engedélyezve van, és egyszerű lebegéssel működik nagy méretben, JavaScript-sel és anélkül is.

Kezdjünk hozzá néhány JavaScript-et, hogy egy kis életet leheljünk a kis méretű navigációba. Közvetlenül hozzá kell adnia a jQuery és a navigációs JavaScript hivatkozásait a index.html .

A következőkkel fogunk kezdeni: nav.js . Ez létrehoz egy objektumot ( ablak.NAV ), hogy tartalmazza az összes kódot a navigáció vezérléséhez:

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

A benne A fenti módszer tartalmazza az összes szükséges beállítást. Itt hív NAV.bindEvents , amely a jQuery segítségével köti össze a kattintási eseményt a (z) osztályával js-togglesOffCanvas , hogy felhívja a NAV.toggle módszer .

NAV.toggle leállítja az alapértelmezett esemény indítását (tehát nem követjük a nem kívánt linkeket), és a jQuery segítségével kapcsolja a mainMenu-is-open osztály a testen. Ez beállítja a CSS-szabályokat a .mainNav div (jelenleg a képernyő bal oldalán található) CSS-transzformációk segítségével láthatóvá. Használata lefordítani3d hardveres gyorsítást kényszerít a WebKitben. Tehát a segítségével felismerhetjük, mi áll rendelkezésre Modernizr és használja lefordítani3d (ha van) simább animációkhoz.

Az overlay div kiemelése JavaScript segítségével. Az ezen a div-on található kattintási esemény a menü bezárásához kapcsolódik

Az overlay div kiemelése JavaScript segítségével. Az ezen a div-on található kattintási esemény a menü bezárásához kapcsolódik

Mivel rendezvényünk az osztályhoz van kötve js-togglesOffCanvas , hozzá kell adnia az osztályt a fejléc show linkjéhez:

Show Nav

Most már rendelkeznie kell olyan navigációval, amely a bal oldalról kis méretben csúszik be, amikor a gombra kattint Mutasd a Nav link. De várjon - most már nincs módunk bezárni a navigációt, miután megnyitottuk. Javítsuk ki.

Szeretnék egy gombot a bal felső sarokban ugyanott, ahol a nyitott link volt, mielőtt jobbra csúsztattuk volna. Azt is szeretném, ha bármire kattinthatnék a navigáció jobb oldalán a bezáráshoz. Ahelyett, hogy megpróbálnánk hozzáadni egy eseményhallgatót a jobb oldali részhez, dobjunk be egy átfedő div-t, és figyeljünk rá, hogy kattintottak-e rá. Hozzon létre egy JS változót a jelölés tárolásához, és adja hozzá a NAV objektumhoz:

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

Ezután hozzáadunk egy sort a benne metódus ennek a divnek a DOM-hoz való hozzáadásához. Így ezt csak akkor adjuk hozzá, ha van JS és lehet, hogy a vászonon kívüli navigáció aktiválva van.

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

Ha látni szeretné azt a div-et, adjon hozzá egy osztályt látható: mivel ez az elem láthatatlan, ez hasznos lehet a teszteléshez. Itt az ideje, hogy a bezárás gombot hozzáadjuk magához a navigációs eszközhöz. Add a csak benne :

Close Menu

Most bezárhatjuk navigációnkat - megkönnyebbülés -, bár ebben a vászonon kívüli állapotban nem juthatunk el a második szintű linkekhez. Néhány változtatással tehetünk erről nav.js fájl. Először adja hozzá ezt a módszert a ŐK NEM tárgy:

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

Ezután adjon hozzá egy kattintáskezelőt a következőhöz: .js-togglesSubMenu nak nek NAV.bindEvents .

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

Adja hozzá a js-togglesSubMenu osztály minden olyan linkre, amely megnyitja az almenüt

    ban ben index.html .

  • Products

    Ez a navigáció most igazán összeáll, de ha összevissza kavarod, találhatsz néhány kérdést. Az első akkor jelenik meg, amikor a vászonon kívüli navigáció meg van nyitva, és a média lekérdezés változása miatt az elrendezés áttér a nem vászon elrendezésre. Minden töröttnek tűnik: a test elemnek még mindig van osztálya mainMenu-is-open alkalmazott. Továbbá, ha megnyílik, majd bezár egy almenüt, akkor a nagyobb méretre mutató lebegő hatás nem fog működni - probléma, ha a kapcsoló töréspontja egy kézi eszköz álló és fekvő módja között van.

    A vászonon kívüli navigáció megnyílt és teljesen kibővült, hogy felfedje a második szintű menüt

    A vászonon kívüli navigáció megnyílt és teljesen kibővült, hogy felfedje a második szintű menüt

    Jelenleg a böngészők nem indítanak eseményeket, amikor a média lekérdezések megváltoztatják az állapotot. De az újabb böngészőknek van hozzáférésük annak meghatározásához, hogy egy adott média lekérdezést alkalmaznak-e a matchMedia API . Ebben az esetben használok burkolót, mediaCheck , amelyet a matchMedia API köré írtam. Lehetővé teszi olyan funkciók beállítását, amelyek végrehajtásra kerülnek, amikor egy média lekérdezés aktívvá válik, vagy ha leáll. Ehhez hozzáadunk egy hivatkozást a mediaCheck-re az index.html fájlban közvetlenül azelőtt nav.js :

    Ezután hozzá kell adnunk a kódot, hogy elmondhassuk mediaCheck milyen média lekérdezéseket kell nézni, és mit kell tennie, ha megváltoznak. Adja hozzá ezeket a sorokat az init végén funkció() .

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

    Most adja hozzá a NAV.tiszta módszer. Távolítsa el a mainMenu-is-open osztályt a törzsből, az elemek alaphelyzetbe állítása a navigáció jobb helyére történő visszavezetése érdekében, valamint az elemekhez hozzáadott jQuery animációk inline stílusok eltávolítása:

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

    Most, amikor a böngésző szélessége nagyobb vagy egyenlő lesz, mint 35 mainMenu-is-open osztály és a jQuery beillesztett stílusai eltávolításra kerülnek.

    Eszközök balra fentről az óramutató járásával megegyező irányban: az Apple iPad, a BlackBerry Z10 és az Apple

    Eszközök balra fentről jobbra: az Apple iPad, a BlackBerry Z10 és az Apple iPhone 5

    Egy másik létező kérdés az, hogy a vászonon kívüli csúszó animációt létrehozó átmenetek továbbra is alkalmazandók, amikor a navigáció kontextusok között vált. Ez elég csúnya elmozdulást eredményez a média lekérdezések között. A következő módszer hozzáadásával építhetünk az első probléma javítására ablak.NAV :

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

    Módosítsa a mediaCheck hívja be az init metódust, így:

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

    És végül módosítsa a 80. sort alap.css lenni:

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

    Most az átmenetek a enableAnimations osztály jelen van, és ezt az osztályt csak kis méretben alkalmazzák.

    Észre fogja venni a harmadik kérdést, ha megpróbál nagyobb méretre kattintani a termékek menüre. A második szintű navigációt ekkora méretben az egérrel kell kezelni. A kattintáskezelő, amelyet a kisebb méret kezelésére alkalmaztunk, még mindig lő.

    A Modernizr használata lehetővé teszi számunkra, hogy a funkciók észlelését felhasználjuk CSS és JavaScript döntések meghozatalához

    A Modernizr használata lehetővé teszi számunkra, hogy a funkciók észlelését felhasználjuk CSS és JavaScript döntések meghozatalához

    Ez kicsit bonyolultabb. Eredetileg kidolgoztam egy megoldást, de a Adam Simpson nagy fejlesztéseket hajtottak végre. Megnézi app.js az oktató fájlokban, és meglátja a APP.getState , amely egy elemet injektál ID azonosítóval SizeTest az oldalra. Ez az elem stílusokat vesz fel a CSS-ből, amelyek segítségével képet kap arról, hogy a böngésző mekkora méretű a meghatározott média lekérdezésekhez képest. Adja hozzá a app.js hivatkozás az index.html fájlra:

    A CSS-ben a következő deklarációkat találja (ez egy kis hack):

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

    APP.getState ellenőrzi a betűméret ennek az elemnek a karakterlánc visszaadásához (amelyet meghatározhat): vagy kicsi vagy nagy . Megpróbáltunk más megközelítéseket is, de ez biztosítja a legjobb böngésző / eszköz közötti támogatást. Ezt lehet felhasználni a JavaScript logikai folyamatának szabályozására. NAV.toggleSubNav válik:

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

    Most a JavaScript váltás csak kis méretnél fog megtörténni.

    Következtetés

    Ezen a ponton elég szilárd navigációval kell rendelkeznie, amely szinte bárhol működik. Ha további elmélyülni akar, ajánlom a követést Scott Jehl , Brad Frost és Sparkbox : csak a felületét kapkodtuk meg annak érdekében, hogy javítsuk az adaptív webhelyeinket a JavaScript használatával.

    Szavak: Rob Tarr

    Ez a cikk Rob Tarr eredetileg ben jelent meg net magazin 245. szám