Js mobiilivalikko. Mukautuva navigointi: minne valikko sijoitetaan älypuhelimiin

uusi pelaaja 16. tammikuuta 2017 klo 01:28 Sivuston mobiilivalikko. JQuery valikkolaajennus
  • jQuery

Tässä artikkelissa puhumme siitä, kuinka luodaan valikko sivuston mobiiliversiolle, joka sopii siihen responsiivinen muotoilu. Haluan kertoa sinulle JQuery-laajennuksesta nimeltä mmenu (voit ladata laajennuksen linkistä ja nähdä heti, miltä luomamme valikko näyttää). Käytämme laajennusta, koska oman pyörän rakentaminen joka kerta ei ole paras käytäntö. Meidän tapamme on käyttää parhaita käytäntöjä. Aloitetaan.

Yhteys. Kirjoittaja neuvoo käyttämään html 5 doctypeä, no, tässä mielestäni emme tarvitse vaihtoehtoja, käytämme sitä. Asiakirjamme pääosassa meidän on yhdistettävä itse JQuery ja kaksi laajennustiedostoa, yhdistämme:


Jos tarvitsemme on-canvas-valikon, meidän on sisällytettävä jquery.mmenu.oncanvas.min.js- ja jquery.mmenu.oncanvas.css-tiedostot. On-canvas on versio valikosta, jossa on position:absolute; leveys: 100 %; korkeus: 100%, mikä venyttää sen täyttämään koko näytön.

Valikon luominen Valikko luodaan hyvin yksinkertaisesti - kuten järjestämätön html-lista, laajennus tukee luetteloiden sisäkkäisyyttä. Kaikki tämä tulee kääriä nav-tunnisteeseen, jolla on tunnus.

  • Kotiin
  • Tietoja meistä
    • Historia
    • joukkue
    • Osoitteemme
  • Ota yhteyttä

Valikkojen tyylit 1. Jos laajennus kohtaa sisäkkäisen listan, se lisää ylätason li-tunnisteen sisään linkin siihen, joka on jo olemassa tämän li:n sisällä. Kun napsautat lisättyä linkkiä, alivalikko avautuu. Jos haluat tehdä valikon kohdasta linkin koko alivalikkoon pelkän kahden linkin sijaan, sinun on käytettävä span-tunnistetta.

  • Kotiin
  • Tietoja meistä
    • Historia
    • joukkue
    • Osoitteemme
  • Ota yhteyttä

2. Jotta alivalikko olisi aina näkyvissä, sinun on lisättävä siihen "Inset"-luokka.
3. Lisää "Valittu"-luokka valikkokohtaan korostaaksesi sitä.
4. Voit luoda erottimet seuraavasti

  • Verkkosivusto
  • Kotiin
  • Tietoja meistä
  • Ota yhteyttä

Javascript Tarvitset painikkeen, jota napsautettaessa valikko avautuu. Suosittelen käyttämään näitä hampurilaisia. Sieltä voit lukea kuinka niitä käytetään. Lyhyesti sanottuna sinun on ladattava hampurilaistyylit, yhdistettävä ne sivulle ja lisättävä suunnilleen seuraava html-koodi


Käytin Fixed-luokkaa asettaakseni position:fixed

Eli meidän mobiilivalikko se toimi, ei tarvitse muuta kuin yhdistää seuraava javascript-koodi sivulle:

