Икона на хамбургер: нови начини за използване. Защо трябва да избягвате менютата с хамбургери и как да го направите

Ще ви бъде по-трудно да предоставите информация на потребителя за конкретен елемент, ако той е видим само когато потребителят отвори менюто, търсейки друг елемент.

Можете да го направите като в приложението Jawbone Up: покажете икона, отразяваща същността на известието до бутона странично меню.

Този подход не се мащабира много добре, защото включва създаване голямо количествоспециални икони и вие, като дизайнер, понякога ще трябва да използвате стандартни икони, които имат по-малко значение.

Ето обратния пример: лентата с раздели на Twitter, която показва на потребителя контекста на известието и му позволява да отиде директно на съответния екран.

Осъзнаване на проблема

Може да изглежда, че вие длъженправим всичко това, за да спестим повече недвижимо пространство на екрана, но често не разбираме какво всъщност виждат хората. Може да ви се струва, че хората виждат всичко, което е пред очите им, но в действителност всички имаме определена зона на концентрация, дори ако размерът на екрана е минимален ().

Следователно проблемът със спестяването на екранно пространство може да бъде разрешен без компромис с навигацията — и в съответствие с основни принципи HCI (взаимодействие с човешки компютър), които изискваме да предоставим обратна връзкаи показване на състоянието на приложението.

Забележка: Може да се наложи да освежите разбирането си за принципите на HCI —„Почти съм сигурен, че това ще ви помогне да избегнете много дизайнерски грешки, които хората с визуален подход към дизайна правят.

Решение

Говорихме много за проблема, но решението все още не е ясно.

Кога можете да използвате менюто с хамбургери?

В някои много редки случаи този модел е действително оправдан, но като цяло трябва да се избягва.

IRCCloud е пример за оправдано (до известна степен) използване на бутона за хамбургер: той се използва за навигация между канали и участници в канала.

Това е приемливо, тъй като основният екран няма дъщерни екрани, които се нуждаят от йерархична навигация; цялото съдържание е представено в модална форма.

Но дори и в този случай е ясно, че интерфейсът е претоварен и информационната архитектура изисква преразглеждане.

Страничното меню, показващо членовете на канала (вдясно), заема мястото на бутон за действие, под който могат да бъдат скрити всички действия, свързани с каналите. Вместо това дизайнерите трябваше да смесят всичко възможни действия(свързани с канали, мрежа и акаунт) в едно меню за действие:

Това ни води плавно до следващия раздел на статията:

Как да сменим бутона за хамбургер?

Моделът на страничното меню води до лошо информационна архитектура: Бутонът за хамбургер е друг елемент на интерфейса, който не показва никаква последователност от действия — докато хората не го използват.

„Решението е да актуализираме информационната архитектура.“

Снимките по-горе са пример за това как можете да избегнете страничното меню. Цветните точки ви помагат да проследите как са реорганизирани елементите на интерфейса.

Изводи:

1. Състоянието се представя в раздела Съобщения
2. Елементите на интерфейса са винаги видими и достъпни
3. Няма конфликт между жестовете за навигация

В допълнение към решаването на основните проблеми, можем да спечелим малко вертикално пространство, като скрием навигационната лента на приложението при превъртане надолу (вижте Facebook за пример, но това се използва и в Safari). Лентата с раздели остава на мястото си, което ни позволява да навигираме дори когато лентата за навигация на приложението е скрита.

Ако сте в минималистично настроение, може би една лента с инструменти ще е достатъчна. Въпросът е да направите навигацията видима, да дадете директен достъп до функциите, да избегнете конфликти между жестовете за навигация и да показвате предупреждения върху иконите, към които принадлежат.

[Актуализация] В случай на уебсайтове, вие също трябва да преразгледате информационната архитектура, но вместо да използвате тези модели на iOS, препоръчвам да показвате навигацията в горната част, в списък: пример. Ако е очевидно, че това е навигацията на сайта, хората определено ще превъртят по-нататък и веднага ще видят всички други налични опции.

Освен това, да се върнем към темата за уебсайтовете мобилни устройстваах: не забравяйте да премахнете забавянето при докосване от 300 ms, като използвате тези съвети или като използвате събития при докосване.

