Анимированная иконка гамбургер bootstrap. Быстрое создание «гамбургер» меню на jQuery

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-а , добавим к медиа-запросу следующий код.

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

А затем случились две вещи, которые заставили меня передумать. Во-первых, я наткнулся на . Это статья, которая действительно помогает понять последствия использования гамбургер-меню. В частности, сайты с таким меню терпят серьезное уменьшение вовлеченности пользователей. Обзор такой статистики как раз и начал менять мое мнение.

Следующий инцидент случился, когда я наблюдал за коллегой, пытающимся использовать новое веб-приложение, в котором как раз было такое меню. Это был разработчик, который очень хорошо знаком с интерфейсом гамбургер-меню, но когда дело дошло до использования приложения для своих нужд, он громко вслух спросил: “Как мне туда попасть?”. Учтите, это один из умнейших людей, которых я знаю, и он даже не подумал о том, чтобы коснуться значка гамбургер-меню. Если у кого-то настолько умного возникают проблемы с навигацией, что это говорит о типичном пользователе? Мое мнение окончательно приобрело твердое обоснование.

Поиск решения

Все, хватит о причинах моего неверия в силу гамбургер-меню - настало время поговорить о решении. Для начала я изучил особые преимущества использования гамбургер-меню:

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

И если уж создавать альтернативу гамбургер-меню, она должна как-то решать связанные с ним проблемы:

• Понятность : должна быть возможность легко находить элементы навигации, особенно теми, кто использует продукт впервые.
• Вовлеченность : интерфейс должен давать подсказки и фидбек, поясняющие, что пользователь может делать с продуктом, и когда уместно использовать те или иные возможности.

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

Я решил начать с самой сложной проблемы и проверить, подойдет ли мое решение для мобильных дизайнов. После обдумывания массы идей я пришел к выводу, что меню панели вкладок iOS является одним из лучших решений для мобильных интерфейсов. Масса людей пытались сделать панель вкладок прокручиваемой (чтобы вмещалось более пяти опций) или добавить “more” в навигацию - что-то вроде Плюшкина, у которого есть дополнительная комната, которая быстро заполнится хламом. Также, обе эти опции все еще не выполняют главного требования - понятность, видимость всех возможностей отсутствует. Так что же можно сотворить с меню вкладок, чтобы это исправить?

Мое решение заключается в комбинации гамбургера и панели вкладок в единый подход. В результате получается панель вкладок, которая открывает набор опций для каждого элемента меню.

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

Еще один плюс такого дизайна - возможность использовать контекстные уведомления. В случае с гамбургер-меню у вас есть всего одно место для показа таких уведомлений. Если придерживаться макета с панелью вкладок, вы можете выдавать подсказки для пользователя в любом из выбранных пунктов меню.

Конечно, самая большая победа такого подхода - Масштабируемость. Да, вы по-прежнему ограничены пятью категориями, но это и хорошо. Честно, думаю, что любой сайт может вместить свои опции в пять категорий, если дизайнер с умом продумает навигацию. Ведь в каждой из этих категорий может быть еще по пять или шесть подпунктов.
Итого получается 30 возможных опций навигации без ощущения перегруза для пользователя и без оккупации всего пространства экрана.

Применение к планшетам

Интеграция такой панели вкладок в планшеты, как она есть, выглядела странной. Планшеты гораздо шире, и использование того же UI, что и для мобильных устройств, выглядело также нелепо, как подросток в одежде, из которой он давно вырос. Так что я пошел другим путем. Вместо размещения панели вкладок внизу, я разместил ее сбоку. Так оказалось удобнее в плане использования пространства экрана и выглядело очень естественно. Вдобавок многие пользователи держат планшет за бок, так что это как раз целевая область для касания пальцами.

А как на счет десктопа?

Приготовьтесь… выдвижное меню. Все верно - примерьте этот подход к десктопному интерфейсу и вы столкнетесь с неоспоримой реальностью: этот вариант совсем не нов. Выдвижное меню использовалось годами, и практически любой пользователь (даже ваша мама) знает, как оно работает. В этом и есть прелесть такого подхода - ничего нового.

Полное раскрытие

Я не знаю, как назвать эту штуку. Вкладочный выдвижник? Или TABurger (TAB “вкладка” + бургер)? Более того, я не знаю, создавал ли кто-либо подобное решение раньше. Учитывая простоту такого меню, я не могу допустить мысль, что я был первым. Знаю, что несколько приложений используют выдвижные меню на некоторых кнопках вкладок (например, Tweetbot), но обычно они реализованы как быстрый доступ к функциям для продвинутых пользователей, а не с целью наращивания иерархии навигации. Если у вас есть такой пример, дайте знать в комментариях.
Неважно, является ли такое меню новым или уже давно придуманным. Важно то, является ли оно лучшим, более креативным решением для навигации по сравнению с гамбургер-меню. Перестаньте говорить себе “В этом крутом сайте есть такое меню, значит, оно должно быть лучшим” или “Все так делают, значит это правильно”. Дизайн заслуживает лучшего, более внимательного подхода.
ОБНОВЛЕНИЯ
Коллин Эбергардт отметил в ТВиттере, что такой же UI реализован в Windows Phone. Я сам пользователь Windows Phone, и он прав. Хотя такой тип взаимодействий используется в Windows Phone только для опции “more” в панели вкладок.

Джеймс Перих привел еще один пример в Твиттере. Посмотрите на AHTabBarController, созданный Артуром Хеммером.

Всем привет. С вами Corvax. Сегодня я хочу продолжить тему мобильных меню и предложить вам сделать но только используя jQuery. Поехали.

