Vitaliy Rubtsovdan va buni amalga oshirish istagiga qarshi tura olmadi.
Ushbu o'quv qo'llanmada men buni faqat CSS yordamida, hech qanday JavaScript-ni ishlatmasdan qanday qilishni ko'rsataman. Shunday qilib, biz ushbu animatsion gif bilan deyarli bir xil silliq animatsiyaga erishishga imkon beradigan ba'zi CSS (va SCSS) fokuslarini ko'ramiz.
Mana biz nima qilishimizga misol:
belgilash
Keling, biz foydalanadigan HTML tuzilishidan boshlaylik. Yaxshiroq tushunish uchun sharhlarga qarang.
Dastlabki SCSS uslublari
Endi biz xohlagan ko'rinishga ega bo'lish uchun bir nechta asosiy uslublarni qo'shamiz. Kod juda oddiy.
/* Asosiy uslublar */ * ( box-sizing: border-box; ) html, body (margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( text-decoration: yo‘q; ) .konteyner (joylashuvi: nisbiy; hoshiya: 35px avtomatik 0; kenglik: 300px; balandlik: 534px; fon rangi: #533557; to‘ldirilishi: yashirin; )
O'zgartirish operatsiyasi
Interfeysning qolgan qismini yaratishni boshlashdan oldin, keling, bir holatdan ikkinchi holatga osongina o'tish uchun almashtirish funksiyasini qo'shamiz.
Bizga kerak bo'lgan HTML allaqachon joyida. Va uni ishlaydigan uslub quyidagicha:
// Belgilash katakchasini yashirish #toggle ( displey: none; ) // Belgilash katakchasi tanlanganda "ochish" holati uchun uslub #toggle:checked ( // Menyuni ochishda uslubini o'zgartirishingiz kerak bo'lgan har qanday element shu yerga kiradi. selektor bilan ~ // Navigatsiya menyusini ochish uchun uslublar, masalan, & ~ .nav ( ) )
Yopiq holatni yarating
Yopiq holatni yaratish uchun gamburger belgisini olish uchun menyu elementlarini qatorlarga aylantirishimiz kerak. Bunday o'zgarishlarni olishning bir necha yo'li mavjud. Biz buni shunday qilishga qaror qildik:
Va bu erda uni amalga oshiradigan kod.
$oʻtish muddati: 0,5s; // Navigatsiya elementlarini gamburger belgisini tashkil etuvchi satrlar sifatida ko'rsatish. nav-element (pozitsiya: nisbiy; displey: inline-block; float: chap; aniq: ikkalasi; rang: shaffof; shrift o'lchami: 14px; harflar oralig'i: - 6,2px; balandlik: 7px; chiziq balandligi: 7px; matnni oʻzgartirish: katta harf; boʻsh joy: nowrap; transform: scaleY(0.2); oʻtish: $transition-duration, shaffoflik 1s; // Birinchi qatorga kenglik qoʻshing & :nth-child(1) ( harflar oralig'i: -8px; ) // Ikkinchi qatorga kenglik qo'shing &:nth-child(2) (harf oralig'i: -7px; ) // bilan boshlanadigan elementlar uchun sozlamalar to'rtinchi & :nth-child(n + 4) ( harflar oralig'i: -8px; chet-usti: -7px; noaniqlik: 0; ) // Gamburger belgisi uchun qatorlarni olish &:oldin (pozitsiya: mutlaq; kontent: ""; tepa: 50%; chap: 0; kenglik: 100%; balandlik: 2px; fon rangi: #EC7263; transform: translateY(-50%) scaleY(5); oʻtish: $transition-duration; ) )
Shuni esda tutingki, biz bu erda faqat eng muhim bo'lgan navigatsiya elementlari uchun asosiy uslublarni joylashtirdik. To'liq kodni Github-da topishingiz mumkin.
Ochiq menyu yarating
Ochiq menyu yaratish uchun biz navigatsiya elementlarini satrlardan oddiy matn havolalariga tiklashimiz, shuningdek, bir qator kichik o'zgarishlarni amalga oshirishimiz kerak. Keling, buni qanday qilishni ko'rib chiqaylik:
Agar biz gif-ga yaqinroq qarasak, menyuning barcha elementlari bir vaqtning o'zida emas, balki shashka naqshida ko'chirilganligini ko'ramiz. Biz buni CSS-da ham qila olamiz! Asosan, biz har bir elementni tanlashimiz kerak ( :nth-child dan foydalanib) va o'tish-kechikish qiymatini pasaytirish uchun o'rnatishimiz kerak. Bu, albatta, takrorlanadigan ish. Agar bizda ko'proq elementlar bo'lsa-chi? Xavotir olmang, biz biroz SCSS sehri bilan ishlarni yaxshilashimiz mumkin:
E'tibor bering, ushbu kod yordamida biz yopilish animatsiyasi uchun kerakli qadam harakatini olamiz. Bosqichli o'tishni qaytarish uchun biz $delay ni hisoblashimiz kerak, bu ochilish animatsiyasi uchun biroz farq qiladi. Shunga o'xshash:
Mana biz ajoyib menyumiz bilan! Biz animatsion gifdagi kabi ba'zi qo'g'irchoq elementlarni ham qo'shdik va siz .
Shunday qilib, biz oddiy va funktsional faqat CSS menyusini yaratdik. Biroq, agar siz CSS-ni almashtirish tizimidan foydalanishni xohlamasangiz, uni ozgina kuch sarflagan holda JavaScript-ning bir necha qatorlari bilan mukammal tarzda almashtirish mumkin.
Umid qilamizki, sizga ushbu qo'llanma yoqdi va foydali bo'ldi!
Biz hozirgacha faqat tartibni amalga oshirdik.
5. jquery-3.3.1.min.js kutubxonasini yuklab oling
Biz o'zimizga ulanamiz HTML hujjatni yopish tegidan oldin tanasi ikkita fayl, ulardan biri hali ham bo'sh.
Tafsilotlarga kirmaymiz JS kod, umumiy sharhlar bilan cheklanamiz. Dasturlashga qiziquvchilarga maslahat bera olaman JS
Bu qator $(".menuBurger").on("klik", function()( sinf bilan elementni bosish orqali voqeani kuzatib boradi .menuBurger.
$(".menu").slideToggle(200, funktsiya()( bu yerda funksiya menyuning o'ziga qo'llaniladi slideToggle(), bu sahifadagi tanlangan elementlarni 200 millisekundda navbatma-navbat kengaytiradi yoki yiqadi.
$(this).removeAttr("uslub");-dan olib tashlaydi mos ravishda uslublar ko'rsatish: yo'q;
Endi bosing gamburger menyusi kengaytiradi va yiqiladi, lekin muammo bor, menyuni kengaytirganda, u saytning asosiy mazmunini pastga siljitadi, lekin u kontentning tepasida bo'lsa, bu to'g'ri. Shu bilan birga, sahifani yuklash tezligi, ayniqsa mobil Internetda yomonlashadi.
6. Tarkibning yuqori qismidagi menyuni kengaytirish
Ushbu muammo menyuni joylashtirish yordamida hal qilinadi.
Asosan css kodni kiritish kerak
Menyu ( pozitsiya: nisbiy;
}
Media so'rovida: .menu ( fon: #eee; pozitsiyasi: mutlaq;
}
Bundan keyin, gamburger menyusi asosiy tarkibning tepasida kengayadi. Shunday bo'lishi kerak.
CSS-da gamburger menyusi
1. Barcha skriptlarni o'chiring va o'chiring
2. ichiga kiriting HTML teglar orasidagi fayl div va ul kod qatori
3. Tegni almashtiring div sinf bilan .menuBurger ustida teg
4. Havola id kiritish atribut bilan yorliq uchun bo'ylab #menuCSS
Natijada, belgini bosganda gamburger menyusi, tasdiqlash qutisida tasdiq belgisi paydo bo'ladi.
5. Media so'roviga psevdo-sinf qo'shing tekshirildi
#menuCSS:belgilangan ( ko'rsatish: yo'q;
}
Bu shuni anglatadiki, siz belgini bosganingizda, tasdiqlash qutisi belgilanadi, lekin u ekranda yashiringan, faqat belgi ko'rinadi. Fikr shundan iboratki, agar katakcha belgilanmagan bo'lsa, u holda menyu yopiladi va agar u belgilansa, menyu kengaytiriladi. Menyuning ochilishi va yopilishi bilan tadbir tasdiqlash qutisi holatida to'xtatiladi.
6. Yashirish kiritish v css
#menuCSS ( ko'rsatish: yo'q;
}
7. 5-banddagi kodni o'zgartiring, quyidagi maqolada yuqoriga qarang
#menuCSS:checked + .menu ( displey: blok;
}
Agar orasidagi bog'lanish teg va #menuCSS kiriting belgilandi (tekshirildi), menyu kengaytirilgan. Hamma sehr shu gamburger menyusi sof ustida ishlaydi css va agar siz unga silliq animatsiya qo'shsangiz, u holda menyudan hech qanday farq yo'q JS his qilmaysiz.
Brauzerni qisqartirishga harakat qiling va uning qanday ishlashini aniq ko'rasiz gamburger menyusi css
Xulosa
Ikkala variant ham ishlaydi. Menyu yoqilgan JS, aytaylik - to'g'ri, kodni ishlatish nuqtai nazaridan. Menyu yoqilgan css- bu "tayoqcha", o'ziga xos "zukkolik namoyishi", tushunishni istamaydiganlar uchun juda mos keladi. JS va buni faqat o'z loyihalarida qo'llamoqchi. Buyurtma qilingan saytlar uchun "tayoqchalar" yo'q, men undan keyingi foydalanish uchun mo'ljallangan maket qilishni tavsiya etaman. JS, boshqa mutaxassislar.
Siz maqolalarni o'qishdan va gamburger menyusining uchta qisqa qatori haqida doimiy ravishda turli muhokamalarni tinglashdan charchagan bo'lsangiz kerak. Bu yomon UI dizayn texnikasimi? Yoki yaxshimi? Bu post unday emas - bu menyu yaxshi yoki yomon ekanligini hukm qilmaydi. Xulosa shuki, men buni baribir eng yaxshi dizayn yechimi deb hisoblamayman. Ammo gamburger menyusi ham o'zining kuchli tomonlariga ega, ayniqsa mobil dizaynda, cheklangan joy sharoitida foydalanilganda. Xo'sh, biz nima qila olamiz? Barcha kamchiliklarga qaramay, gamburger menyusini xuddi shunday qabul qiling va davom eting? Ko'pgina saytlar va ilovalar bu bilan kelishganga o'xshaydi. Va men yaxshiroq qila olaman deb o'ylayman.
Va keyin fikrimni o'zgartirishga majbur qilgan ikkita narsa sodir bo'ldi. Birinchidan, men duch keldim. Bu gamburger menyusidan foydalanishning oqibatlarini tushunishga yordam beradigan maqola. Xususan, bunday menyuga ega saytlar foydalanuvchi ishtirokida jiddiy pasayishdan aziyat chekmoqda. Bunday statistik ma'lumotlarni ko'rib chiqish mening fikrimni o'zgartira boshladi.
Keyingi voqea men hamkasbimni xuddi shunday menyuga ega bo'lgan yangi veb-ilovadan foydalanishga harakat qilayotganini tomosha qilayotganimda sodir bo'ldi. Bu gamburger menyusi interfeysi bilan juda yaxshi tanish bo'lgan ishlab chiquvchi edi, lekin uning ehtiyojlari uchun ilovadan foydalanishga kelganda, u baland ovozda so'radi: "Men u erga qanday boraman?". E'tibor bering, bu men biladigan eng aqlli odamlardan biri va u gamburger menyusi belgisiga tegishni xayoliga ham keltirmagan. Agar shunday aqlli kimdir navigatsiya qilishda muammoga duch kelsa, bu oddiy foydalanuvchi haqida nima deyish mumkin? Mening fikrim nihoyat mustahkam asosga ega bo'ldi.
Yechim topish
Hammasi shu, gamburger menyusining kuchiga ishonmasligimning sabablari haqida etarli - bu yechim haqida gapirish vaqti keldi. Birinchidan, men gamburger menyusidan foydalanishning o'ziga xos afzalliklarini ko'rib chiqdim:
Masshtablilik: bu, ehtimol, asosiy ortiqcha va ko'plab saytlar va ilovalarni tanlashining asosiy sababidir. Kichkina belgining orqasida ko'plab navigatsiya elementlarini qo'yishingiz mumkin.
Aniqlik: u masshtablilik bilan birga ketadi, lekin baribir bir xil emas. Dizaynerlar asosiy tarkib uchun etarli joy qoldirib, ixcham va toza dizaynlarni yaratmoqchi. Gamburger menyusidan foydalanish har qanday dizaynerga yoqadigan vizual soddalik hissini beradi.
Va agar biz gamburger menyusiga alternativa yaratmoqchi bo'lsak, u qandaydir tarzda u bilan bog'liq muammolarni hal qilishi kerak:
Aniqlik: Navigatsiya elementlarini osongina topish mumkin bo'lishi kerak, ayniqsa birinchi marta foydalanuvchilar uchun.
Ishtirok etish: Interfeys foydalanuvchi mahsulot bilan nima qila olishi va muayyan funksiyalardan qachon foydalanish maqsadga muvofiqligini tushuntiruvchi maslahatlar va fikr-mulohazalarni taqdim etishi kerak.
Qiyin qism: mobil
Men eng qiyin muammodan boshlashga qaror qildim va mening yechimim mobil dizaynlar uchun mos keladimi yoki yo'qligini ko'rishga qaror qildim. Ko'p g'oyalarni o'ylab ko'rganimdan so'ng, men iOS tab paneli menyusi mobil interfeyslar uchun eng yaxshi echimlardan biri degan xulosaga keldim. Ko'p odamlar yorliqlar panelini aylantiruvchi (beshdan ortiq variantni joylashtirish uchun) yoki navigatsiyaga "ko'proq" qo'shishga harakat qilishdi - masalan, ortiqcha narsalarni tezda to'ldiradigan qo'shimcha xonaga ega Plushkin. Bundan tashqari, ushbu ikkala variant ham asosiy talabga javob bermaydi - aniqlik, barcha imkoniyatlarning ko'rinishi etishmayapti. Xo'sh, buni tuzatish uchun yorliq menyusi bilan nima qilish mumkin?
Mening yechimim gamburger va tab barni bir yondashuvda birlashtirishdir. Natijada, har bir menyu elementi uchun variantlar to'plamini ochadigan yorliqlar paneli.
Men o'z yondashuvimni amalda ko'rsatish uchun jamoa mahsuldorligi test dasturini yaratdim. Ushbu usuldan foydalangan holda foydalanuvchi mahsulotdan foydalanishning asosiy funktsiyalari va usullarini aniq ko'rishi mumkin. Va gamburger belgisi orqasida yashiringan menyu elementlarining to'liq ro'yxati bilan bombardimon qilish o'rniga, foydalanuvchiga ular bosgan yorliqlarga tegishli bir nechta variant ko'rsatiladi. Bu navigatsiyani tushunish va hazm qilishni osonlashtiradi, sizga kerak bo'lgan hamma narsa doimo qo'lingizda, foydalanuvchi dastur ierarxiyasini ko'rish imkonini beradi.
Ushbu dizaynning yana bir ortiqcha tomoni - kontekstli bildirishnomalardan foydalanish qobiliyati. Gamburger menyusi bo'lsa, sizda bu bildirishnomalarni ko'rsatish uchun faqat bitta joy mavjud. Agar siz yorliqlar paneli tartibiga rioya qilsangiz, tanlangan menyuning istalgan bandida foydalanuvchiga maslahatlar berishingiz mumkin.
Albatta, ushbu yondashuvning eng katta yutug'i Scalability hisoblanadi. Ha, siz hali ham besh toifa bilan cheklangansiz, lekin bu yaxshi. Rostini aytsam, agar dizayner navigatsiyani oqilona o'ylab topsa, har qanday sayt o'z variantlarini beshta toifaga moslashi mumkin deb o'ylayman. Darhaqiqat, ushbu toifalarning har birida yana besh yoki olti kichik band bo'lishi mumkin. Hammasi bo'lib, foydalanuvchi uchun ortiqcha yuk bo'lmasdan va butun ekran maydonini egallamasdan 30 ta mumkin bo'lgan navigatsiya variantlari mavjud.
Planshetlarga qo'llash
Bunday tab panelining planshetlarga integratsiyalashuvi g'alati tuyuldi. Planshetlar ancha kengroq va mobil qurilmalar bilan bir xil UI-dan foydalanish, u uzoq vaqt oldin o'sib chiqqan kiyimdagi o'smir kabi kulgili ko'rinardi. Shunday qilib, men boshqa yo'ldan ketdim. Yorliq panelini pastki qismga qo'yish o'rniga, men uni yon tomonga qo'ydim. Bu ekran maydonidan foydalanish nuqtai nazaridan qulayroq bo'lib chiqdi va juda tabiiy ko'rindi. Bundan tashqari, ko'plab foydalanuvchilar planshetni yonida ushlab turishadi, shuning uchun bu faqat barmoq bilan teginish uchun maqsadli maydon.
Ish stoli haqida nima deyish mumkin?
Tayyor bo'ling... ochiladigan menyu. To'g'ri - bu yondashuvni ish stoli interfeysida sinab ko'ring va siz inkor etib bo'lmaydigan haqiqatga duch kelasiz: bu variant umuman yangi emas. Slayd menyusi ko'p yillar davomida mavjud va deyarli har bir kishi (hatto onangiz) uning qanday ishlashini biladi. Bu yondashuvning go'zalligi - yangi narsa emas.
To'liq oshkor qilish
Bu narsani nima deb atashni bilmayman. Jadval kiritilsinmi? Yoki TABurger (TAB "tab" + burger)? Bundan tashqari, kimdir ilgari shunga o'xshash yechim yaratganligini bilmayman. Bunday menyuning soddaligini hisobga olsak, men birinchi bo'lganimni tan olmayman. Bilamanki, bir nechta ilovalar ba'zi yorliq tugmalarida (masalan, Tweetbot) ochiladigan menyulardan foydalanadi, lekin ular odatda navigatsiya ierarxiyasini oshirish maqsadida emas, balki ilg'or foydalanuvchilar uchun funksiyalarga tezkor kirish sifatida amalga oshiriladi. Agar sizda bunday misol bo'lsa, izohlarda menga xabar bering. Bunday menyu yangimi yoki uzoq vaqtdan beri ixtiro qilinganmi, muhim emas. Muhimi, bu gamburger menyusidan ko'ra yaxshiroq va ijodiy navigatsiya yechimimi. O'zingizga "Bu ajoyib sayt shunday menyuga ega, shuning uchun u eng yaxshisi bo'lishi kerak" yoki "Hamma buni qiladi, shuning uchun bu to'g'ri" deb aytishni to'xtating. Dizayn yaxshiroq va o'ylangan yondashuvga loyiqdir. YANGILANISHLAR Kollin Ebergardt Twitter’da xuddi shunday UI Windows Phone’da joriy qilinganini ta’kidladi. Men o'zim Windows Phone foydalanuvchisiman va u haq. Garchi ushbu turdagi o'zaro ta'sir Windows Phone-da faqat yorliqlar panelidagi "ko'proq" opsiyasi uchun qo'llaniladi.
Jeyms Perih Twitterda yana bir misol keltirdi. Artur Xemmer tomonidan yaratilgan AHTabBarController-ga qarang.
Gamburger belgisi hamma joyda. Atrofimizdagi hamma joyda. Veb-ilovalarda, mobil va ish stoli saytlarida, dasturiy ta'minotda. Bu uch qatorli piktogramma endi shu qadar oddiyki, u deyarli navigatsiya menyusi bilan o'ziga xos tarzda bog'langandek tuyuladi. Lekin shundaymi?
So'nggi paytlarda gamburger belgisining samaradorligi haqidagi munozaralar yangi cho'qqilarga chiqdi. Taniqli dizaynerlar va bir qancha saytlar, jumladan The Atlantic, TechCrunch, The Next Web va Nielsen Norman Group maqolalarida bu UX anti-pattern, zamonaviy va amalga oshirish oson piktogramma, degan xulosaga keladi, bu oddiyroq va ifodali muqobillardan regressiya hisoblanadi. . Ammo naqshga qarshimi yoki yo'qmi, ikonkadan foydalanish shunchalik o'sdiki, bu ko'pchilik veb-saytlarda, ayniqsa kichik ekranlarda deyarli kerak.
m.booking.com jamoasidagi dizayner sifatidagi mavqeimni va slayd menyusini ko'rsatish uchun ushbu belgidan foydalanganimizni hisobga olib, men ushbu ob'ektni tekshirishga qaror qildim. Va men nishonning kelib chiqishini o'rganishdan boshladim, uning sharmandalik yo'lini tushunishga harakat qildim.
Bu istiqbolli eshitiladi. Ammo ikonka klassik bo'lib, abadiy mavjud bo'lsa ham, veb-dizaynerlar undan kamroq foydalanishgan. Belgi roʻyxatlar, sudrab oʻtish va tartibni oʻzgartirish, tekislash va boshqalar uchun ishlatilgan. Ehtimol, bu noto'g'ri foydalanish uning tanqidini menyu belgisi sifatida tushuntiradi. Ehtimol, keng tarqalganligi va turli xil qo'llanilishi tufayli, bu belgi bitta metaforani etkazish qobiliyatini yo'qotdi va o'z navbatida foydalanuvchilarni chalkashtirib yubordi.
Bu voqea menga shunday savollar berishga majbur qildi: “Biz noto‘g‘rimiz, qolganlarning hammasi haqmi? Bu bizning foydalanuvchilarimiz uchun noqulaylik tug'diradimi? Bizning saytimizdagi bu uchta kichik chiziq nima ekanligini tushunadigan odamlar bormi?
Ushbu blogning doimiy o'quvchilari bizning keyingi qadamimiz ushbu savollarni A/B testi shaklida berish ekanligini bilishdan ajablanmaydi. Boshqa hamma narsa singari, gamburger belgisi ham menyu bilan o'zaro aloqada bo'lgan holda, bu belgi eng yaxshi yechim ekanligini aniqlashi kerak bo'lgan ko'plab mijozlarimizga ta'sir qildi. Bu vaqtga kelib, men konsensus yoki boshqa natijalarning yo'qligi dizayn ishlab chiqilayotgan xaridorlarning xatti-harakati bilan bog'liq emasligiga ishonch hosil qilish uchun etarlicha maqolalar va ma'lumot ma'lumotlarini o'qib chiqdim. Men tasvirlangan usulga amal qilishga qaror qildim Jeyms Foster, ko'pchilik murojaat qiladi, shu jumladan bizning eng yaxshi mobil mutaxassislarimizdan biri - Lyuk Wroblewski.
Biz ilgari bir nechta piktogramma joylashuvi va uslublarini (chegara bilan, hoshiyasiz, piktogramma bilan, turli ranglarda va hokazo) sinab ko'rdik, lekin qirq yil ichida sinab ko'rish istagimiz bilan bog'liq qiyinchiliklar tufayli "Menyu" so'zini hech qachon sinab ko'rmadik. -biz tomonidan qo'llab-quvvatlanadigan bitta til. Biroq, biz til bo‘yicha mutaxassislarimiz yordamida tarjimalarni topib, sinovdan o‘tdik:
Bizning asl gamburger menyusi belgisi sarlavhaning chap tomonida va o'ng tomonda oq ajratuvchi chiziq bilan.
Yumaloq burchakli oq hoshiyali blok ichidagi "Menyu" so'zi ham chap tomonga tekislangan.
Biz butun foydalanuvchilar bazamiz uchun tajribani boshladik. Shuningdek, ushbu UI elementining mashhurligi va hamma joyda mavjudligini hisobga olgan holda, biz butun dunyo bo‘ylab millionlab mijozlarimizni har bir qo‘llab-quvvatlanadigan tilda va ko‘p sonli qurilmalarda sinab ko‘rish ko‘p vaqt talab etmaydi, deb umid qildik.
Xo'sh, yakuniy natija nima? Jeyms Foster tajribasida bo'lgani kabi bu so'z tez ovqatlanish ustidan g'alaba qozondimi yoki kotletli bulochka yutadimi?
natijalar
Ushbu tajriba davomida piktogrammani "Menyu" so'zi bilan almashtirish bizning foydalanuvchilarning xatti-harakatlariga sezilarli ta'sir ko'rsatmadi. Bizning ulkan foydalanuvchilar bazamiz yordamida biz, ayniqsa, Booking.com tashrif buyuruvchilari uchun, gamburger belgisi matn tavsifi versiyasi kabi o'z rolini bajarishini juda katta ehtimollik bilan aytishimiz mumkin.
Albatta, biz bu ma'lumotlarni hamma narsaga ekstrapolyatsiya qila olmaymiz. Ba'zi mamlakatlarda, ba'zi tillarda yoki qurilmalarda u yaxshi yoki yomonroq ishlagan bo'lishi mumkin. Ammo global miqyosda biz "gamburger" ni juda masxara qilishgan degan xulosaga kelishimiz mumkin. Umuman olganda, u "Menyu" so'zi kabi taniqli edi. Dizayn targ'ibotini boshqarish ruhida, ehtimol, biz boshqa variantlarni ko'rib chiqishimiz kerak va gamburger belgisiga pishloq, bir bo'lak bekon va frantsuz kartoshkasini qo'shishga harakat qilishimiz kerak, ammo hozircha biz "uch qatorli do'stimiz" ekanligini xabar qilishdan xursandmiz. hamma joyda yopishqoq. Uning haqiqiy joylashuvi, shakli, o'lchami, holati va rangi, albatta, kelajakdagi sinovlarga bog'liq.
Shubhasiz, bu barchamiz uchun A/B testining mohiyati haqida saboqdir. Siz hech qachon UI elementlarini, modelni yoki umuman xususiyatni sinab ko'rmaysiz. Siz bu narsalarni aniq va aniq stsenariylar ostida juda aniq foydalanuvchi bazasida sinab ko'ryapsiz. Booking.com uchun ishlaydigan narsa siz yoki foydalanuvchilaringiz uchun ishlamasligi mumkin. Bu biz A/B testini o'tkazganimizning sabablaridan biridir. Boshqa ekspertlarning xulosalari, boshqa saytlardan olingan ma'lumotlar yoki gamburger yeyayotganda pubda o'ylab topilgan farazlar mijozlarimiz va platformamizda sinovdan o'tkazilgunga qadar isbotlanmagan bo'ladi.
O'zimizning metaforamiz bilan adashmang, lekin bu yaxshi gamburger retseptiga o'xshaydi. Agar siz men uchun barcha ingredientlarni aniq yozgan bo'lsangiz ham, siz butunlay boshqa gamburgerga ega bo'lasiz. Bunga, albatta, bozordagi go‘sht sifati, nonga ishlatiladigan un va boshqa minglab omillar ta’sir ko‘rsatadi. Shaxsan biz uchun bu g'oya Booking.com uchun yaxshi bo'lsa yaxshi. Agar biz uni saytimizda takrorlay olsak va u barcha mijozlarimiz uchun ishlasa.
Bizning fikrimiz
Siz har doim o'z g'oyalaringizni sinab ko'rishingiz va ma'lumotlar sizga nima deyishini va qanday savollar tug'ilishini ko'rishingiz kerak. Mening maslahatim? Bir luqma oling va nima bo'lishini ko'ring.
Albatta, siz ko'plab saytlarda gamburgerni eslatuvchi uchta gorizontal chiziqli belgi ko'rinishidagi tugmani ko'rgansiz. Ko'pgina hollarda, katta va o'rta ekran o'lchamlarida bu tugma yashirin bo'lib, faqat kichik ekranlarda paydo bo'ladi.
Ushbu tugma navigatsiya menyusi elementlarini yashiradi, g'oya shundan iboratki, ma'lum bir ekran kengligida belgini bosish orqali foydalanuvchi menyuni o'zi kerak bo'lganda kengaytiradi. Agar kerak bo'lmasa, u darhol tarkibni menyudan chalg'itmasdan ko'rishga kirishadi, chunki u yashiringan.
Ushbu vazifaning faol qismi, ya'ni elementlarni kengaytirish va yiqitish gamburger menyusi vositalari orqali amalga oshirilishi mumkin JS kutubxonadan foydalanish jQuery yoki toza css. Bu erda men darhol buni aytib beraman css bu "tayoqcha" usulida amalga oshiriladi katakcha-ah, keyinroq nima ekanligini tushuntiraman.
JSdagi gamburger menyusi
1. Biz odatiy yuqori navigatsiya menyusini saytning kontent qismining bir paragrafi bilan tuzamiz
Saytda iconfinder.com kerakli belgini toping, rangni kerakli rangga o'zgartiring (Tahrirlash belgisi), formatda yuklab oling SVG, brauzerda oching, veb-inspektordan kodni nusxalang.
"Menyu" matni o'rniga yuqorida ko'chirilgan kodni joylashtiring.
Menyu
Ushbu bosqichda, ish stoli o'lchamlarida menyu shunday ko'rinadi, SVG Quyidagi kodni yozish orqali biz belgini yashirdik.
MenuBurger( ko'rsatish: yo'q; /* gamburger belgisi yashirin */
}
3. Media so'roviga o'ting
Kichik ekran kengligida, noldan 530 pikselgacha. Buning teskarisini qilishimiz kerak, belgini ko'rsating gamburger menyusi va qatordagi barcha menyu bandlarini yashiring.
@media ekrani va (maksimal kenglik: 530px) ( .menyu( ko'rsatish: yo'q; /* menyu elementlari yashirin */ fon: #f1f2f4; pozitsiyasi: mutlaq;
}
Menyu li( float: yo'q /* ustunlardagi menyu elementlari */
}
MenuBurger( displey: inline-block /* gamburger belgisi koʻrinadi */
}
}
4. Gamburger menyusini kengaytiring
Ochilishdan oldin nima qilish kerak gamburger menyusi? Vaqtinchalik fikr bildirish css media so'rov kodi /* displey: yo'q; */ va gorizontal menyuni vertikalga aylantiring. Buning uchun amalni bekor qiling suzmoq, media so'roviga quyidagi kodni qo'shing.
Vitaliy Rubtsovdan va buni amalga oshirish istagiga qarshi tura olmadi. Ushbu o'quv qo'llanmada men buni faqat CSS yordamida, hech qanday JavaScript-ni ishlatmasdan qanday qilishni ko'rsataman. Ko'ramiz...
Vitaliy Rubtsovdan va buni amalga oshirish istagiga qarshi tura olmadi. Ushbu o'quv qo'llanmada men buni faqat CSS yordamida, hech qanday JavaScript-ni ishlatmasdan qanday qilishni ko'rsataman. Ko'ramiz...
Vitaliy Rubtsovdan va buni amalga oshirish istagiga qarshi tura olmadi. Ushbu o'quv qo'llanmada men buni faqat CSS yordamida, hech qanday JavaScript-ni ishlatmasdan qanday qilishni ko'rsataman. Ko'ramiz...
Vitaliy Rubtsovdan va buni amalga oshirish istagiga qarshi tura olmadi. Ushbu o'quv qo'llanmada men buni faqat CSS yordamida, hech qanday JavaScript-ni ishlatmasdan qanday qilishni ko'rsataman. Ko'ramiz...
Vitaliy Rubtsovdan va buni amalga oshirish istagiga qarshi tura olmadi. Ushbu o'quv qo'llanmada men buni faqat CSS yordamida, hech qanday JavaScript-ni ishlatmasdan qanday qilishni ko'rsataman. Ko'ramiz...
Vitaliy Rubtsovdan va buni amalga oshirish istagiga qarshi tura olmadi. Ushbu o'quv qo'llanmada men buni faqat CSS yordamida, hech qanday JavaScript-ni ishlatmasdan qanday qilishni ko'rsataman. Ko'ramiz...
To'liq oshkor qilish
