a fő /
Navigátorok / Gyönyörű burger menü CSS-en. Gyors létrehozás "Hamburger" menü JQuery
Gyönyörű menüburger a CSS-en. Gyors létrehozás "Hamburger" menü JQuery
A Vitaly Rubtsova-tól, és nem tudott ellenállni a végrehajtásnak.
Ebben a leckében elmondom, hogyan lehet ezt egy CSS-vel, a JavaScript alkalmazás nélkül. Tehát látni fogunk néhány CSS-t (és SCSS) trükköket, amelyek lehetővé teszik számunkra, hogy szinte ugyanolyan sima animációt érjünk el, mint ez az animált GIF.
Itt van egy példa arra, hogy mit fogunk tenni:
Jelzés
Kezdjük a HTML szerkezetével, amelyet használunk. Lásd a megjegyzéseket a jobb megértés érdekében.
Kezdeti stílusok SCSS
Most adjon hozzá néhány alapvető stílust, hogy megkapja a kívánt megjelenést. A kód meglehetősen egyszerű.
/ * Alapvető stílusok * / * (dobozméretezés: Border-Box;) HTML, Body (Margin: 0;) Body (Font-Család: sans-serif, háttérszín: # f6c390;) A (szöveges dekoráció: Nincs;) .container (pozíció: relatív; margó: 35px auto 0, szélesség: 300px; magasság: 534px; háttérszín: # 533557; túlcsordulás: rejtett;)
Munkakapcsoló
Mielőtt elkezdené létrehozni az interfész többi részét, adja hozzá a kapcsolási műveletet, hogy könnyen mozogjon az egyik államról a másikra.
HTML-nek van szükségünk. És az a stílus, amely az IT működéséhez közelít:
// elrejti a Chekox #toggle (kijelző: nincs;) // Styles a "nyitott" állapotban, amikor a ChekBox van kiválasztva #toggle: Checked (// bármely elem, amelynek stílusa meg kell változtatnia, amikor a menü megnyílik, itt van a választó ~ // Stílusok a navigációs menü megnyitásához, például & ~ .nav ())
Zárt állapot létrehozása
Zárt állapot létrehozásához meg kell konvertálnunk menüpontokat a sorban, hogy megkapja a hamburger ikont. Számos módja van egy ilyen átalakulás megszerzésére. Úgy döntöttünk, hogy ezt a következőképpen tesszük:
És itt van a kód, amelyet rájön.
$ Átmeneti időtartam: 0,5S; // A navigációs elemek megjelenítése a hamburger ikonot alkotó vonalak formájában .nav-tétel (pozíció: relatív; kijelző: inline-blokk; lebeg; balra; világos; tiszta: mindkettő; szín: átlátszó, betűkészlet: 14px; Levelet-térfázis: - 6.2px; magasság: 7px; vonalmagasság: 7px; szöveg-transzformáció: nagybetű, fehér tér: mostrap; átalakítás: skála (0,2); Átmenet: $ átmeneti időtartam, opacitás 1s; // Szélesség az első sorban és: nth-child (1) (Letter-Space: -8px,) // a második sor szélességének hozzáadásával &: nth-child (2) (levél-térfogat: -7px;) // A negyedik és: nth-child (NTH-Child (n + 4) (Letter-pakció: -8px, margin-top: -7px; Opacity: 0,) // a hamburgerhez tartozó vonalakat és: előtt: Abszolút; Tartalom : ""; Top: 50%; balra: 0; szélesség: 100%; magasság: 2px; háttérszín: háttérszín: # EC7263; transzformáció: Fordítás (-50%) Scaley (5); Átmenet: $ átmenet-időtartam; )
Kérjük, vegye figyelembe, hogy itt csak a legfontosabb navigációs elemek főbb stílusait helyeztük el. Találhat egy teljes kódot a github-on.
Nyílt menü létrehozása
Nyitott menü létrehozásához vissza kell állítanunk a navigációs tételeket a vonalaktól a normál szöveges linkekre, valamint számos kisebb változtatást. Lássuk, hogyan kell csinálni:
$ Átmeneti időtartam: 0,5S; #Toggle: Checked (// Open & ~ .nav (// A navigációs pontok visszaállítása a sorokból a menü ikonjából .nav-tétel (szín: # # # # Color: # ec7263, Levél-távolság: 0; magasság: 40px; vonalmagasság: 40px; Margin-Top: 0; Opacity: 1; Átalakítás: SCALY (1); Átmenet: $ átmenet-időtartam, opacitás 0,1s; // elrejti a vonalakat és: előtt (Opacity: 0;)))
Varázslat kis dolgokban
Ha közelebb kerülünk a GIF-ről, akkor látni fogjuk, hogy az összes menüpont egyszerre mozog, de egy ellenőrző sorrendben. Meg tudjuk csinálni a CSS-ben! Elvileg ki kell választanunk minden elemet (használva: nth-child), és fokozatosan növelnünk az átmeneti késleltetés értékét. Ez egyértelműen ismétlődő feladat. És mi van, ha több elemünk van? Ne aggódj, mindent jobban meg tudunk tenni, egy kis SCSS mágiával:
$ Tételek: 4; $ Átmeneti késleltetés: 0,05S; .nav-tétel (// Állítsa be a navigációs tételek késedelmét, amikor a $ I-t 1-től $ 1-ig terjesztette (&: nth-child (# ($ i)) ($ késedelem: ($ I - 1) * $ átmenet Késedelem; átmenet-késleltetés: $ késés; &: előtt: $ késés;)))))))
Felhívjuk figyelmét, hogy a kód segítségével megkapjuk a kívánt lépésenkénti viselkedést az animáció zárásához. Meg kell számolnunk a $ késéssel, egy kicsit másra a nyitó animációhoz, hogy visszaszerezze az átmenetet. Mint ez:
Tehát befejeztük bizarr menüjét! Néhány fiktív elemet is tartalmazunk, mint egy animált GIF-ben, és láthatjuk.
Tehát létrehoztunk egy egyszerű és funkcionális menüt csak a CSS-en. Ha azonban nem szeretné használni a CSS kapcsoló rendszert, akkor tökéletesen cserélhető több JavaScript vonal nélkül, sok erőfeszítés nélkül.
Reméljük, hogy ez a lecke olyan volt, mint te, és hasznosnak találtad!
Csak egy elrendezést végeztünk.
5. Töltse le a jquery-3.3.1.min.js könyvtárat
Csatlakozzon a miénkhez Html Dokumentum a zárócímke előtt test. Két fájl, az egyikük még mindig üres.
Nem fogunk részletesen szétszerelni JS. Kód, csak megosztott megjegyzésekre korlátozódik. Azt tanácsolom, azok számára, akik érdeklődnek a programozás iránt JS.
Ez a vonal $ ("Menuburger"). Be ("Click", Funkció () () () nyomon követi az eseményt az osztály elemre kattintva .Menuburger.
$ (". Menü"). Slidetoggle (200, funkció () ( Itt a funkció a menüre vonatkozik slidetoggle ()amely felváltva kibontakozik vagy hajtogat, a kijelölt elemeket a 200 milisekundum oldalon.
$ (ez) .removeattr ("stílus"); - kiküszöböli sorban stílusok kijelző: Nincs;
Most kattintson hamburger menü A kibontakozó és a hajtások, de van egy probléma, amikor bekapcsolja a menüt a webhely fő tartalmát, és helyesen, ha a tartalom tetején van. Ugyanakkor szenved az oldalterhelés sebességét, különösen a mobil interneten.
6. A menü telepítése a tartalom tetején
Ezt a problémát a menü elhelyezésével oldják meg.
Többnyire CSS. Kód hozzáadása
Menü ( Pozíció: relatív;
}
A média kérésére: .menu ( Háttér: #eee; Pozíció: abszolút;
}
Ezután, hamburger menü kibontakozik a fő tartalom felett. Így kell lennie.
Hamburger menü CSS-en
1. Húzza ki és törölje az összes parancsfájlt
2. Helyezze be a B. Html Fájl a címkék között div és ul Zárkód
3. Cserélje ki a címkét div C osztály .Menuburger a címke
4. nyakkendő iD bemenet. Attribútummal a címkén keresztül #Menucsss.
Ennek eredményeként az ikonra kattintva hamburger menüA ChekBoxban megjelenik egy pipa.
5. Adjon hozzá egy pszeudo-osztályt a média kérésére ellenőrzött
#Menucss: ellenőrzött ( Kijelző: Nincs;
}
Ez azt jelenti, hogy az ikonra kattintva a jelölőnégyzet jelölőnégyzetbe kerül, de a képernyőn el van rejtve, csak az ikon látható. Az ötlet az, hogy ha a jelölőnégyzet nincs jelölve, a menü zárva van, és ha jelölőnégyzet van jelölve, a menü telepítve van. Esemény a menü megnyitásával és bezárásával, felfüggesztve, hogy milyen állapotban van egy jelölőnégyzet.
6. tér bemenet ban ben CSS.
#Menucss ( Kijelző: Nincs;
}
7. Változtassa meg a kódot az 5. bekezdésben, lásd fent a cikkben a következőre
Ha a kapcsolat között van címke és input #menucsss. Jelölje meg (Ellenőrzött)A menü telepítve van. Ez az egész varázslat hamburger menü Tiszta dolgozik CSS. És ha hozzáadja a sima animációt, akkor nincs különbség a menüvel JS.Nem fogod érezni.
Próbálja meg csökkenteni a böngészőt, és egyértelműen látni fogja, hogyan működik. hamburger menü CSS-en
Kimenet
Mindkét működési lehetőség. Menü JS., Tegyük fel, hogy helyes, a kód használatával kapcsolatban. Menü CSS. - Ez a "mankó", egyfajta "megnyilvánulása", amely alkalmas azoknak, akik nem akarják megérteni JS. És csak a projektjein fogja alkalmazni. A helyszíneken, hogy megrendeljék a "mankók" -okat, erősen ajánlom az elrendezés elvégzését, élesen használva JS., más szakemberek.
Valószínűleg már fáradt volt az olvasás cikkek olvasása és folyamatosan hallgathat különböző megbeszélések a Hamburger menü három rövid vonaláról. Ez egy rossz vétel az interfész kialakításában? Vagy nem rossz? Ez a bejegyzés nem olyan, mint ez - nem ítél meg, jó vagy rossz ez a menü. Az alsó sor az, hogy nem a legjobb tervezési megoldás, egy vagy más módon. De a hamburger menü erőssége, különösen akkor, ha a mobil kialakításban használják, korlátozott helyen. Szóval mit tehetünk? Csak vegyen egy hamburger-menüt, amit az összes hiba ellenére, és él? Úgy tűnik, sok webhely és alkalmazás elfogadja ezt. És azt hiszem, hogy képes jobbra.
És akkor két dolog volt, ami megváltoztatta a fejüket. Először találkoztam. Ez egy olyan cikk, amely valóban segít megérteni a Hamburger menü használatának hatásait. Különösen az ilyen menüvel rendelkező webhelyek elviselik a felhasználók bevonásának súlyos csökkenését. Az ilyen statisztikák áttekintése csak megkezdte a véleményemet.
A következő esemény történt, amikor figyeltem egy kollégát, amely megpróbál egy új webes alkalmazást használni, amelyben csak egy ilyen menü volt. Ez egy olyan fejlesztő volt, aki nagyon ismeri a hamburger menü felületét, de amikor az igényei iránti kérelem használatához jött, hangosan hangosan kérte: "Hogyan juthatok oda?". Fontolja meg, ez az egyik leghíresebb ember, akit ismerek, és nem is gondolkodott a hamburger menü ikonjának megérintésével. Ha valaki olyan okos problémákat okoz a navigációval, mit beszél ez egy tipikus felhasználóról? Véleményem végül szilárd indokolást szerzett.
Megoldások keresése
Minden elég ahhoz, hogy a hitetlenségem oka a hamburger menü miatt - itt az ideje, hogy beszéljen a döntésről. Kezdetben tanulmányoztam a Hamburger menü használatának különleges előnyeit:
Méretezhetőség: Ez valószínűleg a fő plusz és a fő oka annak, hogy sok webhely és alkalmazás választja ki. Sok navigációs elemet hozhat létre egy kis ikonra.
Pontosság: Egy párban megy a skálázhatóság, de mégis, nem ugyanaz. A tervezők Lakonikus és tiszta formaterveket kívánnak létrehozni, elegendő helyet biztosítanak a fő tartalomhoz. A Hamburger-menü használata vizuális egyszerűségéről érzi magát, vonzó minden tervező számára.
És ha alternatívát hoz létre egy hamburger menübe, akkor valahogy megoldja a vele kapcsolatos problémákat:
Állandóság: Lehetővé kell tenni, hogy könnyen megtalálja a navigációs elemeket, különösen azok, akik a terméket először használják.
Bevonás: Az interfésznek kéri, és a FIDBECK-nak meg kell magyaráznia, hogy a felhasználó meg tudja csinálni a terméket, és ha helyénvaló bizonyos lehetőségeket használni.
Komplex: Mobile
Úgy döntöttem, hogy a legnehezebb problémával kezdem, és ellenőrizem, hogy a döntésem alkalmas-e a mobil formatervezésre. Az ötletek tömegének gondolkodása után arra a következtetésre jutottam, hogy az iOS lap panel menüje az egyik legjobb megoldás a mobil interfészekhez. Az emberek tömege megpróbálta meghozni a Tab panel görgetését (úgy, hogy több mint öt opciót), vagy adjon hozzá "több" a navigációhoz - valami, mint egy plüss, amely egy extra szoba, amely gyorsan kitölti a szemetet. Mindkét lehetőség még mindig nem felel meg a fő követelménynek - egy tisztaság, az összes lehetőség láthatósága hiányzik. Tehát mit lehet létrehozni a fülmenüvel, hogy javítsa meg?
A döntésem az, hogy egy hamburger és a lap panel egyesíti az egyetlen megközelítést. Az eredmény a lap panel, amely megnyitja az egyes menüelemek beállítását.
Készítettem egy tesztalkalmazást a csapat termelékenységének értékelésére, hogy illusztrálja az üzleti megközelítést. Ezzel a módszerrel a felhasználó világosan megtekintheti a termék használatának alapvető funkcióit és módszereit. Ahelyett, hogy elaludna a Hamburger ikon mögött rejtett menüelemek teljes listájával, a felhasználót több lehetőség mutatja, amely a fülhöz tartozik, amelyre rákattintott. Tehát a navigáció könnyebb megérteni és megemészteni, minden amire szüksége van, mindig kéznél van, lehetővé teszi a felhasználó számára, hogy az alkalmazás hierarchiáját látja.
Egy másik plusz egy ilyen design a kontextuális értesítések használatának képessége. Hamburger menü esetén csak egy hely van az ilyen értesítések megjelenítéséhez. Ha ragaszkodik az elrendezéshez a Tab panelhez, akkor a kiválasztott menüelemek bármelyikében a felhasználó számára tippeket készíthet a felhasználó számára.
Természetesen a megközelítés legnagyobb győzelme a skálázhatóság. Igen, még mindig öt kategóriára korlátozódik, de jó. Őszintén szólva, azt hiszem, hogy bármelyik webhely öt kategóriába helyezhető, ha a tervező az elmével elgondolkodik. Végtére is, mindegyik kategóriában öt vagy hat albekezdés lehet. 30 lehetséges navigációs lehetőséget vált ki anélkül, hogy a túlterhelés érzése a felhasználó számára, és a teljes képernyőterület megszállása nélkül.
Alkalmazás tablettákra
Az ilyen lapok integrálása tablettákba, mint az, furcsa. A tabletták sokkal szélesebbek, és ugyanazon felhasználói felület, mint a mobileszközök, szintén nevetségesnek tűnt, mint egy tinédzser a ruhákban, ahonnan régebben nőtt. Szóval más módon mentem. Ahelyett, hogy az alján lévő lap panel elhelyezném, oldalra helyeztem. Tehát kényelmesebb a képernyő tér használatával, és nagyon természetesnek tűnt. Ezenkívül sok felhasználó tartja a tablettát, így ez csak egy célterület az ujjainak megérintéséhez.
Mi van az asztalon?
Készüljön fel ... visszahúzható menü. Minden igaz - próbálja meg ezt a megközelítést az asztali felületen, és vitathatatlan valósággal találkozik: ez az opció egyáltalán nem. A visszahúzható menüt évek óta használták, és szinte minden felhasználó (még az anyád is) tudja, hogyan működik. Ebben a megközelítésben van egy varázsa - semmi új.
Teljes nyilvánosságra hozatal
Nem tudom, hogyan kell ezt a dolgot hívni. Betéti raptor? Vagy Taburger (fül "fül" + burger)? Ráadásul nem tudom, hogy valaki létrehozott-e hasonló megoldást korábban. Tekintettel az ilyen menü egyszerűségére, nem engedhetem meg, hogy először voltam az ötlet. Tudom, hogy számos alkalmazás behúzható menüket használ néhány lapon (például a TweetBot) gombokon, de általában gyors hozzáférést biztosít a fejlett felhasználók számára, és nem a navigációs hierarchia felépítéséhez. Ha ilyen példa van, hadd tudjam meg a megjegyzéseket. Nem számít, hogy egy ilyen menü új vagy régóta feltalált-e. Fontos, hogy ez a legjobb, kreatívabb megoldás a navigáláshoz a hamburger menühöz képest. Ne beszélj magaddal "Van egy ilyen menü ebben a hűvös helyen, ez azt jelenti, hogy a legjobbnak kell lennie" vagy "mindenki azt jelenti, ez azt jelenti, hogy helyes." A tervezés jobb, figyelmesebb megközelítést érdemel. Frissítések Colleen Ebergardt megjegyezte a Twitteren, hogy ugyanazt az UI-t a Windows Phone telepíti. Maga a Windows Phone felhasználó vagyok, és igaza van. Bár az ilyen típusú interakciót a Windows Phone-ban csak a "More" opcióra használja a lap panelen.
James Perich újabb példát vezette a Twitteren. Nézd meg az Arthur Chemmer által létrehozott AhtabbarController-t.
Egyszerű, funkcionális, intuitív és emlékezetes, mint bármely útjelző, a hamburger ikon tavaly valódi tendenciát vált, és bármely modern weboldal és mobil alkalmazás kialakításának integrált eleme.
Ez az egyszerű ikon szimulálja a menülista megjelenését, ideális a kis képernyők és weboldalak eszközei számára, ahol a vizuális oldal fontos, és a navigációnak félre kell állnia. Ez egy nagyon hatékony és életképes megoldás, amely megfelel a modern világ követelményeinek.
Mint bármely más interfészelem, a hamburger ikonja lehet néhány eltérés az eredeti opciótól az egyes projektek igényei alapján.
A projektet és a témától függően a hamburger ikon különböző formákat ölthet, amelyek kiegészítik a designot, vagy független, megkülönböztető tulajdonságává válhatnak.
A mai gyűjtemény tartalmazza a hamburger ikonok 20 különböző változatait.
A designer dave játékok hamburger ikonja azonnal sok meleg energiát ad. A rajzfilm stílus a játékosságot adja hozzá, és csak a leginkább pozitív érzelmeket hoz létre. Egy ilyen ikont a legmodernebb illusztrált interfészeken használhatja.
És a Mat Walker kifejlesztette ezt az ikont az óceán hullámaival. Kiválóan érzi magát a tengerre szentelt különböző projekteken. Kék, mint az elsődleges szín és a keret, hogy ez az ikon exkluzív legyen.
Tiszta, fényes és szellemes megvalósítás lehetővé teszi, hogy a design a kulináris helyszínek menüikonként működjön. Ebben az esetben az interfész kellemes művészetet kap.
A tervező 10 érdekes változatot kínál Hamburger ikonok, amelyek egy lélekkel készültek. A sorozat különböző típusú hamburgert foglal magában: egy sajttal, a másikval a szalonnával, a harmadik pedig Törökországgal és még sokan másokkal. Ha van egy weboldal vagy mobil alkalmazás, amelyet a gyorsétterem éttermet szentel, biztosan hasznos lesz. Olyan vizuálisan érdekesek, hogy szinte bármilyen témában találjanak helyet.
És ez a projekt reális hamburgert jelent a vektorban. A záró gomb egy sült burgonya formájában készült, az "X" forma, mártással vagy anélkül. Ez egy olyan kreatív megoldás, amely egzotikus az oldal tervezésben.
A Star Wars hivatalos honlapja tartalmaz egy érdekes hamburger ikont, amely fordul. Minden vonal két részre oszlik, hogy megkapja a fény lézer kardjainak visszaverődését. A megoldás erősíti a webhely általános benyomását, és erősíti a márkát.
A Peter Tauri burger menüje az ikon tökéletesen illusztrált verziója. Ennek a jelvénynek a legfontosabb jellemzője, hogy olyan színeket válasszon, amelyek utánozzák a vágott zsemle és a húscutleteket.
A sorozat különböző változatai vannak a hamburgerekkel, amelyeket vonalstílussal hajtanak végre. Itt talál egy dupla hamburger, egy hamburger sajt és saláta, egy szabadtéri szendvics és mások. Keresse meg a tökéletes megoldást a tiszta, lapos felületen egyszerűen hozzáadni piquancy és "íz".
A művész bemutatja a gomb három vicces verzióját: klasszikus hamburger, sajtburger és hot dog. Az egyes vagy két színek alapja, amely alkalmas különböző apró interfészekre. Itt a szín a szendvics helyes megjelenését hozza létre.
A művész egy kis animációt kínál, amely csak egy menü ikont tartalmaz, és számos sima átmenet, amely a szokásos "X" (záró gomb) konverzióját kísérik. Vannak speciális hatások, amelyek merülnek fel az egér lebegése vagy megnyomásakor.
A fenti legtöbb példával ellentétben ez a minta súlyos, nem színű ügyes manipulációt mutat. A merészebb felső és alsó vonalak, mint az átlag, és hozza létre a "hamburger" megfelelő képét. A művész sikeresen küzdött a feladathoz.
Az Andrew Kowardakova ninja ikonjának menü animációja különbözik a legtöbb gomboktól a Hamburgers-től, és érdekes és kiemelkedő megoldást kínál, titokzatos és vonzó subtext segítségével. Itt minden sor egy ninja a vektorban.
És ez az ikon egy rajz egy burger salátával és sajttal. Ez hozzáadhat egy jelölést bármely unalmas felületre. Kiváló megoldás az étterem vagy a kávézó helyére.
Ez egy cikk, ahol érdekes érveket találhat a divatos menü ikonjáról. Ez egy olyan képjel van jelen, amely a hamburger gomb három lehetőségeit mutatja. Az első egy első osztályú lapos illusztráció, a második pedig három vonal festett ikonja, a harmadik pedig a második minta monokromatikus változata a legnépszerűbb választás a tervezők között.
A GIF sima átmeneteket mutat a minimalista és az elegáns ikon kezdeti állapota és végső állapota között. Mivel az animáció az alsó sorból kezdődik, rövidebb, mint mások.
A Liam Spratlin Hamburger menüje úgy néz ki, mint egy sor iskolai könyvjelzők a könyvek számára. Ez a végrehajtás merész és kissé durva. Ez az ikon azonnal észrevehető, de nehéz lehet megfelelő környezetet találni.
Eddig külön megvizsgáltuk az ikonokat, de jól működnek a szavakkal, különösen akkor, ha ez a "menü" szó. Bár szükségtelennek tűnhet, együtt vannak feltűnően. Az ilyen esetben használt 1px széles ultra-vékony vonalakat a puzzle részeként kombinálják.
A projekt azt bizonyítja, hogy a hamburger ikon fényesebbnek és vonzónak tűnhet, amikor bebörtönözik. Ez kiváló választás a kis eszközök számára, ahol egy ilyen ikon kényelmes lesz az érzékszervi navigációhoz.
A tervező három vonal egyszerű, sima ikonját jeleníti meg, amelyet különböző metamorfóknak vetnek alá, keresztbe vagy nyílba fordulva. Az animáció számos olyan megoldást tartalmaz, amelyek hasznosak lehetnek minden projekthez.
EREDMÉNYEK
Első pillantásra úgy tűnik, hogy az ilyen csecsemők, mivel a menü ikon nem tud nagy figyelmet fordítani. De ha egy kicsit fantáziát mutatsz, akkor egyfajta csúcspontjává teheted az interfész. Különösen, ha a fejlesztők a jelentéssel játszanak, és művészi technikákat használnak, hogy megkérdőjelezik és vonzzák a figyelmet.
A letöltés most kezdődik ... Ne felejtsd el megosztani az anyagot. a szociális hálózatokban Kollégák
bejárat
Teljes nyilvánosságra hozatal