$(document).ready(function() ( var $menu = $("#oma-valikko").mmenu(); var $icon = $("#mmenu-icon"); var API = $menu.data ("mmenu"); $icon.on("click", function() ( API.open(); )); ("on-aktiivinen" 100) ; $icon.on("click", function() ( API.open(); );

Ongelmia Menu-valikon käytössä kohtasin kaksi ongelmaa. Aluksi yritin kääriä koko kehon sisällön sisään div-tunniste, koska tämä on välttämätöntä laajennuksen toimimiseksi. Mutta tässä tapauksessa se jostain syystä piilotti kaiken sisällön, jonka käärin. Joten luovutin siitä. Jos et kääri kaikkea kehossasi diviin, laajennus tekee sen puolestasi. Mutta js-skriptien ja muiden kaksoisajossa tulee ongelmia. Sen jälkeen törmäsin heti toiseen ongelmaan: laajennus ei kääri mitään muuta kuin div. Eli jos sinulla on h1 suoraan rungon sisällä (body > h1), kuten esimerkiksi minulla oli, niin mmenu ohittaa ne ja käärii sen takana olevat divit. Ratkaisin tämän yksinkertaisesti käärimällä kaikki muut tagit diveihin, niin, että suoraan rungon sisällä on vain divejä jäljellä.

Tämä sai kaiken toimimaan minulle. Toivon, että tämä artikkeli oli hyödyllinen sinulle.

Tunnisteet: responsiivinen suunnittelu, asettelu, jquery-laajennukset

Shifter on JQuery-laajennus yksinkertaiseen liukuvaan mobiilinavigointiin. Shifter toimii tarkistamalla DOM:n kohdeelementit ja sitomalla niihin liittyvät tapahtumat.

SlickNav SlickNav on responsiivinen mobiilivalikkolaajennus jQuerylle, jossa on ominaisuuksia, kuten monitasoinen valikkotuki, yhteensopivuus eri selaimet, joustava, yksinkertainen merkintä ja hajoaa sulavasti ilman JavaScriptiä.

Menutron Menutron muuntaa navigointivalikot luettelosta valintavalikoksi, kun muutat selaimen kokoa. Valitse mobiililaitteissa valikko, joka nousee ylös oma elementti säätimet, mikä helpottaa kohteen valintaa.

Responsiivinen ja kosketusvalikko Opetusohjelma reagoivan ja kosketusystävällisen avattavan navigoinnin luomiseen. Tekniikka koostuu 3 pääosasta, jotka ovat: Yksinkertainen navigointipudotusvalikko HTML-pohjainen ja CSS, jotka toteuttavat Responsiivisuuden mediakyselyjen avulla ja tuovat ne saataville kosketusnäyttölaitteille erittäin pienellä jQuery-laajennuksella.

jQuery.mmenu MMENU on jQuery-laajennus, jolla voit luoda tyylikkäitä, sovelluksen näköisiä liukuvalikoita mobiilisivustollesi tai responsiiviselle sivustollesi.

Navobile JQuery Navobile on jQuery-laajennus, joka tekee mobiilinavigaatiosta helppoa. Navobile käyttää CSS:ää CSS3-käännösten soveltamiseen, mobiililaitteiden tunnistukseen ja navigointisijainnin vahvistamiseen.

FlexNav FlexNav on mobiiliensimmäinen esimerkki mediakyselyjen käyttämisestä ja mukavasta monitasoisesta valikosta, jossa on kosketustuki, osoitin avautuu ja välilehtinäppäimistön käytettävyys.

Responsiivinen Retina-Ready-valikko Mukautuva valikko, jossa on kolme asettelua erilaisia ​​kokoja selain. Valikko muuttuu automaattisesti yhdeksi kolmesta eri asettelusta selainikkunan koosta riippuen: "työpöytäversio" upotettu versio, kaksisarakkeinen tabletille optimoitu versio ja mobiiliversio, jossa on valikkolinkki navigoinnin näyttämistä ja piilottamista varten. pienet näytöt. Fonttia käytetään kuvakkeina, jotta vältytään epäselvältä erilaisia ​​resoluutioita.

slimMenu slimMenu on kevyt JQuery-laajennus, joka on tehty luomaan nopeaa ja monitasoiset valikot navigointi lennossa.SlimMenun avulla et enää kamppaile mediapyyntöjen kanssa responsiivisten valikoiden luomiseksi tai muiden raskaiden lisäosien kanssa luodaksesi monitasoisia alivalikoita. Se on 100 % mobiiliresponsiivinen.

Vaakasuora liukuva valikko Yksinkertainen vaakasuora diavalikko pikkukuvaruudukkoasettelulla, kuten alivalikon kohdalla. Valikko liukuu ulos ylhäältä, kun päävalikon kohtaa napsautetaan ja alikohdat katoavat. Kun toista kohtaa napsautetaan, alivalikon korkeus muuttuu. säädä ja sisältö häipyy sisään ja ulos, kun vaihdat.

Yksi alueista, joka vaatii erityistä huomiota kun kehitetään käyttöliittymäsuunnittelua mobiililaite, on navigointivalikko. Jos sivustolla on useita osioita tai sivuja, vaaditaan erityistaitoa kaikkien kohteiden sijoittamiseksi pieneen näytön resoluutioon. Hyvin usein navigointi muuttuu riviksi tai joukoksi painikkeita, jotka on pinottu päällekkäin. IN tämä oppitunti Tarkastellaan yhtä tapaa luoda navigointi jQueryn avulla.

Tehtävä

Alla olevat kuvakaappaukset näyttävät tilanteita mobiililaitteiden näytöillä olevien mallien kanssa. Jos navigaatiossa on 3 tai 4 painiketta, sen sijainti tallennetaan yhdelle riville. Mutta kun valikko sisältää 6 tai enemmän, siitä tulee ruma kasa.

Ratkaisu

Yksi yleinen tapa on muuntaa navigointi avattavaksi valikoksi valitun elementin perusteella. Tämän ratkaisun haittapuolena on, että valintaelementtiä ei voida tyylittää käyttämällä CSS:ää. Javascript-laajennukset, kuten Chosen, antavat sinun mukauttaa valikkoa tai joudut tyytyä avattavan luettelon järjestelmätyyleihin. Käyttäjä voi myös hämmentyä, kun valikkorakenteen laajakuvaversio muuttuu mobiililaitteen avattavaksi luetteloksi.

2) Lähtö lohkona

Toinen suosittu tapa- muodostaa valikon kohdat lohkoelementteinä kohteiden pystyasennossa. Tämä lähestymistapa kuitenkin vaatii suuri tila otsikossa. Jos navigointi sisältää useita painikkeita, käyttäjän täytyy selata pitkä lista päästäkseen tietoihin.

3) Valikkokuvake

JA viimeinen menetelmä jota käsittelemme opetusohjelmassamme, käyttää valikkokuvaketta navigoinnin mahdollistamiseksi. Tämä lähestymistapa säästää tilaa sivulla (mikä on tärkeää mobiililaitteelle) ja antaa täysi hallinta yli ulkonäkö käyttämällä CSS:ää. Valikkokuvake ja itse navigointi voidaan esittää sivuston yleisen tyylin mukaisesti.

Mobiilinavigointi käytössä jQueryn avulla

Tässä opetusohjelmassa näytämme sinulle, kuinka voit luoda navigoinnin pieni näyttö. jQuerya käytetään valikkokuvakkeen valmisteluun ja navigoinnin mahdollistamiseen. Ei ylimääräistä HTML-tunnisteet Navigointia ei tarvita käyttöä varten.

Käytämme ruokalistallamme yksinkertainen rakenne:

Menu vaatii JavaScript-koodi. Funktio valmistelee elementin . Kun vierailija napsauttaa #menu-icon-elementtiä, navigointi liukuu ulos.

jQuery(document).ready(function($)( /* Valmistele valikkokuvake */ $("#nav-wrap").prepend("Menu"); /* Ota navigointi käyttöön */ $("#menu-icon " ).on("napsautus", function())( $("#nav").slideToggle(); $(this).toggleClass("aktiivinen"); ));

Skriptin seurauksena dokumentin rakenne muuttuu:

Valikko

Demomme käyttää melko yksinkertaista CSS-koodia. Avainkohta on esitetty alla olevassa kuvassa. #menu-icon-elementillä on aluksi display:none-ominaisuus. Käyttää mediakyselyä #menu-iconin muuttamiseksi display:blockiksi, jos näkymän leveys on alle 600 pikseliä.

Tuloksena on navigointi esitetyllä toiminnallisuudella:

Nykyään jQuery-navigointivalikot ovat enemmän kuin vain tekstilohkoja, joissa on linkkejä. Kerroin kuinka käyttämällä JQueryä ja CSS3:lla voit luoda navigointivalikon, joka näyttää todella siistiltä.

JQueryn avulla voimme muuttaa navigointivalikon muotoon dynaaminen valikko. Vaikka tällä hetkellä voit käyttää vain CSS3:a dynaamisen navigoinnin luomiseen, JQuery tekee valikoista entistä tehokkaampia.

Lisäksi dynaamiset toiminnot, suunnittelulla on myös tärkeä rooli. Jos vain siksi, että tämän vierailijat näkevät ensimmäisenä, kun he tulevat sivustollesi.

Jos valikkoa ei voi esittää, se antaa käyttäjille huonon käyttökokemuksen. Hyvä muotoilu valikko puolestaan ​​parantaa sivustosi laatua ja antaa paras kokemus käyttäjien vuorovaikutuksia.

Tänään esittelen teille 30 hienoja esimerkkejä JQuery-navigointivalikko.

1. Pushy

Pushy on responsiivinen, ei-kanvas-navigointivalikko, joka käyttää CSS-muunnoksia ja -siirtymiä. Se toimii loistavasti mobiililaitteilla. Muista katsoa demo ja pidät siitä varmasti.

Demo | Lataa

2. Slinky


Tämä on toinen loistava jQuery-valikko kauniiden vieritettävien navigointiluetteloiden luomiseen. Hänen erottuva piirre on lähdetiedostojen pieni koko.

Demo | Lataa

3. jQuery-ponnahdusvalikko


Tämä on yksinkertainen reagoiva ponnahdusvalikko, jossa on erittäin mielenkiintoisia ominaisuuksia. Kun napsautat valikkokuvaketta, näkyviin tulee valikkoikkuna elementtikuvakkeineen. Katso demo.

Demo | Lataa

4. Liukupalkit


Slidebars on JQuery-kehys, jolla voit nopeasti ja helposti toteuttaa sovellustyylejä ilman, että se on sidottu kankaaseen. Slidebars käsittelee myös suunnan ja koon muuttamisen.

Demo | Lataa

5. jQuery Square -valikko


JQuery Menu, joka näyttää neliönmuotoisen animoidun verkkosivustovalikon JQueryn ja CSS3:n avulla. Varmista tämä katsomalla demo.

Demo | Lataa

6. Perspektiivisen sivunäkymän navigointi


Tämä jQuery-navigointivalikko muuttaa sivun 3D-valikoksi. Ideana on luoda design mobiilisovellus, jossa kun napsautat valikkokuvaketta, sivun sisältö siirtyy sivuun ja valikko tulee etualalle.

Demo | Lataa

7. SlickNav


Laajennus reagoivan mobiilin jQuery-valikon luomiseen, jossa on useita tasoja ja joustavia mutta yksinkertaisia ​​asetuksia. Yhteensopiva kanssa eri selaimet, navigointi näppäimistöllä on mahdollista.

Demo | Lataa

8. Valikko


jQuery-valikko sovelluksille, joissa on tai ei ole sidottu kankaalle ponnahdusikkuna-alikohdilla. Lukuisten vaihtoehtojen, lisäosien ja laajennusten ansiosta valikon mukauttaminen on mahdollista erittäin joustavasti.

Demo | Lataa

9. Sidr


jQuery-laajennus valikoiden luomiseen ja yksinkertainen lisäys mukautuvat toiminnot. Sidrin avulla voit luoda erilaisia ​​elementtejä verkkosivustosi sekä mukautuvat valikot.

Demo | Lataa

10. slimMenu


slimMenu on pieni jQuery-laajennus, joka auttaa sinua kehittämään reagoivia, monitasoisia navigointivalikoita. Siinä on hienoa, että sinulla voi olla useita erilaisia ​​valikoita, ja ne kaikki ovat täysin mukautuvia.

Demo | Lataa

11.HorizontalNav


jQuery-navigointivalikko, jonka avulla voit määrittää vaakasuuntainen valikko säiliön koko leveydeltä. Tämä laajennus tekee siitä erittäin helppoa. Lisäksi voidaan ottaa käyttöön tuki IE7:lle.

Demo | Lataa

12.FlexNav


Tämä on mobiiliensimmäinen esimerkki mediakyselyjen ja JavaScriptin käyttämisestä upean monitasoisen valikon luomiseen tuella kosketusnäytöt, hover-tehosteet ja näppäimistönavigointi.

Demo | Lataa

13. jQuery Menu-Aim


jQuery-valikko, joka käynnistää tapahtumat, kun hiiri vie hiiren osoittimen avattavan valikon kohdan päälle. Ihanteellinen responsiivisten pudotusvalikoiden, kuten Amazonin, luomiseen.

Demo | Lataa

14. SmartMenut


jQuery-valikkolaajennus, joka tarjoaa yksinkertaisen ja intuitiivisen tavan näyttää valikot. Luo reagoivia valikkoluetteloita. Toimii kaikilla laitteilla!

Demo | Lataa

15. Vaihde


Shifter on helppokäyttöinen mobiili-ensin jQuery-laajennus, jolla luodaan diavalikoita, jotka siirtyvät oikea puoli kun painat kytkinpainiketta. Määritettävänä on vain yksi maxWidth-vaihtoehto. Sen avulla voit säätää resoluutiota/suuntaa mobiililaitteille.

Demo | Lataa

16. Hampurilainen


Hamburger on jQuery-laajennus diavalikoiden luomiseen Android tyyliin Sovellus, jossa on ponnahdusvalikko näytön oikeassa reunassa. Kun valikko laajennetaan täysikokoiseksi, se peittää sisältöalueen, mutta ei toimintopalkin kanssa.

Demo | Lataa

17. Focuss


Focucss on jQuery-navigointivalikko, joka luo ei-kanvas-sivupalkkivalikon hienoilla sumennusominaisuuksilla, jotka voivat auttaa kiinnittämään käyttäjien huomion sivuston pääosiin ja tekemään vähemmän havaittavista osista vähemmän havaittavia.

Demo | Lataa

18. Laatikko


Drawer on jQuery-laajennus, jolla luodaan reagoiva, animoitu valikko, joka ponnahtaa esiin näytön reunasta, kun sitä napsautetaan. Samanlaisia ​​ominaisuuksia olet ehkä nähnyt Android-sovelluksissa.

Demo | Lataa

19.Päivävalikko


Datmenu - premium jQuery reagoiva valikko Kanssa erilaisia ​​toimintoja CSS3-animaatioita. Tämän laajennuksen hienoa on kyky täysi räätälöinti käyttämällä js-asetuksia.

Demo | Lataa

20. jPanelMenu


jPanelMenu on kaunis ja moderni jQuery-valikko, jonka avulla voit luoda paneelinavigointivalikon CSS3-animaatiosiirtymäominaisuuksilla. jPanelMenu-tyyli muistuttaa mobiiliversiot Facebook ja Google. Laajennusta voidaan käyttää useissa mobiilisovelluksissa.

Demo | Lataa

21. Lennon sivuvalikko


Fly Side Menu on hieno navigointivalikkolaajennus, joka käyttää luomiseen CSS3:a sivuvalikko 3D-muunnoksilla ja siirtymillä.

Demo | Lataa

22. PageScroll jQuery Menu Plugin


PageScroll on mukautettu mobiili jQuery-valikko, jota suositellaan käytettäväksi kaikilla verkkosivustoilla sekä aloitussivuilla.

Demo | Lataa

23.DD-kuvakevalikko


DD Icon Menu on jQuery-laajennus, jonka avulla voit luoda pystysuuntaisen valikon kuvakkeista, jotka sijaitsevat ruudun reunassa ja valikon alakohdilla, jotka laajenevat osoitinta liikuttaessa.

Demo | Lataa

24. JQuery Mobile Date Navigation


jQuery-valikko, jonka avulla voit navigoida päivämäärän mukaan valitulla alueella (viikko, kuukausi tai vuosi). Ihanteellinen tietojen pyytämiseen AJAX-puheluiden avulla.

Demo | Lataa

25. Navobile


jQuery-navigointivalikkolaajennus, joka tekee mobiilivalikoiden luomisesta erittäin helppoa. Käyttää CSS-siirtymiä valikon sijainnin määrittämiseen mobiililaitteissa.

Demo | Lataa

26. Monitasoinen painovalikko


Multi-Level Push Menu on Javascript-kirjasto, jonka on luonut MARY LOU Codropsista. Se luo monitasoisia valikoita, jotka liukuvat ulos näytön vasemmasta reunasta ja siirtävät sisältöä oikealle.

Demo | Lataa

Yksi erityistä huomiota vaativista alueista mobiililaitteen käyttöliittymäsuunnittelua kehitettäessä on navigointivalikko. Jos sivustolla on useita osioita tai sivuja, vaaditaan erityistaitoa kaikkien kohteiden sijoittamiseksi pieneen näytön resoluutioon. Hyvin usein navigointi muuttuu riviksi tai joukoksi painikkeita, jotka on pinottu päällekkäin. Tässä opetusohjelmassa tarkastellaan yhtä tapaa luoda navigointi jQueryn avulla.

Tehtävä

Alla olevat kuvakaappaukset näyttävät tilanteita mobiililaitteiden näytöillä olevien mallien kanssa. Jos navigaatiossa on 3 tai 4 painiketta, sen sijainti tallennetaan yhdelle riville. Mutta kun valikko sisältää 6 tai enemmän, siitä tulee ruma kasa.

Ratkaisu

Yksi yleinen tapa on muuntaa navigointi avattavaksi valikoksi valitun elementin perusteella. Tämän ratkaisun haittapuolena on, että Select-elementtiä ei voida tyylittää CSS:n avulla. Javascript-laajennukset, kuten Chosen, antavat sinun mukauttaa valikkoa tai joudut tyytyä avattavan luettelon järjestelmätyyleihin. Käyttäjä voi myös hämmentyä, kun valikkorakenteen laajakuvaversio muuttuu mobiililaitteen avattavaksi luetteloksi.

2) Lähtö lohkona

Toinen suosittu tapa on muodostaa valikkokohteet lohkoelementeiksi, joissa kohteet on järjestetty pystysuoraan. Tämä lähestymistapa vie kuitenkin paljon otsikkotilaa. Jos navigointi sisältää useita painikkeita, käyttäjän täytyy selata pitkä lista päästäkseen tietoihin.

3) Valikkokuvake

