Гамбургер CSS бар жауап беретін мәзір. jQuery көмегімен гамбургер мәзірін жылдам жасаңыз

2. Шарлау мәзіріне гамбургер белгішесін енгізіңіз

Сайтта iconfinder.comқажетті белгішені табыңыз, түсті қалағанға өзгертіңіз (Өңдеу белгішесі), форматта жүктеп алыңыз SVG, оны браузерде ашыңыз, веб-инспектордан кодты көшіріңіз.

«Мәзір» мәтінінің орнына жоғарыда көшірілген кодты қойыңыз.

Бұл кезеңде жұмыс үстелінің ажыратымдылығында мәзір келесідей болады: SVGКелесі кодты жазу арқылы белгішені жасырдық.

мәзірБургер (
көрсету: жоқ; /* гамбургер белгішесі жасырылды */
}

3. Мультимедиа сұрауына өтіңіз

Кішкентай экран енінде, нөлден 530 пикселге дейін. Біз керісінше істеуіміз керек, белгішені көрсетеміз гамбургер мәзіріжәне қатардағы барлық мәзір элементтерін жасырыңыз.

@media экраны және (макс. ені: 530px) (
.мәзір (
көрсету: жоқ; /* мәзір элементтері жасырылған */
фон: #f1f2f4;
позициясы: абсолютті;
}

Мәзір (
қалқымалы: жоқ; /* бағандардағы мәзір элементтері */
}

мәзірБургер (
дисплей: кірістірілген блок; /* гамбургер белгішесі көрінеді */
}
}

4. Гамбургер мәзірін кеңейтіңіз

Ашу алдында не істеу керек гамбургер мәзірі? Уақытша түсініктеме беру керек CSSмедиа сұрау коды /* көрсету: жоқ; */және көлденең мәзірді тік мәзірге айналдырыңыз. Ол үшін әрекеттен бас тартайық жүзу, медиа сұрауына келесі кодты қосыңыз.

Гамбургер белгішесі барлық жерде. Айналамыздағы барлық жерде. Веб қолданбаларында, мобильді және жұмыс үстелі сайттарында, бағдарламалық құралда. Бұл барлық жерде кездесетін үш жолды белгішенің бүгінгі күні кең таралғаны соншалық, ол шарлау мәзірімен ерекше түрде байланысты болып көрінеді. Бірақ солай ма?

Жақында гамбургер белгішесінің тиімділігі туралы талқылаулар жаңа биіктерге жетті. Танымал дизайнерлердің мақалалары және The Atlantic, TechCrunch, The Next Web және Nielsen Norman Group сияқты бірнеше сайттар бұл UX анти-үлгісі, қарапайым және одан да көптен регрессия болып табылатын сәнді және оңай іске асырылатын белгіше деген қорытындыға келеді. экспрессивті баламалар. Бірақ үлгіге қарсы ма, жоқ па, белгішені пайдалану соншалықты өсті, бұл көптеген веб-сайттарда, әсіресе шағын экрандарда құрал дерлік.

m.booking.com тобындағы дизайнер ретіндегі ұстанымымды және сырғымалы мәзірді көрсету үшін осы белгішені пайдалануымызды ескере отырып, мен бұл нысанды зерттеуді шештім. Мен оның атақ-даңққа апаратын жолын түсінуге тырысу үшін белгішенің шығу тегін зерттеуден бастадым.

Бұл перспективалы болып көрінеді. Бірақ бұл белгіше классикалық және мәңгілік болғанына қарамастан, веб-дизайнерлер оны пайдалануда тұрақты емес. Белгіше тізімдер, сүйреп апару және ретін өзгерту, туралау және т.б. үшін пайдаланылды. Мүмкін бұл теріс пайдалану оның сынды мәзір белгішесі ретінде түсіндіреді. Мүмкін, оның кең таралуы мен әртүрлі қолданылуына байланысты бұл белгіше бір метафораны жеткізу қабілетін жоғалтты және өз кезегінде пайдаланушыларды шатастырады.