Как се мащабира всичко това?

Тук давам примери за iOS интерфейси —  най-доброто решениевърху тях е използването на панел с раздели или инструменти.

Но какво ще стане, ако лентата ви с раздели има повече от 5 елемента?

В такива ситуации първото нещо, което трябва да направите, е да преразгледате информационната архитектура на приложението. Но ако все пак трябва да отидете отвъд петте раздела, обикновено се използва следният метод: последния разделдава достъп до списък с оставащи опции.

Тази реализация е изправена пред друг проблем: след превъртане лентата с инструменти остава в недефинирано състояние. Rookie скрива панела, след като потребителят избере едно от действията — изрязване, завъртане и т.н. по този начин неопределено състояниепанелът се „нулира до нула“ и при повторно отваряне се показва в първоначалното си състояние.

Заключение

И така, прочетохте статия за проблемите с модела на страничната лента и тяхното решение в iOS, които бяха вградени в системата от самото начало.

Надявам се статията да ви е била полезна и разбираема. Ако имате коментари, моля пишете ми

Вероятно вече сте уморени да четете статии и постоянно да слушате различни дискусии за три къси линиименю за хамбургери. Това лоша техника за проектиране на потребителски интерфейс ли е? Или не е лошо? Тази публикация е различна - тя няма да прецени дали това меню е добро или лошо. Въпросът е, че не мисля, че това е най-доброто дизайнерско решение, по един или друг начин. Но менюто за хамбургери също има свое собствено силни страни, особено когато се използва в мобилен дизайн, в условия на ограничено пространство. И така, какво можем да направим? Просто приемете менюто за хамбургери такова, каквото е, въпреки всички недостатъци, и продължете живота си? Много сайтове и приложения изглежда са се примирили с това. И вярвам, че съм способен на най-доброто.

И тогава се случиха две неща, които ме накараха да променя решението си. Първо, попаднах на. Това е статия, която наистина помага да се разберат последиците от използването на меню за хамбургери. По-специално, сайтовете с такива менюта страдат от сериозен спад в ангажираността на потребителите. Прегледът на такава статистика просто започна да променя мнението ми.

Следващият инцидент се случи, когато наблюдавах колега, който се опитваше да използва ново уеб приложение, което имаше точно такова меню. Това беше разработчик, който беше много запознат с интерфейса на менюто за хамбургер, но когато се стигна до използването на приложението за неговите нужди, той високо попита: „Как да отида там?“ Моля, имайте предвид, че това е един от най-умните хора, което знам, и той дори не си помисли да докосне иконата на менюто за хамбургер. Ако някой толкова умен има проблеми с навигацията, какво казва това за типичния потребител? Моето мнение най-накрая придоби солидна основа.

Намиране на решение

Стига толкова за причините за недоверието ми в силата на хамбургер менюто – време е да поговорим за решението. Първо, разгледах конкретните ползи от използването на меню за хамбургери:

• Мащабируемост: това е може би основният плюс и основна причиназащо толкова много сайтове и приложения го избират. Можете да поставите много навигационни елементи зад малка икона.
• точност: това върви ръка за ръка с мащабируемостта, но все пак не е същото. Дизайнерите искат да създават стегнат и спретнат дизайн, оставяйки достатъчно място за основното съдържание. Използването на меню за хамбургер дава усещане за визуална простота, която е привлекателна за всеки дизайнер.

И ако искаме да създадем алтернатива на менюто с хамбургери, тя трябва по някакъв начин да реши проблемите, свързани с него:

• Разбираемост: Навигационните елементи трябва да могат да бъдат лесно намирани, особено от тези, които използват продукта за първи път.
• Годеж: Интерфейсът трябва да предоставя съвети и обратна връзка, които обясняват какво може да прави потребителят с продукта и кога е подходящо да използва определени функции.

Сложната част: мобилен

