От Виталия Рубцова и не мог удержаться от желания её реализовать.
В этом уроке я расскажу, как сделать такое с помощью одного 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 { } }
Создание закрытого состояния
Чтобы сделать закрытое состояние, нам нужно преобразовать пункты меню в линии, чтобы получить иконку гамбургера. Есть несколько путей для получения такой трансформации. Мы решили сделать это следующим образом:
И вот код, который это реализует.
$transition-duration: 0.5s; // Отображение пунктов навигации в виде линий, составляющих иконку гамбургера.nav-item { position: relative; display: inline-block; float: left; clear: both; color: transparent; font-size: 14px; letter-spacing: -6.2px; height: 7px; line-height: 7px; text-transform: uppercase; white-space: nowrap; transform: scaleY(0.2); transition: $transition-duration, opacity 1s; // Добавление ширины для первой линии &:nth-child(1) { letter-spacing: -8px; } // Добавление ширины для второй линии &:nth-child(2) { letter-spacing: -7px; } // Настройки для элементов, начиная с четвёртого &:nth-child(n + 4) { letter-spacing: -8px; margin-top: -7px; opacity: 0; } // Получение линий для иконки гамбургера &:before { position: absolute; content: ""; top: 50%; left: 0; width: 100%; height: 2px; background-color: #EC7263; transform: translateY(-50%) scaleY(5); transition: $transition-duration; } }
Обратите внимание, что здесь мы разместили только основные стили для пунктов навигации, который наиболее важны. Вы можете найти полный код на Github .
Создание открытого меню
Чтобы создать открытое меню, нам необходимо восстановить пункты навигации из линий в обычные текстовые ссылки, а также проделать ряд мелких изменений. Давайте посмотрим, как это сделать:
$transition-duration: 0.5s; #toggle:checked { // Открываем & ~ .nav { // Восстанавливаем пункты навигации из «линий» в иконке меню.nav-item { color: #EC7263; letter-spacing: 0; height: 40px; line-height: 40px; margin-top: 0; opacity: 1; transform: scaleY(1); transition: $transition-duration, opacity 0.1s; // Скрываем линии &:before { opacity: 0; } } } }
Магия в мелочах
Если мы посмотрим ближе на gif, то увидим, что все пункты меню перемещаются не одновременно, а в шахматном порядке. Мы можем сделать такое и в CSS! В принципе нам нужно выбрать каждый элемент (с помощью :nth-child ) и задать постепенное повышение значения transition-delay . Это, безусловно, повторяющаяся работа. А что если у нас будет больше элементов? Не волнуйтесь, мы можем сделать всё лучше, используя немного магии SCSS:
$items: 4; $transition-delay: 0.05s; .nav-item { // Задаём задержку для пунктов навигации при закрытии @for $i from 1 through $items { &:nth-child(#{$i}) { $delay: ($i - 1) * $transition-delay; transition-delay: $delay; &:before { transition-delay: $delay; } } } }
Обратите внимание, что с помощью этого кода мы получим желаемое пошаговое поведение для анимации закрытия. Нам нужно вычислить $delay , немного отличающийся для анимации открытия, чтобы получить обратно ступенчатый переход. Вроде этого:
$delay: ($items - $i) * $transition-delay;
Вывод
Вот мы и закончили с нашим причудливым меню! Мы также включили некоторые фиктивные элементы как в анимированном gif, и вы можете увидеть .
Итак, мы создали простое и функциональное меню только на CSS. Однако, если вы не хотите использовать систему переключения CSS, она может быть идеально заменена с помощью нескольких строк JavaScript без особых усилий.
Надеемся, этот урок оказался вам по душе и вы сочли его полезным!
Простой, функциональный, интуитивно понятный и запоминающийся, как и любой дорожный знак, иконка-гамбургер стала настоящим трендом в прошлом году, и неотъемлемым элементом любого современного веб-сайта и дизайна мобильных приложений.
Этот простой значок имитирует внешний вид списка меню, идеально подходит для устройств с небольшими экранами и веб-сайтов, где важна визуальная сторона, а навигация должна стоять в стороне. Это весьма эффективное и жизнеспособное решение, которое отвечает требованиям современного мира.
Как и любой другой элемент интерфейса, иконка-гамбургер может иметь некоторые отклонения от изначального варианта, исходя из потребностей каждого отдельного проекта.
В зависимости от проекта и темы, значок-гамбургер может принимать различные формы, которые дополняют дизайн или могут стать его самостоятельной, отличительной чертой.
Сегодняшняя коллекция включает в себя 20 различных вариаций иконки-гамбургера.
Иконка-гамбургер от дизайнера Дэйва Геймза сразу же дарит много теплой энергии. Мультяшный стиль добавляет игривости, и создает только самые позитивные эмоции. Использовать такую иконку можно смело на большинстве современных иллюстрированных интерфейсов.
А эту иконку с океанскими волнами разработал Мэт Уокер. Она отлично будет чувствовать себя на различных проектах, посвященных морю. Голубой в качестве основного цвета и рамка вокруг делают этот значок эксклюзивным.
Чистая, яркая и остроумная реализация позволит этой конструкции работать как значок меню на кулинарных сайтах. В этом случае интерфейс получит приятную художественную изюминку.
Дизайнер предлагает 10 интересных версий значков-гамбургеров, которые изготовлены с душой. Серия охватывает различные виды бургеров: один с сыром, другой с беконом, третий с индейкой, и многие другие. Если у вас есть веб-сайт или мобильное приложение, посвященное ресторану быстрого питания, то они, безусловно, пригодятся. Они так визуально интересны, что смогут найти место практически в любой теме.
А этот проект представляет реалистичный гамбургер в векторе. Кнопка закрытия при этом выполнена в виде картофеля фри, принимающего форму «Х», с соусом или без. Это креативное решение, которое может добавить экзотику в дизайн страницы.
Официальный сайт Star Wars включает в себя интересный значок-гамбургер, который поворачивается. Каждая строка разделена на две части так, чтобы получить вектор отражения света лазерных мечей. Решение усиливает общее впечатление от сайта и укрепляет бренд.
Бургер меню от Питера Тваури – это прекрасно иллюстрированная версия иконки. Ключевая особенность этого значка заключается в выборе цветов, имитирующих разрезанную булочку и мясную котлету.
Серия имеет различные варианты гамбургеров, которые реализуются с помощью стиля линии. Тут вы найдете двойной гамбургер, гамбургер с сыром и салатом, открытый бутерброд и некоторые другие. Найти идеальное решение для вашего аккуратного, плоского интерфейса будет просто, чтобы добавить пикантности и «вкуса».
Художник демонстрирует три забавные версии кнопки: классический гамбургер, чизбургер и хот-дог. В основе каждого лежит один или два цвета, что делает его пригодным для различных крошечных интерфейсов. Здесь цвет создает правильный вид бутерброда.
Художник предлагает небольшую анимацию, которая включает только один значок меню, и несколько плавных переходов, которые сопровождают преобразование в обычный «X» (кнопку закрытия). Есть специальные эффекты, возникающие при наведении мышки или нажатии.
В отличие от большинства приведенных выше примеров, этот образец демонстрирует умелые манипуляции с весом, а не цветом. Верхняя и нижняя линии смелее, чем средняя, и создают правильный вид «гамбургера». Художник успешно справился с задачей.
Меню анимация значка-ниндзя от Эндрю Ковардакова отличается от большинства кнопок-гамбургеров, и предлагает интересное и незаурядное решение, с таинственным и привлекательным подтекстом. Здесь каждая линия – ниндзя в векторе.
А эта иконка представляет собой иллюстрацию бургера с салатом и сыром. Это может добавить изюминку в любой скучный интерфейс. Отличное решение для сайта ресторана или кафе.
Это статья, где вы можете найти интересные рассуждения о модном значке меню. Она отмечена изображением, которое показывает три варианта кнопки-гамбургер. Первый - это первоклассная плоская иллюстрация, второй - раскрашенный значок из трех линий, и третий является монохроматической версией второго образца – это самый популярный выбор среди дизайнеров.
GIF показывает плавные переходы между начальным состоянием этого минималистичного и элегантного значка, и его конечное состояние. Поскольку анимация начинается с нижней строки, он короче, чем другие.
Гамбургер меню от Лиам Спрадлин выглядит как набор школьных закладок для книг. Реализация эта - смелая и несколько грубая. Такой значок сразу заметен, тем не менее, может быть трудно найти подходящую среду для него.
До сих пор мы рассматривали иконки отдельно, но они прекрасно сотрудничают со словами, особенно, когда это слово «Меню». Хотя это может показаться излишним, вместе они выглядят изысканно. Ультратонкие линии шириной в 1px, которые используются в этом случае, совмещаются как части головоломки.
Проект доказывает, что значок-гамбургер может выглядеть ярче и привлекательней, когда он заключен в рамку. Это отличный выбор для небольших устройств, где такая иконка будет удобной для сенсорной навигации.
Дизайнер отображает простой, гладкий значок из трех линий, который подвергается различным метаморфозам, превращаясь в крестик или стрелку. Анимация включает в себя несколько решений, которые могут пригодиться для любых проектов.
Итоги
На первый взгляд может показаться, что такой мелочи, как иконка меню, не стоит уделять много внимания. Но если проявить немного фантазии, можно превратить его в некую изюминку вашего интерфейса. Особенно, если разработчики начинают играть с его смыслом, и используют художественные приемы, чтобы сделать его более нетрадиционным и привлекающим внимание.
Иконка-гамбургер — она везде. Везде вокруг нас. В веб-приложениях, на мобильных и десктопных сайтах, в программном обеспечении. Этот вездесущий значок из трех линий в настоящее время настолько распространен, что такое впечатление, как будто он однозначно ассоциируется с меню навигации. Но так ли это?
В последнее время дискуссии об эффективности иконки-гамбургера достигли новых высот. В статьях выдающихся дизайнеров, и на нескольких сайтах, включая The Atlantic , TechCrunch , The Next Web и Nielsen Norman Group приходят к выводу, что это UX-антипаттерн, модная и простая в реализации иконка, которая является регрессом от более простых и более выразительных альтернатив. Но антипаттерн это или нет, использование значка настолько разрослось, что делает его почти непременным атрибутом на большинстве веб-сайтов, особенно на маленьких экранах.
Учитывая мое положение в качестве дизайнера в команде сайта m.booking.com , и использование нами этой иконки для показа выдвигающегося меню, я решил исследовать этот объект. А начал я с изучения происхождения значка, чтобы попытаться понять его путь к позору.
Это звучит многообещающе. Но даже при том, что иконка является классической и была вокруг всегда, веб-дизайнеры были менее последовательны в ее использовании. Значок был использован для списков, перетаскивания и изменения порядка, выравнивания, и многого другого. Возможно, это неправильное использование объясняет его критику, как значка меню. Может быть, из за широкого распространения и разнообразного использования эта иконка потеряла способность передавать единую метафору и, в свою очередь, ставит пользователей в замешательство.
Вся эта история сподвигла меня задаться вопросами: «Неужели мы неправы, а все остальные правы? Причиняет ли это неудобства нашим пользователям? Есть ли люди, на самом деле понимающие, что представляют из себя эти три маленькие линии на нашем сайте?»
Постоянные читатели этого блога не будут удивлены, узнав, что нашим следующим шагом было задать эти вопросы в форме A/B теста. Как и все остальное, иконка-гамбургер был подвержен воздействию наших многочисленных клиентов, которые, путем взаимодействия с меню, должны определить, был ли этот значок лучшим решением. К этому времени я прочитал достаточно статей и информационных данных, чтобы быть уверенным, что отсутствие консенсуса или другие результаты не были следствием поведения покупателей, для которых разрабатывался дизайн. Я решил последовать методу, описанному Джеймсом Фостером , на который многие ссылаются, в том числе один из наших лучших мобильных специалистов — Люк Вроблевски .
Ранее мы протестировали несколько мест размещения и стилей значка (с рамкой, без рамки, с иконкой, разных цветов и так далее), но никогда не тестировали слово «Меню» — из-за сложностей, связанных с нашим желанием провести испытания на сорок одном языке, поддерживаемом нами. Тем не менее, мы двинулись вперед, найдя переводы с помощью нашей команды экспертов по языкам и запустили тест:
Наш исходный значок меню «гамбургер» слева от заголовка и с белой разделительной чертой справа.
Слово «Меню» внутри блока с белой рамкой с закругленными углами, также выравнивается по левому краю.
Мы запустили эксперимент для всей нашей пользовательской базы. А также, учитывая известность и вездесущесть этого элемента пользовательского интерфейса, надеялись, что не займет много времени подвергнуть тестированию миллионов наших клиентов по всему миру, на каждом из поддерживаемых языков и большом числе устройств.
Так каков конечный результат? Слово победило фастфуд, как это было в эксперименте Джеймса Фостера, или победит булочка с котлетой?
Результаты
В ходе этого эксперимента, замена иконки на слово «Меню» не оказало существенного влияния на поведение наших пользователей. С помощью нашей огромной базы пользователей, мы можем, с очень высокой степенью вероятности, констатировать, что, в частности, для посетителей Booking.com, иконка-гамбургер исполняет свою роль так же, как и версия с текстовым описанием.Конечно мы не можем эти данные экстраполировать на все. В каких-то странах, на каких-то языках или устройствах, это возможно сработало лучше или хуже. Но в глобальном масштабе мы можем сделать вывод, что слишком сильно высмеивали «гамбургер». В целом, он был столь же узнаваем, как и слово «Меню». В духе управления продвижением дизайна нам, наверное, следует рассмотреть и другие варианты, и, может быть, попробовать к нашей иконке-гамбургеру добавить сыр, ломтик бекона и кортофель фри, но сейчас мы рады сообщить, что наш «трехлинейный друг» прилеплен везде. Его фактическое размещение, форма, размер, положение и цвет — это, конечно, предмет для будущих тестов.
Несомненно, это урок для всех нас о сущности A/B тестирования. Вы никогда не тестируете элементы UI, модель или функцию в целом. Вы тестируете эти вещи на очень конкретной пользовательской аудитории при определенных и конкретных сценариях. То, что работает для Booking.com , может не работать для вас или ваших пользователей. Это одна из причин, почему мы провели свое A/B тестирование. Выводы других экспертов, данные с других сайтов или гипотезы, придуманные в пабе, поедая гамбургер, все будут недоказанными, пока они не проверены на наших клиентах и на нашей платформе.
Не запутаться бы в нашей собственной метафоре, но это, как рецепт хорошего гамбургера. Даже если вы в точности записали за мной все ингредиенты, в конечном итоге вы получите совершенно другой гамбургер. На это, конечно, повлияет качество доступного на рынке мяса, мука используемая для хлеба и тысячи других факторов. Лично для нас, идея хорошая, если она будет хороша для Booking.com . Если мы может повторить ее на нашем сайте, и, если она будет работать для всех наших клиентов.
Наше мнение
Всегда надо тестировать свои идеи и смотреть, что вам говорят полученные данные и, какие вопросы возникают. Мой совет? Откусите и посмотрите, что произойдет.Наверняка вы видели на многих сайтах кнопку в виде иконки с тремя горизонтальными полосками, напоминающий гамбургер. В большинстве случаев на больших и средних разрешениях экрана эта кнопка спрятана, а появляется только на маленьких экранах.
За этой кнопкой скрываются пункты меню навигации, задумка в том, что на определенной ширине экрана, кликая по иконке, пользователь сам разворачивает меню, если ему это надо. Если не надо, то он сразу переходит к просмотру контента, не отвлекаясь на меню, поскольку оно спрятано.
Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS . Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на checkbox-ах , позже я поясню что это.
Гамбургер меню на JS
1. Верстаем обычное верхнее меню навигации с одним параграфом контентной части сайта
Основной контент сайта
2. Вставляем иконку гамбургер в меню навигации
На сайте iconfinder.com находим нужную иконку, меняем цвет на нужный (Edit Icon) , скачиваем в формате SVG , открываем в браузере, копируем код из веб-инспектора.
Вставляем скопированный выше код вместо текста "Меню".
На данном этапе на десктопных разрешениях меню выглядит так, SVG иконку мы скрыли, прописав следующий код.
MenuBurger {
display: none; /* иконка гамбургер скрыта */
}
3. Переходим к медиа-запросу
На маленькой ширине экрана, от нуля до 530 пикселей. Нам надо сделать наоборот, показать иконку гамбургер меню и спрятать все пункты меню, стоящие в ряд.
@media screen and (max-width: 530px) {
.menu {
display: none; /* пункты меню скрыты */
background: #f1f2f4;
position: absolute;
}
Menu li {
float: none; /* пункты меню в столбцах */
}
MenuBurger {
display: inline-block; /* иконка гамбургер видна */
}
}
4. Развернуть гамбургер меню
Что нужно сделать, перед тем, как раскрыть гамбургер меню ? Надо временно закомментировать в CSS коде медиа-запроса /* display: none; */ и горизонтальное меню превратить в вертикальное. Для этого отменим действие float-а , добавим к медиа-запросу следующий код.