меню бургер веб дизайн
Меню бургер веб дизайн
В этой рубрике Вы найдете уроки, посвященные полезным скриптам для Вашего сайта, которые призваны улучшить его функциональность.
Эффекты блочного раскрытия
Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.
20 бесплатных тем для WordPress в стиле Material Design
Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.
20 сайтов с креативным MouseOver эффектом
Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.
45+ бесплатных материалов для веб дизайнеров за август 2016
Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.
Бесплатка: PSD шабон Modus Versus
Вашему вниманию предлагаем PSD шаблон с множеством элементов.
Иконки гамбургер меню — примеры сайтов, дизайнов и CSS скриптов
Недавно мы публиковали заметку про использование кнопки гамбургер-меню для сайта и возможные ее альтернативы. Сегодня хотелось немного развить тему и поделиться несколькими сопутствующими наработками. В статье будет много ссылок на полезные проекты и скрипты, поэтому загрузка может занять некоторое время. Тем, кто столкнулся с данной задачей и ищет как сделать гамбургер меню на сайте пост однозначно пригодится.
Данный элемент был разработан почти 30 лет назад Нормом Коксом. Он идеально подходит для мобильных версий сайтов и всех проектов, где навигация не должна отвлекать или закрывать визуальную составляющую страницы. Сейчас иконка гамбургер-меню является неотъемлемой фишкой адаптивной разработки и наверняка знакома большинству пользователей сети. Не смотря на разные альтернативы и противников, она реально стала узнаваемым и универсальным символом.
Примеры сайтов с гамбургер меню
Перед тем как перейти к скриптам, предлагаем оценить некоторые графические наработки и примеры дизайнов сайтов, использующих этот механизм. Часть картинки отображает вид страницы до вызова меню, вторая — после. Посмотреть эффект в действии можно на самих ресурсах, кликая по скриншотам.
Интересная модификация меню с тематикой фильма Звездных Воен.
The Deepend Design
Brooklyn Bridge Park
Часто при клике на «иконку гамбургера» полоска или блок меню выезжает сбоку или сверху. Эффект простой, но смотрится неплохо.
Появление навигации в данном примере выглядит немного странно. Пользователю нужно делать лишний клик чтобы увидеть несколько пунктов меню, которые, по сути, никак не мешают остальной графике. Зачем их скрывать? — не совсем понятно. Сайт ниже аналогично вызывает подобный вопрос.
Digital Deadly Sins
Анимация и иконки гамбургер-меню
Также в сети можно найти примеры иконок гамбургер-меню для вдохновения. Иногда их совмещают с анимационными эффектами для наглядной демонстрации работы. Сама по себе кнопка выглядит слегка скучно, но вместе с разными «преобразованиями» она добавляет на сайт больше интерактива. Практически все материалы ниже были найдены в социальной сети дизайнеров Dribbble (кликайте по картинкам дабы перейти на исходники).
The Real Hamburger MenuIcon
Menu Icon by Dave Gamez
Buttons by Nick Meloy
HamburgerMenu by Tamas Kojo
Close Icon Animation
Simple HamburgerMenu Animation
Hamburger Icon Music
Hamburger by Christian
Это лишь часть материалов, на Dribbble их гораздо больше — заходите на сайт и ищите по ключу «hamburger«, можно даже без приставки «menu«. Напоследок парочка дополнительных сайтов.
Про Noun Project мы когда-то уже писали в посте с необычными наборами иконок. Там содержится достаточно много монохромных объектов из любых сфер жизни.
Когда будете использовать поиск иконок Iconfinder обязательно выбирайте в левом меню «Free» в графе Price, то есть бесплатную стоимость изображений.
Еще один интересный сервис — Stickpng, где публикуются PNG клипарты на прозрачном фоне. Не смотря на то, что картинок здесь мало, возможно, кому-то нужен именно PNG формат.
Скрипты гамбургер меню CSS / Javascript
В интернете имеется несколько подборок вариантов реализации иконки гамбургер-меню. Не будем перепечатывать все ссылки оттуда, а лишь укажем источники и наиболее интересные примеры. Заметки, нужно сказать, достаточно актуальные по времени публикации. Кликайте по скриншотам.
21 Hamburger Animations Menu
15 Hamburger Icons in CSS
CSS Animated Hamburgers
Кстати, подходящая иконка есть и в популярном наборе Font Awesome.
Можете почитать заметку про использование шрифта Font Awesome в WordPress, если ваш проект реализован на этой CMS. Практически во всех остальных случаях из подборок вы найдете код и описание как сделать гамбургер меню в CSS и JS (в частности jQuery).
Вот парочка наиболее интересных решений:
See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.
Menu Toggle SVG Animation
Hamburger Icon + Morphing Menu
Pure CSS off-canvas Menu + flexbox
UI/UX Improvements with CSS
Toggle Menu by Vladislav
Итого в статье мы постарались собрать много разных материалов по теме: начиная с примеров сайтов с гамбургер меню, графическими наработками дизайнеров и заканчивая реальными скриптами гамбургер меню на CSS и Javascript. Всего вышло около 60-ти полезных ссылок. Надеемся вам они пригодятся.
Иконки красивые, спору нет. Но хотелось бы больше разнообразия. Тем более, что времени на создание подобные иконок уходит немного, раз их можно прямо с помощью кода css «нарисовать».
Андрей, ближе к концу статье найдете ссылки на архивы скриптов гамбургер меню на CSS / JS — там есть пару десятков оригинальных работ.
Но в целом придумать тут что-то уж совсем необычное, думаю, не так просто по определению — вариантов как скомпоновать три горизонтальные линии не так много.
Большое спасибо за подборку.
Обязательно добавлю статью в закладки.
Гамбургер-меню: немного истории и альтернативные варианты
Продолжаем обсуждать тему навигации в веб-проектах. После рассмотрения примеров хлебных крошек решили сегодня поговорить о так называемом гамбургер-меню. Было время, когда этот элемент привнес свежесть и новизну в пользовательские интерфейсы на мобильных устройствах. Данная иконка стала не только неотъемлемой частью топовых мобильных приложений, но и начала активно использоваться в хедере сайтов (в адаптивных версиях и не только). Дошло до того, что меню стало появляться даже там, где это было совершенно неуместно. В итоге на кнопку гамбургер меню обрушилась критика, и бывший фаворит превратился в виновника споров.
Давайте разберемся и обсудим почему этот формат навигации завоевал такую популярность, и есть ли у него достойные соперники в наши дни? Материал написан на основе этой статьи, спасибо автору за интересные мысли. Также советуем глянуть примеры иконки гамбургер меню и скрипты для ее реализации.
История популярности трех волшебных линий
История адаптивного гамбургер-меню началась в 1981 году, когда дизайнер компании Xerox Норм Кокс создал иконку в виде гамбургера. Данное изображение использовалось в системе Xerox Star для обозначения списка. Однако настоящую популярность кнопка гамбургер-меню приобрела в эпоху смартфонов: благодаря ей удалось уместить сложную навигацию по десктопным приложениям на маленьком экране — она удачно скрывалась за тремя полосками, напоминающими три составляющие гамбургера (два слоя хлеба и один – мяса).
Вариант навигации с гамбургер меню быстро стал одним из самых популярных элементов дизайна для смартфонов. Чтобы найти нужный раздел/страницу, нужно было всего лишь коснуться экрана, а не выполнять целую серию действий.
Если раньше нагромождение элементов управления создавало хаос, отвлекало и увеличивало время на принятие решения, то теперь различные выпадающие списки, строки поиска, иконки соцсетей и многое другое скрыла за собой аккуратная иконка.
Альтернативы кнопке гамбургер-меню в навигации
Данная реализация меню непроста стала обязательным элементом дизайна приложений смартфонов. Тем не менее, у нее есть альтернативы, на которые тоже стоит обратить внимание.
Вкладки (табы)
Вкладки – это самый простой способ навигации. Они идеально подходят для случаев, когда количество разделов на сайте не превышает пяти. Первая вкладка должна быть главной, а активную для удобства можно выделять цветом. Вкладки могут иметь подразделы.
Вкладки + «Еще»
Если разделов на сайте больше пяти, можно расположить в верхней панели управления четыре вкладки, а пятую озаглавить «Еще». Оставшиеся разделы будут открываться в виде выпадающего списка или боковой панели. Такая навигация лучше мобильного гамбургер-меню на сайте тем, что часто использующиеся функции всегда находятся на виду.
Постепенно сжимающееся меню
Еще более удачный вариант – это меню, адаптирующееся под ширину страницы. В этом случае показывается максимальное количество вкладок, которые способен вместить экран конкретного устройства. Если все вкладки все же не поместятся, они будут отображаться в разделе «Еще».
Навигация со скроллингом
Такая реализация удобна в ситуации, когда сложно выбрать наиболее важные пункты меню и спрятать какие-то функции в раздел «Еще». В таком случае все элементы можно разместить на одной панели с возможностью прокрутки. Правда, из-за того, что на виду будут находиться лишь несколько пунктов, дизайнерам потребуется дать пользователю визуальную подсказку о необходимости использовать горизонтальный скроллинг для просмотра других объектов. К тому же, сама идея навигации путем скроллинга понравится не каждому пользователю.
Выпадающее меню
Большое количество разделов одинаковой важности, которые не требуется постоянно держать в поле зрения, можно спрятать в выпадающем горизонтальном меню. Чтобы просмотреть скрытые пункты, нужно нажать на направленную вниз стрелку, расположенную рядом с названием основного раздела.
Нижняя навигация
Нижняя навигация аналогична варианту с помощью вкладок – с той разницей, что вкладки располагаются не сверху, а внизу экрана. Нижняя панель может быть видимой или скрытой (в этом случае она отображается при бесконечной прокрутке страницы вверх или вниз). Пункты в такой навигации обозначаются иконками – с надписями или без.
Вертикальный текст
Особняком от обычной практики горизонтального размещения текста стоит зарождающийся тренд расположения текста в меню по вертикали. Плюсом такого решения является значительная экономия места на экране: узкая полоска текста способна вместить в себя название любого раздела.
Этот способ навигации выглядит эффектно, однако очевидным его не назовешь. Чтобы блок с вертикальным текстом не сливался с фоном, его лучше разместить в отдельной панели. Завоевывает популярность и другая версия подобной навигации, при которой навигационное меню «раскидано» по периметру страницы.
По-прежнему предпочитаете гамбургер-меню?
Если вам все-таки больше по душе вариант с мобильным гамбургер меню для сайта, попробуйте вместо обычной реализации создать плавающий элемент. Такое решение хорошо тем, что экономит место на экране, и в то же время остается заметным даже на смартфонах с большим экраном.
Как и любая другая деталь пользовательского интерфейса, кнопка гамбургер-меню должна применяться грамотно – в противном случае она только ухудшит пользовательский опыт. Данная кнопка ненавязчиво сообщает пользователю о том, что ему доступны и другие функции, которыми он может легко воспользоваться, однако спрятать за ней часто используемые функции – не лучшая идея. Так что, важно определить, какие объекты всегда должны быть в поле зрения.
А вы используете навигацию гамбургер-меню для сайта на десктопных компьютерах? Или добавляете ее только в мобильную версию?
Иконка-гамбургер
Перевод статьи «The Hamburger Icon» дизайнера сайта Booking.com Мишеля Феррейры от 23 сентября 2014 года.
Иконка-гамбургер — она везде. Везде вокруг нас. В веб-приложениях, на мобильных и десктопных сайтах, в программном обеспечении. Этот вездесущий значок из трех линий в настоящее время настолько распространен, что такое впечатление, как будто он однозначно ассоциируется с меню навигации. Но так ли это?
В последнее время дискуссии об эффективности иконки-гамбургера достигли новых высот. В статьях выдающихся дизайнеров, и на нескольких сайтах, включая The Atlantic, TechCrunch, The Next Web и Nielsen Norman Group приходят к выводу, что это UX-антипаттерн, модная и простая в реализации иконка, которая является регрессом от более простых и более выразительных альтернатив. Но антипаттерн это или нет, использование значка настолько разрослось, что делает его почти непременным атрибутом на большинстве веб-сайтов, особенно на маленьких экранах.
Учитывая мое положение в качестве дизайнера в команде сайта m.booking.com, и использование нами этой иконки для показа выдвигающегося меню, я решил исследовать этот объект. А начал я с изучения происхождения значка, чтобы попытаться понять его путь к позору.
Иконка-гамбургер является классической. Даже если вы не знакомы с этим ее названием, то три черные полосы столь же знакомы, как курсор мыши — постоянный спутник нашего интернет-серфинга с первого дня, как вы стали обладателем своего компьютера.
Это звучит многообещающе. Но даже при том, что иконка является классической и была вокруг всегда, веб-дизайнеры были менее последовательны в ее использовании. Значок был использован для списков, перетаскивания и изменения порядка, выравнивания, и многого другого. Возможно, это неправильное использование объясняет его критику, как значка меню. Может быть, из за широкого распространения и разнообразного использования эта иконка потеряла способность передавать единую метафору и, в свою очередь, ставит пользователей в замешательство.
Вся эта история сподвигла меня задаться вопросами: «Неужели мы неправы, а все остальные правы? Причиняет ли это неудобства нашим пользователям? Есть ли люди, на самом деле понимающие, что представляют из себя эти три маленькие линии на нашем сайте?»
Постоянные читатели этого блога не будут удивлены, узнав, что нашим следующим шагом было задать эти вопросы в форме A/B теста. Как и все остальное, иконка-гамбургер был подвержен воздействию наших многочисленных клиентов, которые, путем взаимодействия с меню, должны определить, был ли этот значок лучшим решением. К этому времени я прочитал достаточно статей и информационных данных, чтобы быть уверенным, что отсутствие консенсуса или другие результаты не были следствием поведения покупателей, для которых разрабатывался дизайн. Я решил последовать методу, описанному Джеймсом Фостером, на который многие ссылаются, в том числе один из наших лучших мобильных специалистов — Люк Вроблевски.
Ранее мы протестировали несколько мест размещения и стилей значка (с рамкой, без рамки, с иконкой, разных цветов и так далее), но никогда не тестировали слово «Меню» — из-за сложностей, связанных с нашим желанием провести испытания на сорок одном языке, поддерживаемом нами. Тем не менее, мы двинулись вперед, найдя переводы с помощью нашей команды экспертов по языкам и запустили тест:
Базовый вариант
Наш исходный значок меню «гамбургер» слева от заголовка и с белой разделительной чертой справа.
Альтернативный вариант
Слово «Меню» внутри блока с белой рамкой с закругленными углами, также выравнивается по левому краю.
Мы запустили эксперимент для всей нашей пользовательской базы. А также, учитывая известность и вездесущесть этого элемента пользовательского интерфейса, надеялись, что не займет много времени подвергнуть тестированию миллионов наших клиентов по всему миру, на каждом из поддерживаемых языков и большом числе устройств.
Так каков конечный результат? Слово победило фастфуд, как это было в эксперименте Джеймса Фостера, или победит булочка с котлетой?
Результаты
В ходе этого эксперимента, замена иконки на слово «Меню» не оказало существенного влияния на поведение наших пользователей. С помощью нашей огромной базы пользователей, мы можем, с очень высокой степенью вероятности, констатировать, что, в частности, для посетителей Booking.com, иконка-гамбургер исполняет свою роль так же, как и версия с текстовым описанием.
Конечно мы не можем эти данные экстраполировать на все. В каких-то странах, на каких-то языках или устройствах, это возможно сработало лучше или хуже. Но в глобальном масштабе мы можем сделать вывод, что слишком сильно высмеивали «гамбургер». В целом, он был столь же узнаваем, как и слово «Меню». В духе управления продвижением дизайна нам, наверное, следует рассмотреть и другие варианты, и, может быть, попробовать к нашей иконке-гамбургеру добавить сыр, ломтик бекона и кортофель фри, но сейчас мы рады сообщить, что наш «трехлинейный друг» прилеплен везде. Его фактическое размещение, форма, размер, положение и цвет — это, конечно, предмет для будущих тестов.
Узнайте, как сделать меню-иконку (меню-бургер для мобильных устройств), используя CSS.
Как сделать меню иконку
Если вы не используете библиотеку иконок, вы можете создать иконку основного меню с помощью CSS:
Меню иконка (бургер):
Анимированная иконка (кликните на ней):
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
Объяснение примера
Свойства width и height определяют ширину и высоту каждой полосы.
Анимированная иконка
Используйте CSS и JavaScript, чтобы изменить иконку меню на иконку «отменить / удалить» при нажатии на неё:
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
.container <
display: inline-block;
cursor: pointer;
>
Шаг 3) Добавить JavaScript:
Пример
Объяснение примера
HTML & CSS: Мы используем те же стили, что и раньше, только на этот раз мы оборачиваем элемент контейнера вокруг каждого элемента
Элемент контейнера используется для отображения символа указателя, когда пользователь наводит указатель мыши на блоки div (полосы). Когда на нем кликают, он выполняет функцию JavaScript, которая добавляет к нему новое имя класса, что изменяет стили каждой горизонтальной полосы: первая и последняя полоса трансформируются и поворачиваются, преобразуясь в букву «x». Полоса посередине исчезает и становится невидимой.
Как сделать на сайте меню бургер с помощью HTML / CSS? Видео
Видеоинструкция, как сделать на сайте меню-бургер.