Реших да започна с най-много сложен проблеми проверете дали моето решение е подходящо за мобилни дизайни. След като обмислих много идеи, стигнах до извода, че менюто на лентата с раздели на iOS е едно от най-добрите решения за мобилни интерфейси. Много хора са се опитвали да направят лентата с раздели възможност за превъртане (за да побере повече от пет опции) или да добавят „още“ към навигацията - нещо като Plyushkin, който има допълнителна стая, която бързо ще се напълни с боклуци. Освен това и двете опции все още не изпълняват основното изискване - липсва яснота, видимост на всички възможности. И така, какво можете да направите с менюто с раздели, за да поправите това?

Моето решение е да комбинирам хамбургера и лентата с раздели в един подход. Резултатът е лента с раздели, която отваря набор от опции за всеки елемент от менюто.

Създадох тестово приложениеда оцените производителността на екипа, за да илюстрирате вашия подход в действие. Използвайки този метод, потребителят може ясно да види основните функции и приложения на продукта. И вместо да заспи пълен списъкелементи от менюто, скрити зад иконата на хамбургер, на потребителя се показват няколко опции, които се отнасят до раздела, върху който е щракнал. Това прави навигацията по-лесна за разбиране и смилане, всичко, от което се нуждаете, е винаги под ръка и позволява на потребителя да вижда йерархията на приложението.

Друго предимство на този дизайн е възможността за използване на контекстни известия. В случай на меню за хамбургери имате само едно място за показване на тези известия. Ако се придържате към оформление на лента с раздели, можете да предоставите подсказки на потребителя за всеки от елементите на менюто, които избере.

Разбира се, най-голямата печалба от този подход е скалируемостта. Да, все още сте ограничени до пет категории, но това е добре. Честно казано, мисля, че всеки сайт може да постави опциите си в пет категории, ако дизайнерът обмисли разумно навигацията. В крайна сметка във всяка от тези категории може да има още пет или шест подпозиции.
Общо има 30 възможни опции за навигация без усещането за претоварване на потребителя и без да заема цялото пространство на екрана.

Приложение към таблети

Интегрирането на такава лента с раздели в таблети изглежда странно. Таблетите са много по-гъвкави и използването на същия потребителски интерфейс като мобилни устройства изглеждаше толкова неудобно, колкото тийнейджър, носещ дрехи, които отдавна е надраснал. Така че тръгнах по различен път. Вместо да поставя лентата с раздели в долната част, аз я поставих отстрани. Това се оказа по-удобно от гледна точка на използване на пространството на екрана и изглеждаше много естествено. Освен това много потребители държат таблета отстрани, така че това е целевата зона за докосване с пръст.

Какво ще кажете за работния плот?

Пригответе се...изтеглящо се меню. Точно така – опитайте този подход на десктоп интерфейс и ще се сблъскате с неоспорима реалност: тази опция изобщо не е нова. Плъзгащите се менюта съществуват от години и почти всеки (дори майка ви) знае как работи. Това е красотата на този подход – не е нищо ново.

Пълно разкриване

Не знам как да нарека това нещо. Плъзгач за инкрустация? Или TABurger (TAB “tab” + burger)? Освен това не знам дали някой е създавал подобно решение преди. Предвид простотата на такова меню, не мога да понеса мисълта, че съм бил първият. Знам, че няколко приложения използват плъзгащи се менюта на някои бутони на раздели (като Tweetbot), но те обикновено се изпълняват по този начин бърз достъпза функции за напреднали потребители, а не с цел увеличаване на навигационната йерархия. Ако имате такъв пример, уведомете ме в коментарите.
Няма значение дали такова меню е ново или отдавна измислено. Важното е дали това е по-добро, по-креативно решение за навигация от меню за хамбургер. Спрете да си казвате „Този ​​готин сайт има такова меню, така че трябва да е най-доброто“ или „Всички го правят, така че трябва да е правилно“. Дизайнът заслужава по-добър, по-обмислен подход.
АКТУАЛИЗАЦИИ
Колин Еберхард отбеляза в Twitter, че същият потребителски интерфейс е внедрен в Windows Phone. Аз самият потребител на WindowsТелефон, и той е прав. Въпреки че този тип взаимодействие се използва в Windows Phone само за опцията „още“ в лентата с раздели.

