10 + Responsive-valikot ja navigointiratkaisut

Ennen kuin käytät lukemattomia tunteja vastaavan valikon työstämisessä, pysähdy ja ihmetelkaa, kuinka monet ihmiset todella käyttävät asiaa!

Katso omat testit ja analyysit artikkelin lopussa. Varmista, että käyttäjät käyttävät yhä vähemmän navigointikohteita.

Joten olemme jumissa otsikon navigoinnissa ...

1. PriorityNav.js

Tämä on hyvä ratkaisu. Ei piilota kaikkea painikkeen alla, mutta näyttää, mitä se voi riippua näkymän kokoa. Joskus kutsutaan Prioriteetti + Navigointi.

eli prioriteetti 1

Hyvin pieni JS (5kb), ei riippuvuuksia jQuerystä.

DEMO - LATAA

2. OkayNav

Toinen Priority + -ratkaisu. Kohteet katoavat pienemmällä katselualueella, mutta ne ovat edelleen käytettävissä piste-valikossa.

resp okaynav2

Myös vanilja Javascript (ei jQuery riippuvuutta). Tuolla on jQuery-versio että näyttää olevan joitakin lisäominaisuuksia (swipable).

DEMO - LATAA

3. FlexMenu

Prioriteetti + - tämä edellyttää jQueryä, mutta siinä on joukko vaihtoehtoja.

vast

DEMO - LATAA

4. Ensisijainen navigointi

Voit määrittää prioriteetin jokaiselle valikkokohteelle. Alhaisempi prioriteetti katoaa ensiksi.

tai prioriteetti navigointi

Tämä riippuu jQuerystä.

DEMO - LATAA

4. Leanest mahdollinen reaktiivinen valikko

Katso tämä artikkelin Dan. Se on helpoin tapa luoda yksinkertainen reagoiva valikko.

eli yksinkertainen

On olemassa noin 6 riviä JavaScript ja ei paljon CSS.

DEMO

5. SlickNav

SlickNav on perinteinen reagoiva valikko, joka asettaa kohteet pudotusvalikkoon "laatikkoon". Se on yksi kestävämpi ratkaisu käsittelee monitasoisia pudotuspisteitä ja sillä on vankka selaintuki.

tai slicknav 1

Se vaatii jQueryn.

DEMO & LATAA

6. WordPress Responsible -valikko

Kiistattomasti WordPressin suosituin drop-in nav -ratkaisu. Siinä on lukuisia vaihtoehtoja, mutta pohjimmiltaan on liukumäki-off-canvas -tyyppinen valikko.

Yli 90k-lataukset ja 5-tähtiluokitukset.

DEMO - LATAA

7. Mega-pudotus

Tämä tehokas ratkaisu on erittäin monimutkaisiin valikkoihin, joihin voi kuulua kuvia, kuvakkeita, useita tasoja. Työpöydällä - kaikki kohteet piilevät pudotusvalikosta, mutta laajennetaan näkymän avulla.

Mobiililaitteessa kohteita muokataan mobiilinäkymän täyttämiseksi.

resp mega pudotusvalikko

Tämä fiksu animaatio on CodyHouse-sivustosta. Valikossa tarvitaan jQuery.

DEMO - LATAA - TUTORIAL

8. Responsive Overlay

Tämä malli on ilmestynyt viime vuosina. Koko näyttöportti korvataan vieritettävällä valikolla. Sekä työpöydällä että matkapuhelimella on sama toiminta.

resp overlay

Tukeutuu jQueryyn. Jos haluat lisätä hienoja animoituja siirtymiä, katsokaa tätä esimerkkiä.

DEMO

9. CSS vain diaesivalikko

Osa opetusohjelmasta Smashing Magazine -sovelluksella käyttää tätä CSS: target selector -valikkoa valikon vaihtamiseen. Ei JavaScriptä näkyvissä.

tai vain css

Huomaa, että toiminnot ovat samat mobiililaitteille ja työpöydälle.

DEMO - TUTORIAL

10. Koko näytön peittovalikko

Kiva opetusohjelma ja demo toiselle overlay-valikkoratkaisulle. Jälleen nämä ratkaisut tarjoavat samat valikkotoimet työpöydälle ja mobiililaitteille.

eli koko näyttö

Demo riippuu jQuerystä - mutta se ei ole välttämätöntä, koska voit helposti korvata toggleClass-toiminnon jotain vanilja JS. Tietenkin jos käytät jo jQueryä, se ei ole ongelma.

DEMO - TUTORIAL

11. Hamburger-animaatiot

Tämä ei ole herkkä valikko sellaisenaan, mutta jos käytät hampurilaiskuvaketta, katsokaa näitä mahtavia vaihtaa animaatioita.

tai hampurilaisanimaatioita

Katso osoitteessa Codepen

Joten, mitä sinun pitäisi käyttää?

Olen uskonut, että mitä enemmän piilotat elementtejä - sitä vähemmän käytetään, minkä vuoksi suosittelen Priority + -tyyppisiä valikkoja (katso muuta vaihtoehtoa hampurilaiselle).

Tarkastellessani analyysiä yhdelle sivustolle (tämäntyyppisellä valikolla) näkyvät näkyvät kohteet napsautetaan paljon enemmän kuin pudotusvalikot ovat.

Ensisijaiset valikot ovat kuitenkin hyviä vain, jos sinulla on kourallinen korkeatasoisia valikkokohtia. Jos sinulla on enemmän vuorovaikutteinen sivusto, voit mennä off-canvas monitasoisia valikkoja.

Huomaa: Käyttäjät jättävät huomiotta kankaalle suunnatun navigoinnin

Responsive design jatkuu kehityksestäni minun alkuperäinen valikoima herkkiä valikoita. Paljon on muuttunut sen jälkeen, kun keskustelin ensin 3-linjan hampurilaisvalikosta. Minun alkuperäiset AB-testit osoitti, että sana "MENU" on käytetty huomattavasti enemmän kuin ns. hampurilaiskuvake.

Yli vuoden kuluttua toistin testin ja löysin että hampurilainen kuvake oli kiinni. Testi osoitti jotain paljon häiritsevämpää:

Mobiilikäyttäjät ovat vuorovaikutuksessa navigointielementtien kanssa paljon vähemmän kuin aiemmin.

Nyt on ollut kaksi vuotta AB-testiä ja ehdotan, että vuorovaikutus on laskenut entisestään. Ilman lukemattomia numeroita, nopea silmäys näihin kaavioihin näyttää sen.

Tämä on mobiilisessiot sivustossani vuodesta 2014. 2016 oli hyvä vuosi:

mobiilikävijätilastot

Tämä on mobiilivalikkopainikkeen napsautusten tai koskettamien määrä. Ne tallennetaan Google Analytics -tapahtumiksi:

mobiilivalikon tilastot

Ei ota neroa nähdäkseen käyttäjiä eivät napauta valikkopainikkeita paljon enää.

Viesti 10 + Responsive-valikot ja navigointiratkaisut ilmestyi ensin Sivustot voittoa varten.