Осы оқиғаның бәрі маған мынадай сұрақтар қоюға мәжбүр етті: «Біз шынымен қателесіп жатырмыз ба, ал қалғандары дұрыс па? Бұл біздің пайдаланушыларымызға қолайсыздық тудырмай ма? Біздің сайттағы үш кішкентай жолдың не екенін түсінетін адамдар бар ма?

Бұл блогтың тұрақты оқырмандары біздің келесі қадамымыз осы сұрақтарды A/B тесті түрінде қою екенін білсе, таң қалмайды. Барлық басқа нәрселер сияқты, гамбургер белгішесі мәзірмен өзара әрекеттесу арқылы белгішенің ең жақсы шешім екенін анықтауға мәжбүр болған көптеген тұтынушыларымыздың әсеріне ұшырады. Осы уақытқа дейін мен консенсустың болмауы немесе әртүрлі нәтижелердің дизайны әзірленіп жатқан тұтынушылардың мінез-құлқына байланысты емес екеніне сенімді болу үшін жеткілікті мақалалар мен ақпаратты оқыдым. Мен сипатталған әдісті қолдануды шештім Джеймс ФостерКөптеген адамдар, соның ішінде біздің жетекші мобильді мамандарымыздың бірі сілтеме жасаған - Люк Вроблевски.

Біз бұған дейін бірнеше белгішелердің орналасуын және мәнерлерін (жиегі бар, жиегі жоқ, белгішесі бар, әртүрлі түстері және т.б.) сынап көрдік, бірақ қырық жылдан кейін сынақтан өткізу ниетіміздің күрделілігіне байланысты «Мәзір» сөзін ешқашан сынамадық. біз қолдайтын бір тіл. Дегенмен, біз алға жылжып, тіл мамандары тобының көмегімен аудармаларды тауып, сынақтан өттік:

Бастапқы «гамбургер» мәзір белгішесі тақырыптың сол жағында және оң жағында ақ бөлетін сызықпен орналасқан.

Бұрыштары дөңгеленген ақ жақтауы бар блоктың ішіндегі «Мәзір» сөзі де солға тураланған.

Біз бүкіл пайдаланушы базасында экспериментті іске қостық. Осы UI элементінің танымалдылығы мен кең таралғандығын ескере отырып, біз оны бүкіл әлем бойынша миллиондаған тұтынушыларымызбен, қолдау көрсетілетін тілде және әртүрлі құрылғыларда сынау тым көп уақытты қажет етпейді деп үміттендік.

Сонымен, соңғы нәтиже қандай? Бұл сөз Джеймс Фостердің тәжірибесіндегідей фастфудты жеңді ме, әлде тоқаш пен котлет жеңе ме?

нәтижелер

Әрине, бұл деректерді барлығына экстраполяциялау мүмкін емес. Кейбір елдерде кейбір тілдерде немесе құрылғыларда ол жақсырақ немесе нашар жұмыс істеген болуы мүмкін. Бірақ жаһандық ауқымда «гамбургерді» тым көп мазақ етті деп қорытынды жасауға болады. Тұтастай алғанда, бұл «Мәзір» сөзі сияқты танымал болды. Дизайн прогресін басқару рухында біз басқа нұсқаларды қарастыруымыз керек және гамбургер белгішесіне ірімшік, бекон және француз картоптарын қосып көріңіз, бірақ әзірге біз «үш қатарлы досымыз» екенін қуана хабарлаймыз. барлық жерде сыланған. Оның нақты орналасуы, пішіні, өлшемі, орны мен түсі, әрине, болашақ сынақтың тақырыбы болып табылады.

Әрине, бұл бәрімізге A/B тестісінің табиғаты туралы сабақ. Сіз ешқашан UI элементтерін, үлгіні немесе тұтастай функцияны сынамайсыз. Сіз бұл нәрселерді нақты және нақты сценарийлер бойынша өте нақты пайдаланушы аудиториясында сынайсыз. Booking.com үшін жұмыс істейтін нәрсе сізге немесе пайдаланушыларыңызға жұмыс істемеуі мүмкін. Бұл біздің A/B тестін өткізуіміздің себептерінің бірі. Басқа сарапшылардың тұжырымдары, басқа сайттардағы деректер немесе гамбургер жеу кезінде пабта жасалған гипотезалар біздің тұтынушылармен және платформамызда тексерілмейінше дәлелденбейді.