Джеймс Перих даде друг пример в Twitter. Разгледайте AHTabBarController, създаден от Arthur Hemmer.

Иконата на хамбургера е навсякъде. Навсякъде около нас. В уеб приложения, на мобилни и настолни сайтове, в софтуер. Тази вездесъща икона с три реда е толкова често срещана в наши дни, че изглежда сякаш е уникално свързана с навигационното меню. Но вярно ли е това?

IN напоследъкдискусиите за ефективността на иконата на хамбургера достигнаха нови висоти. Статии от изтъкнати дизайнери и няколко сайта, включително The Atlantic, TechCrunch, The Next Web и Nielsen Norman Group, заключават, че това е UX анти-модел, модерна и лесна за внедряване икона, която е регресия от по-прости, по- изразителни алтернативи. Но анти-шаблон или не, използването на иконата е нараснало толкова много, че е почти постоянно на повечето уебсайтове, особено на малки екрани.

Предвид позицията ми на дизайнер в екипа на m.booking.com и използването на тази икона за показване на плъзгащо се меню, реших да проуча този обект. Започнах с изучаване на произхода на иконата, за да се опитам да разбера пътя й към позора.

Това звучи обещаващо. Но въпреки че иконата е класическа и съществува завинаги, уеб дизайнерите са по-малко последователни в нейното използване. Иконата се използва за списъци, плъзгане и пренареждане, подравняване и др. Може би тази злоупотреба обяснява критиката му като икона на менюто. Може би поради широкото разпространение и различни употребитази икона е загубила способността си да предава единна метафора и на свой ред оставя потребителите объркани.

Цялата тази история ме накара да си задам въпроси: „Ние наистина ли сме в грешка, а всички останали са прави? Това причинява ли неудобство на нашите потребители? Има ли хора, които наистина разбират какво представляват тези три малки реда на нашия уебсайт?“

Редовните читатели на този блог няма да се изненадат да научат, че следващата ни стъпка беше да зададем тези въпроси под формата на A/B тест. Както всичко останало, иконата на хамбургер беше подложена на влиянието на многобройните ни клиенти, които чрез взаимодействие с менюто трябваше да определят дали иконата е най-доброто решение. До този момент бях прочел достатъчно статии и информация, за да съм уверен, че липсата на консенсус или различните резултати не се дължат на поведението на клиентите, за които се разработва дизайнът. Реших да следвам описания метод Джеймс Фостър, споменат от много, включително един от най-добрите ни мобилни специалисти — Лука Врублевски.

Преди това тествахме няколко разположения и стилове на икони (с рамка, без рамка, с икона, различни цветове и т.н.), но никога не сме тествали думата „Меню“ поради сложността на нашето желание да тестваме в четиридесет един език, поддържан от нас. Ние обаче продължихме, намерихме преводите с помощта на нашия екип от езикови експерти и проведохме теста:

Нашата оригинална икона на менюто „хамбургер“ е вляво от заглавието и с бяла разделителна линия вдясно.

Думата „Меню“ в блок с бяла рамка с заоблени ъгли, също е подравнен вляво.

Стартирахме експеримент в цялата ни потребителска база. И също така, предвид популярността и повсеместното разпространение на този елемент потребителски интерфейс, надявахме се, че няма да отнеме много време, за да тестваме милиони наши клиенти по целия свят, на всеки поддържан език и голям бройустройства.

И така, какъв е крайният резултат? Думата победи ли бързата храна, както стана в експеримента на Джеймс Фостър, или кифлата и котлетът ще спечелят?

Резултати

В този експеримент замяната на иконата с думата „Меню“ не оказа значително влияние върху поведението на нашите потребители. С помощта на нашата огромна потребителска база, ние можем много висока степенВероятно, особено за посетителите на Booking.com, иконата на хамбургер изпълнява ролята си по същия начин като версията с текстово описание.

