Free Press

Meidän on myönnettävä, että elämme nykyään mobiilimaailmassa. Jopa Google on siirtynyt mobile-first-indeksiin, mikä tarkoittaa, että Google aikoo asettaa verkkosivustosi paremmuusjärjestykseen mobiilisisällön merkityksellisyyden ja UX:n perusteella.

Mobiilinavigointisi on oltava kunnossa riippumatta siitä, millaista verkkosivustoa tai sovellusta työstät. Silti responsiivisen valikon luominen mobiililaitteille on hankala tehtävä – se on oikeastaan jongleerausta sekä toiminnallisuuden että mittasuhteiden välillä. CSS-mobiilivalikon on oltava tiivis, sitä on helppo napauttaa ja sen on toimittava monissa eri näytön koossa.

Localyticsin mukaan 21 prosenttia käyttäjistä hylkää mobiilisovelluksen käytettyään sitä vain kerran. Tähän on monia syitä, mutta turhautuminen huonoon navigointiin on listan kärjessä. Ihmiset suosivat helppoja asioita; he eivät halua monimutkaisia käyttöliittymiä.

Yksinkertainen, hyvin suunniteltu CSS-mobiilivalikko on välttämätön, jos haluat rakentaa navigointikokemuksen, jonka kanssa käyttäjien on helppo olla vuorovaikutuksessa riippumatta siitä, missä he ovat ja mitä laitetta he käyttävät.

Tässä wpDataTables-tiimimme luomassa artikkelissa näytetään hienoja esimerkkejä erilaisista CSS-mobiilivalikko-ideoista, joita voit kokeilla omilla verkkosivuillasi tai sovelluksellasi. Lue lista eteenpäin!

Esimerkkejä CSS-mobiilivalikoista

Sinun ei tarvitse keksiä pyörää uudelleen tai omistaa erityisosaamista saadaksesi responsiivisen valikkosuunnittelun. Mutta sinun on ymmärrettävä, että käyttäjäkokemus on etusijalla ylivoimaisesti.

Hyvän näköinen on tietenkin tärkeää, mutta valikoissa on ensin varmistettava, että ne ovat käytännöllisiä ja että navigointirakenteessa on järkeä.

Onko järkevää, että sinulla on satoja valikkolinkkejä jokaiselle sivustosi sivulle? Ei. Onko järkevää tehdä valikkokohdista niin pieniä, etteivät niitä voi napauttaa muut kuin ihmiset, joilla on pienet sormet? Ei. Nämä ovat välttämättömiä näkökohtia, vaikkakaan ne eivät onneksi ole rakettitiedettä.

Alhaalla on luettelo esimerkkejä, jotka osoittavat, miten luoda responsiivisia mobiilivalikoita, jotka toimivat hyvin kaikentyyppisille mobiilikäyttäjille. Jokainen niistä on CSS-mobiilivalikko, joka takaa asianmukaisen responsiivisen suunnittelun monille eri laitetyypeille.

Mobiilivalikko – CSS

Kun siirrät elementtejä isolta näytöltä pienelle näytölle, joudut tekemään muutamia kompromisseja. Useimmiten suunnittelijat haluavat välttää näitä kompromisseja ja pyrkivät saamaan universaalin muotoilun, jota voi käyttää helposti kaikilla näytön kooilla.

Tällaisen koko näytön kokoisen valikon käyttäminen voi olla mahtavaa, koska se näyttää ja tuntuu samalta myös tietokoneilla, puhelimilla ja tableteilla.

Perusteinen responsiivinen ”kolmirivinen” valikko (CSS & jQuery)

Tässä opetusohjelmassa saat selville, miten voit nopeasti koodata responsiivisen CSS-mobiilivalikon. Tarvitset myös jQueryn käyttöä, mutta älä lannistu, se on hyvin pieni osa koodia.

CSS-Only Dark Menu