Ja viimeinen menetelmä, jota tarkastelemme opetusohjelmassamme, on valikkokuvakkeen käyttäminen navigoinnin mahdollistamiseksi. Tämä lähestymistapa säästää tilaa sivulla (mikä on tärkeää mobiililaitteelle) ja antaa täyden hallinnan ulkoasuun CSS:n avulla. Valikkokuvake ja itse navigointi voidaan esittää sivuston yleisen tyylin mukaisesti.

Mobiilinavigointi käytössä jQueryn avulla

Tässä opetusohjelmassa näytämme, kuinka luodaan navigointi pienelle näytölle. jQuerya käytetään valikkokuvakkeen valmisteluun ja navigoinnin mahdollistamiseen. Muita HTML-tageja ei tarvita, jotta navigointi toimisi.

Ruokalistamme käyttää yksinkertaista rakennetta:

Valikko vaatii JavaScript-koodin toimiakseen. Funktio valmistelee elementin . Kun vierailija napsauttaa #menu-icon-elementtiä, navigointi liukuu ulos.

jQuery(document).ready(function($)( /* Valmistele valikkokuvake */ $("#nav-wrap").prepend("Menu"); /* Ota navigointi käyttöön */ $("#menu-icon " ).on("napsautus", function())( $("#nav").slideToggle(); $(this).toggleClass("aktiivinen"); ));

Skriptin seurauksena dokumentin rakenne muuttuu:

Valikko

Demomme käyttää melko yksinkertaista CSS-koodia. Keskeinen kohta on esitetty alla olevassa kuvassa. #menu-icon-elementillä on aluksi display:none-ominaisuus. Käyttää mediakyselyä #menu-iconin muuttamiseksi display:blockiksi, jos näkymän leveys on alle 600 pikseliä.

Tuloksena on navigointi esitetyllä toiminnallisuudella:



LIITTYVÄT ARTIKKELI