Разбира се, не можем да екстраполираме тези данни към всичко. В някои държави, на някои езици или устройства, може да е работил по-добре или по-зле. Но в глобален мащаб можем да заключим, че „хамбургерът“ беше твърде много забавен. Като цяло беше толкова разпознаваем, колкото думата „Меню“. В духа на управление на напредъка в дизайна вероятно трябва да обмислим други опции и може би да опитаме да добавим сирене, резен бекон и пържени картофи към нашата икона на хамбургер, но засега сме щастливи да съобщим, че нашият „приятел с три реда“ е измазана навсякъде. Действителното му разположение, форма, размер, позиция и цвят, разбира се, са предмет на бъдещи тестове.

Със сигурност това е урок за всички нас относно естеството на A/B тестването. Никога не тествате елементите на потребителския интерфейс, модела или функцията като цяло. Тествате тези неща върху много специфична потребителска аудитория при конкретни и специфични сценарии. Това, което работи за Booking.com, може да не работи за вас или вашите потребители. Това е една от причините да направим нашето A/B тестване. Констатации от други експерти, данни от други сайтове или хипотези, измислени в кръчма, докато ядете бургер, ще бъдат недоказани, докато не бъдат тествани с нашите клиенти и на нашата платформа.

За да не се изгубим в собствената си метафора, но това е като рецепта за добър хамбургер. Дори да сте записали всички съставки точно след мен, ще получите напълно различен хамбургер. Това, разбира се, ще бъде повлияно от качеството на предлаганото на пазара месо, брашното, което се използва за хляб и хиляди други фактори. За нас лично идеята е добра, ако е добра за Booking.com. Ако можем да го повторим на нашия уебсайт и дали работи за всички наши клиенти.

Нашето мнение

Винаги трябва да тествате идеите си и да видите какво ви казват данните и какви въпроси възникват. Моят съвет? Отхапете и вижте какво ще стане.

Прост, функционален, интуитивен и запомнящ се като всеки друг пътен знак, иконата на хамбургер се превърна в истинска тенденция миналата година и неразделен елемент от всеки модерен дизайн на уебсайт и мобилно приложение.

Тази проста икона симулира външен видсписък с менюта, идеален за устройства с малки екрании уебсайтове, където визуалната страна е важна и навигацията трябва да стои настрана. Това е много ефективно и жизнеспособно решение, което отговаря на изискванията на съвременния свят.

Както всеки друг елемент на интерфейса, иконата на хамбургер може да има някои отклонения от оригинална версия, въз основа на нуждите на всеки отделен проект.

В зависимост от проекта и темата, иконата на хамбургер може да вземе различни форми, които допълват дизайна или могат да станат негова самостоятелна, отличителна черта.

Днешната колекция включва 20 различни вариации на иконата на хамбургер.

Иконата на хамбургера от дизайнера Дейв Геймс веднага излъчва много топла енергия. Анимационният стил добавя игривост и създава само най-положителните емоции. Можете безопасно да използвате такава икона на повечето модерни илюстрирани интерфейси.

Тази икона на океанска вълна е проектирана от Мат Уокър. Тя ще се чувства страхотно в различни проекти, посветени на морето. Светло синьото като основен цвят и рамката около него правят тази значка изключителна.

Изчистената, ярка и остроумна реализация ще позволи на този дизайн да работи като икона на меню в сайтове за готвене. В този случай интерфейсът ще получи приятен артистичен обрат.

Дизайнерът предлага 10 интересни версии на икони за хамбургери, които са направени с душа. Корици на сериали различни видовебургери: един със сирене, друг с бекон, трети с пуешко и много други. Ако имате уебсайт или мобилно приложениепосветен на ресторанта бързо хранене, тогава те със сигурност ще ви бъдат полезни. Те са толкова визуално интересни, че могат да намерят място в почти всяка тема.

И този проект представлява реалистичен хамбургер във вектор. Копчето за затваряне е направено под формата на пържени картофи, във формата на „Х“, със или без сос. Това е креативно решение, което може да придаде екзотика на дизайна на страницата.

Официален сайт Междузвездни войнивключва интересна икона на хамбургер, която се върти. Всяка линия е разделена на две части, за да се получи векторът на отражение на светлината на лазерните мечове. Решението укрепва общо впечатлениеот сайта и укрепва марката.

