El kell ismernünk, hogy ma már mobil világban élünk. Még a Google is áttért a mobil-első indexre, ami azt jelenti, hogy a Google a weboldaladat a mobil tartalom relevanciája és UX alapján fogja rangsorolni.
A mobil navigációdnak a helyén kell lennie, függetlenül attól, hogy milyen weboldalon vagy alkalmazáson dolgozol. A mobileszközökre reszponzív menü létrehozása azonban trükkös feladat – ez valójában egy zsonglőrködés a funkcionalitás és az arányok között. Egy CSS mobilmenünek feszesnek kell lennie, könnyen leütögethetőnek, és sokféle képernyőméretben kell működnie.
A Localytics szerint a felhasználók 21%-a elhagy egy mobilalkalmazást, miután csak egyszer használta azt. Ennek számos oka van, de a rossz navigáció miatti frusztráció a lista élén áll. Az emberek az egyszerű dolgokat kedvelik; nem akarnak bonyolult felületeket.
Egy egyszerű, jól megtervezett CSS mobilmenüre van szükség, ha olyan navigációs élményt szeretne létrehozni, amellyel a felhasználók könnyen tudnak interakcióba lépni, függetlenül attól, hogy hol vannak és milyen eszközt használnak.
Ez a wpDataTables csapatunk által készített cikk néhány remek példát mutat különböző CSS mobilmenü ötletekre, amelyeket saját weboldalán vagy alkalmazásán kipróbálhat. Olvasson tovább a listáért!
- Példák CSS mobil menükre
- Mobilmenü – CSS
- Basic Responsive “Three Line” Menu (CSS & jQuery)
- CSS-Only Dark Menu
- Animated Accessible Navigation
- Responsive Button Nav
- Morphing Mobile Hamburger Navigation With JavaScript And CSS3
- Multi-level Responsive Menu
- 3D Responsive Mobile Menu Bar
- Sima Responsive Dropdown Menu – Top Drawer
- Simulékony elhalványulás
- Mobil menü animáció
- Bootstrap Nav bar
- Rezponzív, csak CSS-t használó fejlécnavigáció – Luxbar
- Menü görgetési effektusokkal
- Rezponzív lapos menü
- Egyszerű reszponzív navigáció
- Mobil menü kialakítása 3
- Pure CSS Mega Menu
- Texturált reszponzív mobil legördülő menü
- Clean Dropdown Toggle
- Responsive Navigation Mobile Menu Toggle
- Multi-level Toggle Responsive Navigation Menu using Pure CSS
- Apple Style Mobile Menu
- Basic Responsive Menu
- Pure CSS Mobile-kompatibilis Responsive Dropdown Menu
- Ezek a CSS mobil menü példák lezárása
Nem kell újra feltalálnia a kereket, vagy különleges ismeretekkel rendelkeznie ahhoz, hogy reszponzív menüt tervezzen. De azt meg kell értenie, hogy a felhasználói élmény elsőbbséget élvez a felületen.
A jó megjelenés természetesen fontos, de amikor a menükről van szó, először arról kell gondoskodnia, hogy azok praktikusak legyenek, és hogy a navigációs struktúrának legyen értelme.
Van értelme, hogy 100 menühivatkozással rendelkezzen minden oldalra a webhelyén? Nem. Van-e értelme, hogy a menüpontok olyan kicsik legyenek, hogy csak a kisujjú emberek tudják megérinteni őket? Nem. Ezek szükséges megfontolások, bár szerencsére nem rakétatudomány.
Az alábbiakban talál egy listát azokról a példákról, amelyek megmutatják, hogyan lehet reszponzív mobilmenüket létrehozni, amelyek minden típusú mobilfelhasználó számára jól működnek. Mindegyik egy CSS mobilmenü, amely biztosítja a megfelelő reszponzív kialakítást számos különböző készüléktípushoz.
Amikor az elemeket nagy képernyőről kis képernyőre helyezzük át, néhány kompromisszumot kell kötnünk. A legtöbbször a tervezők el akarják kerülni ezeket a kompromisszumokat, és olyan univerzális kialakításra törekednek, amely minden képernyőméreten könnyen használható.
Az ilyen teljes képernyős menü fantasztikus lehet, hiszen ugyanúgy néz ki és ugyanúgy érződik számítógépen, telefonon és táblagépen is.
Basic Responsive “Three Line” Menu (CSS & jQuery)
Ebben a bemutatóban megtudhatod, hogyan tudsz gyorsan kódolni egy reszponzív CSS mobil menüt. Szükséged lesz a jQuery használatára is, de ne csüggedj, ez egy nagyon kis kódrészlet.
CSS-Only Dark Menu
Ha egy nagyon egyszerű navigációs menüt szeretnél, érdemes kipróbálnod ezt az útmutatót. A sáv vízszintes és a klasszikus legördülő menükkel rendelkezik, amíg az ablak elég kicsi nem lesz.
Ez után a reszponzív töréspont után a navigáció egy teljes képernyős mobil menü lesz, ami remekül néz ki.
Ez egy kör alakú navigációs menü ikonját mutatja be, amely kattintáskor élvezetesen animálttá válik.
Ez a CSS mobilmenü támogatja a különböző gombstílusokkal történő beágyazást. Különböző átmeneti effektusokkal rendelkezik, és könnyen beilleszthető bármilyen elrendezésbe.
Nézze meg ezt a mobil navigációs koncepciót, ha olyan menüt szeretne, amely könnyen használható és ismerős a felhasználók számára.
Multi-level Responsive Menu
Az itteni bemutató a jQuery-re és a CSS-re összpontosít egy 3-szintes-mély Drop Down menü létrehozása érdekében. Ami a legjobb benne, hogy a menü teljesen reszponzív, és bármilyen eszközre képes összezsugorodni.
3D Responsive Mobile Menu Bar
Ha egy olyan CSS mobil menüt kerestél, ami asztali gépen is remekül működik, akkor ez egy remek választás. Asztali méretben a menüpontok vízszintes listája 3D effektekkel, mobil méretben pedig egy masszív reszponzív mobil menüvé válik.
Sima Responsive Dropdown Menu – Top Drawer
Ezzel a bemutatóval megtanulhatod, hogyan hozhatsz létre egy simább, feltárható mobil menüt, amely CSS3-t használ, és nem JavaScriptben animált. Amint rákattintasz a menü ikonjára, egy olyan legördülő stílust hoz létre, amely szépen néz ki, és bármilyen eszközön jól működhet.
Simulékony elhalványulás
A halványuló navigációs menük népszerűek, és nagyon könnyű létrehozni őket. Úgy működnek, hogy CSS osztályok segítségével a menüt egy egész oldalas felületté alakítják át, amely különösen alkalmas a kis képernyőkhöz.
Ez a mobil menü dizájn egy nagyszerű animációs hatást biztosít, amely különlegessé teszi a menüt. A hamburger menü ikonja célzottan középre van helyezve, hogy a jobb- és balkezes felhasználóknak is megfeleljen.
Ez a mobilmenü-design a Bootstrap, a népszerű front-end komponenskönyvtár hatására készült. Különlegessége abban rejlik, hogy nem használ JavaScriptet – csak HTML-t és CSS-t.
A Luxbar egy CSS-könyvtár, amely reszponzív, mobilbarát fejlécnavigáció létrehozására szolgál, amely teljesen testre szabható a különböző CSS-osztályok használatával. Néhány apró módosítással olyan CSS mobil menüt kaphatsz vele, amilyet szeretnél.
Menü görgetési effektusokkal
Ez egy mobil menü néhány elképesztő görgetési és lebegtetési effektussal. Remekül hozzáadható a felhasználói élmény javításához egy interaktív weboldalon.
Egy reszponzív lapos menüt kapsz itt, amely két almenüvel rendelkezik. Tökéletes a kiterjedt kategóriák rendszerezésére.
Ezzel a bemutatóval egy nagyon egyszerű megközelítést kapsz, amely segít a nulláról reszponzív menüt építeni a CSS3 segítségével. Ez egy jó kezdet ahhoz, hogy megtanuld, hogyan tervezd meg a menüt kisebb mobil képernyőkre.
Ez a CSS mobil menü különböző animációs effektusokat tartalmaz, amelyek a menüt menővé teszik. Az effektek gyorsak, hogy a felhasználók ne legyenek türelmetlenek. A navigációs menüvel együtt még különböző akciógombokat is hozzáadhat.
Pure CSS Mega Menu
Az online magazin témák gyakran használnak mega menüket, hogy cikkeket kapjanak a menükben. Ezek a CSS mobil menü típusok remekül néznek ki, és bizonyos helyzetekben nagyon jól működnek.
Ez egy texturált reszponzív legördülő menü, amely egy meglévő többszintű menüt képes átalakítani egy menő legördülő menüvé okostelefonok számára.
Clean Dropdown Toggle
A mobil navigációnak egyszerűnek kell lennie minden felhasználó számára. Ha ezt szeretné elérni, akkor próbálja ki ezt a legördülő menüt, amely csak CSS használatával készült.
Ez a navigációs menü elég népszerű a mobil alkalmazásokhoz. A jól ismert hamburger menü ikonját használja egyszerű kialakítással együtt. Próbáld ki, és nézd meg, hogy ez az, amire szükséged van.
Ez egy takaros CSS mobil menü, amely felhasználóbarát navigációval rendelkezik, és minden mobil képernyős eszközhöz illeszkedik.
Apple Style Mobile Menu
Ezt a mobil menüt az Apple által készített menü ihlette, és egyszerre stílusos és funkcionális.
Basic Responsive Menu
Ez egy általános navigációs menü, amely felülről esik le. HAML és SCSS segítségével készült egy kis JavaScript segítségével.
Pure CSS Mobile-kompatibilis Responsive Dropdown Menu
Nézd meg ezt a CSS mobil menüt, amely egy bizonyos töréspont után könnyen átvált egy kapcsolható legördülő menüvé. Tökéletes, egyszerű és hatékony.
Végeredményben a weboldalad vagy alkalmazásod számára működő CSS mobil menü megtalálása olyan tevékenység, amelyet nem hagyhatsz ki. A menü az egyik első elem, amellyel a felhasználó interakcióba lép, és azt szeretné, ha élvezné.
A jó első benyomás megteremtése mellett egy megfelelően megvalósított mobilmenü tartós használhatóságot biztosít, és megakadályozza, hogy a felhasználók frusztrációból elhagyják a hajót.
Ha élvezted ezt a cikket a CSS mobil menü példákról, akkor ezeket is el kell olvasnod:
- Félelmetes CSS Image Hover Effects That You Can Use on Your Website
- CSS táblázatok és kódjuk, amit felhasználhatsz
- Custom WordPress Header Guide: Egyszerű módszerek a tökéletes fejlécek létrehozásához