Jos haluat saada hyvin yksinkertaisen navigointivalikon, kannattaa kokeilla tätä opasta. Palkki on vaakasuora ja siinä on klassiset pudotusvalikot, kunnes ikkuna käy tarpeeksi pieneksi.

Tämän responsiivisen taitekohdan jälkeen navigoinnista tulee koko näytön kokoinen mobiilivalikko, joka näyttää hyvältä.

Animoitu esteetön navigointi

Tässä esitellään ympyränmuotoinen navigointivalikon kuvake, joka muuttuu ilahduttavasti animoiduksi, kun sitä napsautetaan.

Responsiivinen painonappinavigaatio

Tämä CSS-mobiilivaihtoehtoinen navigointivalikko tukee sisäkkäinrakentamista erilaisilla painonappityyleillä. Siinä on erilaisia siirtymäefektejä, ja se voidaan helposti lisätä mihin tahansa ulkoasuun.

Morphing Mobile Hamburger Navigation With JavaScript And CSS3

Katso tätä mobiilinavigointikonseptia, jos haluat valikon, joka on helppokäyttöinen ja käyttäjille tuttu.

Monitasoinen responsiivinen valikko

Tässä opetusohjelmassa keskitytään jQueryyn ja CSS:ään luodaksesi 3-tasoista syvää pudotusvalikkoa. Siistiä tässä on se, että valikko on täysin responsiivinen ja se voi kutistua kaikenlaisille laitteille sopivaksi.

3D Responsiivinen mobiilivalikkopalkki

Jos etsit CSS-mobiilivalikkoa, joka toimii loistavasti myös työpöydällä, tämä on hyvä valinta. Työpöydän koossa siinä on vaakasuora lista valikkokohteita 3D-efekteillä, ja mobiilikokoa käytettäessä siitä tulee vankka responsiivinen mobiilivalikko.

Sileä responsiivinen pudotusvalikko – Ylälaatikko

Tässä opetusohjelmassa opit, miten luodaan sileämpi paljastusmobiilivalikko, joka käyttää CSS3:aa ja jota ei animoida JavaScriptissä. Kun napsautat valikkokuvaketta, se tuo esiin pudotusvalikkotyylin, joka näyttää hyvältä ja voi toimia hyvin millä tahansa laitteella, joka sinulla on mielessäsi.

Smooth Fade

Häivytettävät navigointivalikot ovat suosittuja ja niitä on todella helppo luoda. Ne toimivat käyttämällä CSS-luokkia, jotka muuttavat valikon koko sivun kokoiseksi käyttöliittymäksi, joka sopii erityisesti pienille näytöille.

Mobiilivalikon animaatio

Tässä mobiilivalikkosuunnittelussa saat upean animaatioefektin, joka saa sen näyttämään erikoiselta. Hampurilaisvalikon kuvake on tarkoituksella sijoitettu keskelle, jotta se sopii sekä oikea- että vasenkätisille käyttäjille.

Bootstrap Nav bar

Tässä mobiilivalikkosuunnittelussa on vaikutteita suositusta etusivun komponenttikirjastosta Bootstrapista. Se erottuu edukseen siinä, että siinä ei käytetä lainkaan JavaScriptiä – vain HTML:ää ja CSS:ää.

Responsive CSS Only Header Navigation – Luxbar

Luxbar on CSS-kirjasto, jota käytetään responsiivisen, mobiiliystävällisen otsikkonavigaation luomiseen, joka on täysin muokattavissa eri CSS-luokkien avulla. Vain muutamalla hienosäädöllä voit saada haluamasi CSS-mobiilivalikon.

Valikko vieritystehosteilla

Tämä on mobiilivalikko, jossa on hämmästyttäviä vieritys- ja hover-tehosteita. Se sopii erinomaisesti käyttäjäkokemuksen parantamiseen interaktiivisella verkkosivustolla.

Responsiivinen litteä valikko

Tässä saat responsiivisen litteän valikon, jossa on kaksi alavalikkoa. Se sopii täydellisesti laajojen kategorioiden järjestämiseen.