Өз метафорамызда адаспау үшін, бірақ бұл жақсы гамбургердің рецепті сияқты. Менен кейін барлық ингредиенттерді дәл жазып қойсаңыз да, сіз мүлде басқа гамбургер аласыз. Бұған, әрине, нарықтағы еттің сапасы, нанға пайдаланылатын ұн және басқа да мыңдаған факторлар әсер етеді. Жеке біз үшін бұл идея Booking.com үшін жақсы болса жақсы. Егер біз оны веб-сайтымызда қайталай алсақ және ол біздің барлық клиенттеріміз үшін жұмыс істесе.

Біздің пікіріміз

Онда ол мобильді қосымшада навигацияны ұйымдастыру үшін «гамбургер» мәзіріне бес балама ұсынды.

«Егер сіз цифрлық өнімдермен жұмыс жасасаңыз, гамбургер мәзірлері шатастыратын және тиімсіз болуы арқылы мобильді құрылғылардағы пайдаланушы тәжірибесіне қалай және неге зиян тигізетіні туралы ондаған мақалаларды оқыған боларсыз. Барған сайын көп жобалар балама мәзірді ұсыну нұсқаларымен тәжірибе жасауда», - деп жазады Золтан Коллин.

Дизайнер материалда көрсетілген баламалардың ешқайсысы басқаларға қарағанда ыңғайлы немесе тиімді емес екенін атап өтеді - олардың барлығы әртүрлі жағдайларға жарамды.

1. Қойындылар

Colleen атап өткендей, мобильді қолданбада бірнеше негізгі бөлімдер болса және пайдаланушылар сол бөлімдер арасында жылдам ауысуды қаласа, қойындылар пайдалы шешім болуы мүмкін.

Әзірлеушілер жиі, деп жалғастырады Коллин, қойындылар ең қарапайым шарлау үлгілерінің бірі екенін сезінеді. Бірақ мұндай мәзірді жасау кезінде сіз бірнеше ережелерді сақтауыңыз керек:

• Бес бөлімнен аспауы керек.
• Қойындылардың бірі (белсенді) көрнекі түрде бөлектелуі керек.
• Бірінші қойынды «үй» болуы керек. Қойындылар басымдылықпен немесе пайдалану реті бойынша реттелуі керек.
• Мәтінмән мен платформаға байланысты қойындыларды экранның жоғарғы немесе төменгі жағында орналастыруға болады.
• Пайдаланушы әрбір белгішенің нені білдіретінін нақты білетін болса және мүмкін болатын әрекеттермен таныс болса (мысалы, олар әлеуметтік желі қолданбалары үшін жарамды) қойындыларды көрсету үшін белгілердің орнына белгішелерді ғана пайдалану керек.

2. «Басқа» опциясы бар қойындылар

Қолданбаңызда бестен көп негізгі бөлім болса, Colleen бірінші мәзір түрінің өзгертілген нұсқасын – «Басқа» опциясы бар қойындыларды пайдалануды ұсынады. Бұл жағдайда әзірлеуші ​​панельде төрт жоғары басымдықты бөлімді орналастыра алады, ал қалғандарын қосымша қойындыда жасыра алады.

«Бұл гамбургер мәзірінен жақсы нұсқа емес сияқты көрінуі мүмкін, бірақ егер сіз қойындыларды пайдаланушыға қажет барлық ақпарат алғашқы төрт бөлімде болатындай етіп жасасаңыз, UX көп зардап шекпейді», - деп түсіндіреді Коллин.

3. Ашылмалы мәзір

«Басқа» бөлімі бар қойындыларды өзгерту - экран өлшеміне бейімделетін және әр ажыратымдылықта қойындылардың әртүрлі санын көрсететін мәзір. Экранға сәйкес келмейтін қойындылар «Басқа» бөлімінде аяқталады.