Burger Menu от Peter Twaury е красиво илюстрирана версия на иконата. Ключова характеристикаТази икона се състои от избор на цветове, които имитират нарязана кифла и баничка с месо.

Сериалът има различни опциихамбургери, които са реализирани чрез стил на линия. Тук ще намерите двоен хамбургер, хамбургер със сирене и маруля, отворен сандвич и няколко други. Намерете перфектно решениеза вашия спретнат, плосък интерфейс ще бъде лесно да добавите подправка и „вкус“.

Художникът демонстрира три забавни версии на бутона: класически хамбургер, чийзбургер и хот-дог. Всеки е базиран на един или два цвята, което го прави подходящ за различни малки интерфейси. Тук цветът създава правилния вид на сандвича.

Художникът предлага малка анимация, което включва само една икона на менюто и няколко избледнявания, които придружават трансформацията до обикновен „X“ (бутон за затваряне). Има специални ефекти, които се появяват, когато задържите курсора на мишката или щракнете.

За разлика от повечето примери по-горе, този пример показва умело манипулиране на теглото, а не на цвета. Горната и долната линия са по-смели от средната и създават точния вид на "хамбургер". Художникът се справи успешно със задачата.

Анимацията на менюто на иконата на нинджа от Андрю Ковардаков се различава от повечето бутони за хамбургер и предлага интересно и нестандартно решение, с мистериозен и атрактивен оттенък. Тук всеки ред е нинджа във вектор.

И тази икона е илюстрация на бургер с маруля и сирене. Може да добави малко жар към всеки скучен интерфейс. Страхотно решениеза уебсайт на ресторант или кафене.

Това е статия, в която можете да намерите интересни дискусии за модерната икона на менюто. Той е маркиран с изображение, което показва три варианта на бутона за хамбургер. Първата е първокласна плоска илюстрация, втората е цветна икона с три реда, а третата е монохромна версия на втория дизайн - най-популярният избор сред дизайнерите.

GIF показва плавни преходимежду първоначалното състояние на тази минималистична и елегантна икона и крайното й състояние. Тъй като анимацията започва от долния ред, тя е по-кратка от останалите.

Менюто за хамбургери на Лиъм Спрадлин изглежда като набор от училищни отметки. Това изпълнение е смело и донякъде грубо. Тази икона се забелязва веднага, но може да е трудно да се намери правилната среда за нея.

Досега разглеждахме иконите отделно, но те работят добре с думи, особено когато думата е „Меню“. Въпреки че може да изглежда пресилено, те изглеждат изискано заедно. Ултра тънките линии с ширина 1 пиксел, използвани в този случай, пасват заедно като парчета от пъзел.

Проектът доказва, че иконата на хамбургер може да изглежда по-ярка и по-привлекателна, когато е поставена в рамка. Това е отличен избор за малки устройства, където такава икона ще бъде удобна за сензорна навигация.

Дизайнерът показва проста, елегантна икона с три реда, която претърпява различни метаморфози, за да се превърне в кръст или стрела. Анимацията включва няколко решения, които могат да бъдат полезни за всеки проект.

Резултати

На пръв поглед може да изглежда, че такова малко нещо като иконата на менюто не си струва да се обръща много внимание. Но ако покажете малко въображение, можете да го превърнете в някакъв акцент на вашия интерфейс. Особено ако разработчиците започнат да си играят със значението и употребата му художествени техникиза да стане по-нетрадиционен и привличащ вниманието.

От Виталий Рубцов не можах да устоя на желанието да го реализирам.

В този урок ще ви покажа как да направите това, като използвате само CSS, без никакви използвайки JavaScript. Така че ще видим някои CSS (и SCSS) трикове, които ще ни позволят да постигнем почти същото гладка анимация, като този анимиран gif.

Ето пример за това, което ще правим:

Маркиране

Нека започнем с HTML структурата, която ще използваме. Вижте коментарите за по-добро разбиране.

Стартиране на SCSS стилове

Сега нека добавим малко основен стил, за да получим външния вид, който искаме. Кодът е доста прост.