Yksinkertainen responsiivinen navigointi

Tämän opetusohjelman avulla saat hyvin yksinkertaisen lähestymistavan, joka auttaa sinua rakentamaan responsiivisen valikon nollasta alkaen CSS3:n avulla. Se on hyvä aloitus, kun haluat oppia suunnittelemaan valikon pienemmille mobiilinäytöille.

Mobiilivalikon suunnittelu 3

Tässä CSS-mobiilivalikossa on erilaisia animaatioefektejä, jotka tekevät valikosta siistin näköisen. Efektit ovat nopeita, jotta käyttäjät eivät tule kärsimättömiksi. Yhdessä navigointivalikon kanssa voit jopa lisätä erilaisia toimintopainikkeita.

Pure CSS Mega Menu

Online-lehtiteemoissa käytetään usein megavalikoita artikkelien saamiseksi valikoihin. Nämä CSS-mobiilivalikkotyypit näyttävät hyvältä ja toimivat erittäin hyvin tietyissä tilanteissa.

Teksturoitu responsiivinen mobiilipudotusvalikko

Tämä on teksturoitu responsiivinen pudotusvalikko, joka voi ottaa olemassa olevan monitasoisen valikon ja muuttaa sen siistiksi pudotusvalikoksi älypuhelimille.

Puhdas pudotusvalikko Toggle

Mobiilinavigoinnin on oltava yksinkertaista kaikille käyttäjille. Jos haluat saavuttaa tämän, kokeile tätä pudotusvalikkoa, joka on tehty vain CSS:llä.

Responsive Navigation Mobile Menu Toggle

Tämä navigointivalikko on varsin suosittu mobiilisovelluksissa. Tunnettua hampurilaisvalikon kuvaketta käytetään yhdessä yksinkertaisen muotoilun kanssa. Kokeile sitä ja katso, onko tämä sitä, mitä tarvitset.

Multi-level Toggle Responsive Navigation Menu using Pure CSS

Tämä on siisti CSS-mobiilivalikko, jossa on käyttäjäystävällinen navigointi ja se sopii kaikille mobiililaitteille.

Apple-tyylinen mobiilivalikko

Tämä mobiilivalikko on saanut inspiraationsa Applen tekemästä valikosta, ja se on sekä tyylikäs että toimiva.

Perusjoukkoinen responsiivinen valikko

Tämä on yleinen navigointivalikko, joka putoaa alas ylhäältä. Se on tehty HAML:lla ja SCSS:llä, jossa on hieman JavaScriptiä.

Puhdas CSS-mobiiliyhteensopiva responsiivinen pudotusvalikko

Tarkista tämä CSS-mobiilivalikko, joka muuttuu helposti vaihdettavaksi pudotusvalikoksi tietyn taukopisteen jälkeen. Se on siisti, yksinkertainen ja tehokas.

Päätteeksi nämä CSS-mobiilivalikkoesimerkit

Johtopäätöksenä voidaan todeta, että sivustollesi tai sovelluksellesi sopivan CSS-mobiilivalikon löytäminen on toimintaa, jota et voi ohittaa. Valikko on yksi ensimmäisistä kohteista, joiden kanssa käyttäjä on vuorovaikutuksessa, ja haluat, että hän nauttii siitä.

Hyvän ensivaikutelman luomisen lisäksi oikein toteutettu mobiilivalikko varmistaa kestävän käytettävyyden ja estää käyttäjiä hylkäämästä laivaa turhautumisen vuoksi.

Jos nautit tämän artikkelin lukemisesta CSS-mobiilivalikkoesimerkkien parissa, sinun kannattaa lukea myös nämä:

• Vaikeita CSS-kuvahover-efektejä, joita voit käyttää verkkosivuillasi
• CSS-taulukoita ja niiden koodia, joita voit käyttää
• Sovitetun WordPress-otsikon opas: Helppoja tapoja luoda täydellisiä otsikoita