4. Жылжымалы мәзір

«Егер сізде бірнеше бөлім болса және негізгілерін анықтай алмасаңыз, қосымша бөлімдері бар қойындыларды пайдалану тиімді шешім болмауы мүмкін. Содан кейін мәзірдегі барлық элементтерді тізімдеп, панельді айналдыруға болады», - деп жазады Коллин.

Бұл шешімнің кемшілігі, дизайнер атап өтеді, бастапқыда пайдаланушы әлі де қойындылардың бір бөлігін ғана көреді, ал қалғанын көру үшін мәзірді айналдыру керек. Дегенмен, пайдаланушылар панельде тізімделген өнім санаттары бар онлайн дүкен қолданбасында немесе санат қойындылары бар жаңалықтар қолданбасында болса, бұл мәселе болмайды.

Айтуынша, дизайнерлер пайдаланушыларға қалай айналдыру керектігін түсініп, көрнекі белгілерді қамтамасыз етуі керек. Мысалы, соңғы элементке «өшіру» әсерін қолданыңыз.

5. Ашылмалы мәзір

Дизайнердің айтуынша, бөлімдердің көрінуі мен қол жетімділігі маңызды болмаған кезде қолданылатын қызықты, бірақ ең кең таралған емес үлгі бар - ашылмалы мәзір.

Бұл мәзір пайдаланушы бар беттің тақырыбы ретінде қызмет етеді. Сонымен қатар, сөз жанындағы көрсеткі смартфон иесіне ауыса алатын басқа бөлімдер бар екенін білуге ​​мүмкіндік береді. Опциялар жасырын болса да, пайдаланушыға олардың маңыздылығы бойынша ашық нұсқаға ұқсас немесе оның бөлімшелері екені түсінікті.

Кейде, Коллин атап өтеді, гамбургер мәзірі жақсы шешім болуы мүмкін. Дизайнердің айтуынша, бұл үлгіні негізгі мәзірді құрастыру кезінде пайдалану ұсынылмайды, бірақ ол қосалқы шарлау функциялары үшін пайдалы болуы мүмкін. «Гамбургерді» пайдаланушы негізгі экранда барлық негізгі әрекеттерді орындаған кезде де қолдануға болады - мысалы, Uber қосымшасындағы сияқты.

Қарапайым, функционалды, интуитивті және есте қаларлық, кез келген жол белгісі сияқты, гамбургер белгішесі өткен жылы нағыз тренд болды және кез келген заманауи веб-сайт пен мобильді қосымша дизайнының ажырамас элементі болды.

Бұл қарапайым белгіше мәзір тізімінің көрінісін қайталайды, ол шағын экранды құрылғылар мен көрнекіліктер маңызды және навигацияны шетте ұстау қажет веб-сайттар үшін өте қолайлы. Бұл қазіргі заман талабына сай өте тиімді және өміршең шешім.

Кез келген басқа интерфейс элементі сияқты, гамбургер белгішесінде әрбір жеке жобаның қажеттіліктеріне негізделген бастапқы нұсқадан кейбір ауытқулар болуы мүмкін.

Жобаға және тақырыпқа байланысты гамбургер белгішесі дизайнды толықтыратын немесе оның өзіндік ерекшелігіне айналуы мүмкін әртүрлі пішіндерді қабылдауы мүмкін.

Бүгінгі топтама гамбургер белгішесінің 20 түрлі нұсқасын қамтиды.

Дизайнер Dave Games ұсынған гамбургер белгішесі бірден көп жылу энергиясын береді. Мультфильм стилі ойнақылықты қосады және тек ең жағымды эмоцияларды тудырады. Сіз мұндай белгішені заманауи суреттелген интерфейстердің көпшілігінде қауіпсіз пайдалана аласыз.

Бұл мұхит толқынының белгішесін Мэт Уокер жасаған. Ол теңізге арналған әртүрлі жобаларда өзін жақсы сезінеді. Негізгі түс ретінде ашық көк және оның айналасындағы жиек бұл белгіні ерекше етеді.