Создание HTML макета

Добавление основных CSS стилей

Добавление JS

После того как мы сверстали само меню нам понадобиртся подключить JS файл и приступить к самому интересному.

$(function(){ $(".menuToggle").on("click", function() { $(".menu").slideToggle(300, function(){ if($(this).css("display") === "none"){ $(this).removeAttr("style"); } }); }); });

Давайте подробнее рассмотрим что тут написна. В начале мы вешаем собитые.on по клику на самоу кнопку «Меню». В нутри этого события мы добовляем на $(«.menu») выподающее меню функцию slideToggle() которая будет производить плавное открытие и закрытие выподающего меню.

Есть небольшая проблема которая у нас возникнет при переходе версий сайта и нажитие на кнопку «Меню», а именно будет скрываться блок с самими пунктами меню т.к. по умолчанию функция slideToggle() при закрытие добавляет атребут «display: none». Что бы исправить этот баг нужно вызвать колбэк(функция которая будет вызыватся после отработки основной функции) для функции slideToggle() . В нутри колбека мы пишем условие. Если у нас атрибу в блоке меню равен «display: none» тогда мы удаляем этрибут «style».

Заключение

Вот так отчень просто и быстро мы создали адаптивно меню «гамбургер» которое вы можете лекго использовать в смоих проектах. вы можете скачать исходники. С вами был Corvax. Да новых встреч!

Иконка-гамбургер — она везде. Везде вокруг нас. В веб-приложениях, на мобильных и десктопных сайтах, в программном обеспечении. Этот вездесущий значок из трех линий в настоящее время настолько распространен, что такое впечатление, как будто он однозначно ассоциируется с меню навигации. Но так ли это?

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

Учитывая мое положение в качестве дизайнера в команде сайта m.booking.com , и использование нами этой иконки для показа выдвигающегося меню, я решил исследовать этот объект. А начал я с изучения происхождения значка, чтобы попытаться понять его путь к позору.

Это звучит многообещающе. Но даже при том, что иконка является классической и была вокруг всегда, веб-дизайнеры были менее последовательны в ее использовании. Значок был использован для списков, перетаскивания и изменения порядка, выравнивания, и многого другого. Возможно, это неправильное использование объясняет его критику, как значка меню. Может быть, из за широкого распространения и разнообразного использования эта иконка потеряла способность передавать единую метафору и, в свою очередь, ставит пользователей в замешательство.

Вся эта история сподвигла меня задаться вопросами: «Неужели мы неправы, а все остальные правы? Причиняет ли это неудобства нашим пользователям? Есть ли люди, на самом деле понимающие, что представляют из себя эти три маленькие линии на нашем сайте?»

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

Ранее мы протестировали несколько мест размещения и стилей значка (с рамкой, без рамки, с иконкой, разных цветов и так далее), но никогда не тестировали слово «Меню» — из-за сложностей, связанных с нашим желанием провести испытания на сорок одном языке, поддерживаемом нами. Тем не менее, мы двинулись вперед, найдя переводы с помощью нашей команды экспертов по языкам и запустили тест:

Наш исходный значок меню «гамбургер» слева от заголовка и с белой разделительной чертой справа.

Слово «Меню» внутри блока с белой рамкой с закругленными углами, также выравнивается по левому краю.

Мы запустили эксперимент для всей нашей пользовательской базы. А также, учитывая известность и вездесущесть этого элемента пользовательского интерфейса, надеялись, что не займет много времени подвергнуть тестированию миллионов наших клиентов по всему миру, на каждом из поддерживаемых языков и большом числе устройств.

Так каков конечный результат? Слово победило фастфуд, как это было в эксперименте Джеймса Фостера, или победит булочка с котлетой?

Результаты

Конечно мы не можем эти данные экстраполировать на все. В каких-то странах, на каких-то языках или устройствах, это возможно сработало лучше или хуже. Но в глобальном масштабе мы можем сделать вывод, что слишком сильно высмеивали «гамбургер». В целом, он был столь же узнаваем, как и слово «Меню». В духе управления продвижением дизайна нам, наверное, следует рассмотреть и другие варианты, и, может быть, попробовать к нашей иконке-гамбургеру добавить сыр, ломтик бекона и кортофель фри, но сейчас мы рады сообщить, что наш «трехлинейный друг» прилеплен везде. Его фактическое размещение, форма, размер, положение и цвет — это, конечно, предмет для будущих тестов.

Несомненно, это урок для всех нас о сущности A/B тестирования. Вы никогда не тестируете элементы UI, модель или функцию в целом. Вы тестируете эти вещи на очень конкретной пользовательской аудитории при определенных и конкретных сценариях. То, что работает для Booking.com , может не работать для вас или ваших пользователей. Это одна из причин, почему мы провели свое A/B тестирование. Выводы других экспертов, данные с других сайтов или гипотезы, придуманные в пабе, поедая гамбургер, все будут недоказанными, пока они не проверены на наших клиентах и на нашей платформе.

Не запутаться бы в нашей собственной метафоре, но это, как рецепт хорошего гамбургера. Даже если вы в точности записали за мной все ингредиенты, в конечном итоге вы получите совершенно другой гамбургер. На это, конечно, повлияет качество доступного на рынке мяса, мука используемая для хлеба и тысячи других факторов. Лично для нас, идея хорошая, если она будет хороша для Booking.com . Если мы может повторить ее на нашем сайте, и, если она будет работать для всех наших клиентов.

Наше мнение

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

В этом уроке я расскажу, как сделать такое с помощью одного 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 без особых усилий.

Надеемся, этот урок оказался вам по душе и вы сочли его полезным!