/* Основни стилове*/ * ( box-sizing: border-box; ) html, body ( margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( text-decoration: none; ) . контейнер (позиция: относителна; поле: 35px автоматично 0; ширина: 300px; височина: 534px; цвят на фона: #533557; преливане: скрито; )

Работа с превключвател

Преди да започнем да създаваме останалата част от интерфейса, ще добавим някои превключващи функции за лесно преминаване от едно състояние в друго.

HTML, от който се нуждаем, вече е там. И стилът, който го кара да работи, е нещо подобно:

// Скриване на квадратчето за отметка #toggle ( display: none; ) // Стилове за състоянието "отворено", когато квадратчето е избрано #toggle:checked ( // Всеки елемент, чийто стил трябва да промените при отваряне на менюто, отива тук с селектор ~ // Стилове на отваряне навигационно меню, например & ~ .nav ( ) )

Създаване на затворено състояние

Да правя затворено състояние, трябва да преобразуваме елементите от менюто в редове, за да получим икона на хамбургер. Има няколко начина да постигнете тази трансформация. Решихме да го направим по следния начин:

И ето кода, който реализира това.

$продължителност на прехода: 0.5s; // Показване на елементи за навигация като редове, които съставят иконата за хамбургер.nav-item (позиция: относителна; дисплей: inline-block; float: ляво; ясно: и двете; цвят: прозрачен; размер на шрифта: 14px; разстояние между буквите: - 6.2px; white-space: nowrap; conversion: $transition-duration, opacity (1) (разстояние между буквите: -8px; ) // Add ширина за втория ред &:nth-child(2) ( letter-spacing: -7px; ) // Настройки за елементи, започващи от четвъртия & :nth-child(n + 4) ( letter-spacing: -8px; margin -top: -7px; opacity: 0; ) // Вземете линии за иконата на хамбургер &:before (position: absolute; content: ""; width: 100%; background-color: #EC7263; transform : translateY(5); преход: $продължителност на прехода;

Моля, обърнете внимание, че тук сме включили само основните стилове за най-важните навигационни елементи. Можете да намерите пълния код в Github.

Създайте отворено меню

Да създаваш отворено меню, трябва да възстановим елементите за навигация от редове към обикновени текстови връзки, както и да направим редица незначителни промени. Нека да видим как да направите това:

$продължителност на прехода: 0.5s; #toggle:checked ( // Отваряне & ~ .nav ( // Възстановяване на елементите за навигация от „редовете“ в менюто icon.nav-item ( цвят: #EC7263; разстояние между буквите: 0; височина: 40px; линия- височина: 40 пиксела; непрозрачност: 1; продължителност на прехода, непрозрачност 0,1 сек; // Скриване на редовете (непрозрачност:))

Магията е в малките неща

Ако разгледаме по-отблизо gif-а, виждаме, че всички елементи от менюто не се местят едновременно, а в шахматен ред. Можем да направим това и в CSS! По принцип трябва да изберем всеки елемент (използвайки :nth-child) и да зададем стойността на забавяне на прехода постепенно да се увеличава. Това определено е повтаряща се работа. Ами ако имаме повече елементи? Не се притеснявайте, можем да направим всичко по-добро с малко SCSS магия:

$ артикули: 4; $преходно забавяне: 0.05s; .nav-item ( // Задаване на забавянето за навигационни елементи при затваряне на @for $i от 1 до $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - забавяне; забавяне на прехода: $закъснение; &:преди (закъснение на прехода: $закъснение; ) )

Обърнете внимание, че с този код ще получим желаното поведение на стъпката за затварящата анимация. Трябва да изчислим $delay, малко по-различно за началната анимация, за да върнем стъпковия преход. като това:

$закъснение: ($елементи - $i) * $закъснение на прехода;

Заключение

Приключихме с нашето луксозно меню! Включихме и някои фиктивни елементи, както в анимиран gifи можете да видите.

Така че създадохме прост и функционално менюсамо в CSS. Ако обаче не искате да използвате системата за превключване на CSS, тя може да бъде заменена перфектно с няколко JavaScript низовебез много усилия.

Надяваме се, че този урок ви е харесал и ви е бил полезен!