Таза, жарқын және тапқыр іске асыру бұл дизайнды пісіру сайттарында мәзір белгішесі ретінде жұмыс істеуге мүмкіндік береді. Бұл жағдайда интерфейс жағымды көркем бұрылыс алады.

Дизайнер жанмен жасалған гамбургер белгішелерінің 10 қызықты нұсқасын ұсынады. Бұл серия гамбургерлердің әртүрлі түрлерін қамтиды: біреуі ірімшікпен, екіншісі беконмен, екіншісі күркетауықпен және басқалары. Егер сізде фастфуд мейрамханасына арналған веб-сайт немесе мобильді қосымша болса, онда олар міндетті түрде пайдалы болады. Олардың көрнекілігі соншалық, олар кез келген тақырыпта дерлік орын таба алады.

Және бұл жоба вектордағы шынайы гамбургерді білдіреді. Жабу түймесі тұздығы бар немесе соуссыз «X» пішінін алатын француз фри түрінде жасалған. Бұл бет дизайнына экзотика қоса алатын шығармашылық шешім.

Ресми Star Wars веб-сайтында айналатын қызықты гамбургер белгішесі бар. Әрбір сызық лазерлік қылыштардың сәулесінің шағылысу векторын алу үшін екі бөлікке бөлінеді. Шешім сайттың жалпы әсерін арттырады және брендті нығайтады.

Питер Творидің Бургер мәзірі - бұл белгішенің әдемі суреттелген нұсқасы. Бұл белгішенің басты ерекшелігі - кесілген тоқаш пен ет пирогына ұқсайтын түстерді таңдау.

Серияда сызық стилі арқылы жүзеге асырылатын әртүрлі гамбургер опциялары бар. Мұнда сіз қос гамбургерді, ірімшік пен салат қосылған гамбургерді, ашық сэндвичті және тағы басқаларды таба аласыз. Сіздің ұқыпты, тегіс интерфейсіңіз үшін тамаша шешім табу дәм мен талғамды қосу оңай болады.

Суретші түйменің үш қызықты нұсқасын көрсетеді: классикалық гамбургер, чизбургер және хот-дог. Әрқайсысы бір немесе екі түске негізделген, бұл оны әртүрлі кішкентай интерфейстерге қолайлы етеді. Мұнда түс сэндвичтің дұрыс көрінісін жасайды.

Суретші тек бір мәзір белгішесін және кәдімгі «X» (жабу түймесі) түрлендіруімен бірге жүретін бірнеше өшуді қамтитын шағын анимацияны ұсынады. Тінтуірді апарғанда немесе басқанда арнайы әсерлер пайда болады.

Жоғарыдағы мысалдардың көпшілігінен айырмашылығы, бұл мысал түсті емес, салмақты шебер басқаруды көрсетеді. Үстіңгі және астыңғы сызықтар ортасынан гөрі батылырақ және дұрыс «гамбургер» көрінісін жасайды. Суретші тапсырманы сәтті орындады.

Эндрю Ковардаковтың ниндзя белгішесінің мәзір анимациясы гамбургер түймелерінің көпшілігінен ерекшеленеді және жұмбақ және тартымды реңкпен қызықты және ерекше шешім ұсынады. Мұнда әрбір жол вектордағы ниндзя болып табылады.

Ал бұл белгіше салат пен ірімшік қосылған бургердің суреті. Ол кез-келген қызықсыз интерфейске біраз дәм қоса алады. Мейрамхана немесе кафе веб-сайты үшін тамаша шешім.

Бұл сәнді мәзір белгішесі туралы қызықты талқылауларды таба алатын мақала. Ол гамбургер түймесінің үш нұсқасын көрсететін суретпен белгіленген. Біріншісі - жоғары сапалы жалпақ иллюстрация, екіншісі - түсті үш сызықты белгіше, ал үшіншісі - екінші дизайнның монохроматикалық нұсқасы - дизайнерлер арасында ең танымал таңдау.

