Адаптивно меню с хамбургер css. Бързо създайте меню за хамбургер с помощта на jQuery

2. Вмъкнете икона на хамбургер в навигационното меню

На сайта iconfinder.comнамерете желаната икона, променете цвета на желания (Икона за редактиране), изтегляне във формат SVG, отворете го в браузъра, копирайте кода от уеб инспектора.

Поставете кода, копиран по-горе, вместо текста „Меню“.

На този етап при десктоп резолюции менюто изглежда така: SVGСкрихме иконата, като написахме следния код.

МенюБургер (
дисплей: няма; /* иконата на хамбургер е скрита */
}

3. Отидете на медийната заявка

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

@медиен екран и (максимална ширина: 530px) (
.меню (
дисплей: няма; /* елементите от менюто са скрити */
фон: #f1f2f4;
позиция: абсолютна;
}

Меню (
float: няма; /* елементи от менюто в колони */
}

МенюБургер (
дисплей: inline-block; /* иконата на хамбургер се вижда */
}
}

4. Разширете менюто за хамбургери

Какво да направите преди отваряне меню за хамбургери? Необходимо е временно да се коментира в CSSкод за медийна заявка /* дисплей: няма; */и превърнете хоризонталното меню във вертикално. За да направите това, нека отменим действието плавам, добавете следния код към медийната заявка.

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

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

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

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

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

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

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

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

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

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

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

резултати

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

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

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

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

В който предлага пет алтернативи на менюто „хамбургер“ за организиране на навигация в мобилно приложение.

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

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

1. Раздели

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

Разработчиците често смятат, продължава Колийн, че разделите са един от най-простите модели за навигация. Но когато създавате такова меню, трябва да се придържате към няколко правила:

• Не трябва да има повече от пет секции.
• Един от разделите (активният) трябва да бъде визуално маркиран.
• Първият раздел трябва да е „начало“. Разделите трябва да бъдат подредени по приоритет или реда, в който са предназначени да бъдат използвани.
• Разделите могат да бъдат поставени в горната или долната част на екрана, в зависимост от контекста и платформата.
• Трябва да използвате икони вместо етикети за обозначаване на раздели само ако потребителят знае точно какво означава всяка икона и ако е запознат с възможните действия (например, те са подходящи за приложения за социални мрежи).

2. Раздели с опция „Други“.

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

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

3. Падащо меню

Вариация на раздели със секция „Други“ - меню, което се адаптира към размера на екрана и показва различен брой раздели при всяка резолюция. Тези раздели, които не се побират на екрана, завършват в секцията „Други“.

4. Скролиращо меню

„Ако имате няколко раздела и не можете да идентифицирате основните, използването на раздели с допълнителен раздел може да не е ефективно решение. След това можете да изброите всички елементи в менюто и да направите панела с възможност за превъртане“, пише Колийн.

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

Въпреки това, дизайнерите трябва да се уверят, че е ясно за потребителите как да превъртат - и да предоставят визуални знаци. Например, приложете ефект на „избледняване“ към последния елемент.

5. Падащо меню

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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; ) .container (position: relative; margin: 35px auto 0; width: 300px; height: 534px; background-color: #533557; overflow: hidden; )

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

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

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

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

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

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

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

$продължителност на прехода: 0.5s; // Показване на елементи за навигация като редове, които съставят иконата за хамбургер.nav-item (позиция: относителна; дисплей: inline-block; float: ляво; ясно: и двете; цвят: прозрачен; размер на шрифта: 14px; разстояние между буквите: - 6.2px; white-space: nowrap; conversion: $transition-duration, opacity 1s (разстояние между буквите: -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; translateY (-50%) преход: $продължителност на прехода;

Моля, обърнете внимание, че тук сме включили само основните стилове за най-важните навигационни елементи. Можете да намерите пълния код в 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 без много усилия.

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