GIF осы минималистік және талғампаз белгішенің бастапқы күйі мен оның соңғы күйі арасындағы тегіс ауысуларды көрсетеді. Анимация төменгі жолдан басталатындықтан, ол басқаларға қарағанда қысқа.

Лиам Спрадлиннің гамбургер мәзірі мектеп бетбелгілерінің жиынтығына ұқсайды. Бұл іске асыру батыл және біршама өрескел. Бұл белгіше бірден байқалады, бірақ ол үшін дұрыс ортаны табу қиын болуы мүмкін.

Осы уақытқа дейін біз белгішелерді бөлек қарастырдық, бірақ олар сөздермен жақсы жұмыс істейді, әсіресе сөз «Мәзір» болғанда. Бұл шамадан тыс болып көрінгенімен, олар бірге күрделі көрінеді. Бұл жағдайда пайдаланылатын тым жұқа ені 1 пиксель сызықтар басқатырғыш бөліктері сияқты бір-біріне сәйкес келеді.

Жоба гамбургер белгішесі жиектеу кезінде жарқынырақ және тартымды көрінетінін дәлелдейді. Бұл белгіше сенсорлық навигацияға ыңғайлы болатын шағын құрылғылар үшін тамаша таңдау.

Дизайнер крест немесе көрсеткі болу үшін әртүрлі метаморфозалардан өтетін қарапайым, тегіс үш сызықты белгішені көрсетеді. Анимация кез келген жоба үшін пайдалы болуы мүмкін бірнеше шешімдерді қамтиды.

Нәтижелер

Бір қарағанда, мәзір белгішесі сияқты кішкентай нәрсеге көп назар аударудың қажеті жоқ сияқты көрінуі мүмкін. Бірақ егер сіз аздап қиял көрсетсеңіз, оны интерфейстің қандай да бір ерекшелігіне айналдыра аласыз. Әсіресе, егер әзірлеушілер оның мағынасымен ойнай бастаса және оны дәстүрлі емес және көздің жауын алатындай ету үшін көркемдік әдістерді қолданса.

Виталий Рубцов оны жүзеге асыруға деген ұмтылысына қарсы тұра алмады.

Бұл оқулықта мен мұны JavaScript қолданбай тек CSS арқылы қалай жасау керектігін көрсетемін. Сонымен, біз CSS (және SCSS) трюктерін көреміз, бұл бізге анимацияларды осы анимациялық GIF сияқты тегіс дерлік жасауға мүмкіндік береді.

Міне, біз не істейтінімізге мысал:

Белгілеу

Біз қолданатын HTML құрылымынан бастайық. Жақсырақ түсіну үшін пікірлерді қараңыз.

SCSS мәнерлерін іске қосу

Енді біз қалаған көріністі алу үшін кейбір негізгі сәндеуді қосамыз. Код өте қарапайым.

/* Негізгі стильдер */ * ( қорап өлшемі: жиек-бокс; ) html, дене ( жиек: 0; ) дене ( шрифт-топ: sans-serif; фон-түсі: #F6C390; ) a ( мәтінді безендіру: жоқ; ) .контейнер (орн: салыстырмалы; жиек: 35px авто 0; ені: 300px; биіктік: 534px; фон түсі: #533557; толып кету: жасырын; )

Ауыстыру операциясы

Интерфейстің қалған бөлігін жасауды бастамас бұрын, бір күйден екінші күйге оңай ауысу үшін кейбір ауыстырып-қосқыш функцияларын қосамыз.

Бізге қажет HTML қазірдің өзінде бар. Және оны жұмыс істейтін стиль келесідей:

// Құсбелгіні жасыру #toggle ( display: none; ) // Құсбелгі қойылғанда "ашық" күйіне арналған мәнерлер #toggle:checked ( // Мәзірді ашқан кезде мәнерін өзгерту қажет кез келген элемент осында болады. селектор ~ // Шарлау мәзірін ашуға арналған мәнерлер, мысалы & ~ .nav ( ) )

Жабық күй құру

Жабық күйге келтіру үшін гамбургер белгішесін алу үшін мәзір элементтерін жолдарға түрлендіру керек. Бұл түрлендіруге қол жеткізудің бірнеше жолы бар. Біз мұны осылай жасауды шештік:

Міне, оны жүзеге асыратын код.

$өту ұзақтығы: 0,5 с; // Шарлау элементтерін гамбургер белгішесін құрайтын жолдар ретінде көрсету.nav-item (позиция: салыстырмалы; дисплей: кірістірілген блок; қалқымалы: солға; анық: екеуі де; түсі: мөлдір; қаріп өлшемі: 14 пиксель; әріптер аралығы: - 6.2px; white-space: nowrap: $transition-duration, opacity :nth-child(1) ( әріп аралығы: -8px; ) // Add екінші жолдың ені &:nth-child(2) ( әріптер аралығы: -7px; ) // Төртіншіден басталатын элементтердің параметрлері & :nth-child(n + 4) ( әріптер аралығы: -8px; маржа -жоғарғы: -7px; мөлдірлік: 0; // Гамбургер белгішесі үшін сызықтарды алу &:бұрын (позиция: абсолютті; мазмұн: ""; жоғарғы : 50%; ені: 100%; фон-түсі: #EC7263; translateY (-50%) өту: $өту-ұзақтық;

Мұнда біз ең маңызды шарлау элементтеріне арналған негізгі стильдерді ғана қосқанымызды ескеріңіз. Толық кодты Github сайтынан таба аласыз.

Ашық мәзір жасаңыз

Ашық мәзірді жасау үшін біз шарлау элементтерін жолдардан кәдімгі мәтіндік сілтемелерге дейін қалпына келтіруіміз керек, сондай-ақ бірқатар шағын өзгертулер енгізуіміз керек. Мұны қалай жасау керектігін көрейік:

$өту ұзақтығы: 0,5 с; #toggle:checked ( // Open & ~ .nav ( // Меню белгішесінің "жолдарынан" шарлау элементтерін қалпына келтіріңіз.nav-item ( түсі: #EC7263; әріптер аралығы: 0; биіктік: 40px; сызық- биіктік: 40px margin-top: 0 transition: $transition-duration, 0.1s // жолдарды жасыру ( opacity: ) )

Сиқыр кішкентай нәрселерде

Егер біз gif-ке мұқият қарайтын болсақ, біз мәзірдің барлық элементтері бір уақытта емес, шахмат үлгісінде жылжытылғанын көреміз. Біз мұны CSS-те де жасай аламыз! Негізінде, біз әрбір элементті таңдап алуымыз керек ( :nth-child көмегімен) және біртіндеп ұлғайту үшін көшу-кідіріс мәнін орнату. Бұл сөзсіз қайталанатын жұмыс. Егер бізде көбірек элементтер болса ше? Уайымдамаңыз, біз кішкене SCSS сиқырының көмегімен бәрін жақсарта аламыз:

$элементтер: 4; $өту кідірісі: 0,05с; .nav-item ( // @for $i 1-ден $items ( &:nth-child(#($i))) ( $delay: ($i - 1) * $transition жабылған кезде шарлау элементтері үшін кідірісті орнату - delay transition-delay: $delay &:befor ( transition-delay: $delay; ) ) )

Осы кодпен біз жабу анимациясының қажетті қадамдық әрекетін алатынымызды ескеріңіз. Қадамдық ауысуды қайтару үшін $delay мәнін ашу анимациясынан сәл өзгеше есептеу керек. Бұл сияқты:

$кідіріс: ($элементтер - $i) * $өту-кідірту;

Қорытынды

Біз сәнді мәзірді дайындадық! Біз сондай-ақ анимацияланған gif-тегі кейбір жалған элементтерді қостық және сіз көре аласыз.

Осылайша, біз тек CSS көмегімен қарапайым және функционалды мәзір жасадық. Дегенмен, егер сіз CSS ауыстырып-қосқыш жүйесін пайдаланғыңыз келмесе, оны көп күш жұмсамай-ақ JavaScript-тің бірнеше жолдарымен тамаша ауыстыруға болады.

Сізге бұл оқулық ұнады және пайдалы болды деп үміттенеміз!