Меню для сайта гамбургер: Быстрое создание гамбургер меню для адаптивного сайта на jQuery

Крис Дрейкотт-Уитли создал его. Он построил это на CSS и немного на JS. Этот значок работает плавно.

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

Еще одна вещь, которая вам понравится в этом дизайне, — это то, что в нем есть кнопка со стрелкой влево, в то время как вы можете пойти вернуться на предыдущую страницу.

Размер достаточно большой, чтобы навести на него указатель мыши. Цвет фона просто красивый, чтобы увидеть иконку.

На данный момент он поддерживает две последние версии каждого основного браузера, то есть IE10 +. Надеюсь, что в ближайшее время у них будет последняя версия, доступная для IE8 +.

 Подробнее / Скачать

Что ж, это начальное гамбургер-меню на самом деле не является «гамбургером», но в любом случае оно имеет те же функции. Более того, вы можете добавлять меню внутри значка.

Например, вы можете увидеть, что внутри значка есть «Статьи n HTML5 и CSS3». Как только вы нажмете на нее, появятся несколько категорий. Это будет легче для посетителей для навигации через сайт. Им не нужно искать на странице то, что им нужно.

Это идеально подходит для любого веб-сайта. Он также может быть адаптирован для мобильных устройств! Вы можете добавить до пяти меню, а затем добавлять под ним категории по своему усмотрению. Dhanush Badge сделал это и сделал это исключительно с помощью HTML5 CSS3.

Javascript или программирование НЕ необходимы для этого.

Подробнее / Скачать

Гленн Смит создал этот значок с помощью HTML, CSS и jQuery. Несмотря на простоту, он работает правильно и плавно.

Иногда аудитории веб-сайта проще использовать более простые значки где они могут без проблем найти то, что ищут.

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

Единственное, что в этом меню — это то, что оно закрывает содержимое, находящееся под ним. Если вы хотите ИЗМЕНИТЬ функцию, просто удалите z-индекс, расположенный на значке меню и на панели меню.

Подробнее / Скачать

Это начальное гамбургер-меню разработал Хьюго Дарби Браун. Если вы хотите играть через значок, вы можете посетить эту страницу, которой Браун поделился в своей учетной записи — https://www.designcouch.com/. Он придает этому меню особый вкус по сравнению с другими.

Вместо того, чтобы ставить все категории под меню, он решил добавить категории рядом Это. Вы можете добавить кнопки с картинками.

С веб-сайта Брауна он добавил четыре категории, в которых он назвал биографию, работу, резюме и блог. Вы можете сделать то же самое, используя созданную им иконку в виде гамбургера. Имеет X кнопка, если вы хотите Закрыть меню.

Подробнее / Скачать

Лукас Беббер использовал CSS и SVG Filter для создания этого меню. У него есть три разные версии. Для всех, кто ищет уникальный бутстрап гамбургер-меню, может быть, это то, что вам нужно.

В зависимости от вашего вкуса, вы можете выберите любую версию его для вашего сайта.

Для Версии 1 при нажатии кнопки меню с кружком появится верхняя кривая линия с пятью кнопками с несколькими категориями. Если вы хотите закрыть меню, щелкните X. Для версии 2 при нажатии кнопки вокруг него появятся шесть категорий.

А как насчет версии 3? Когда вы щелкаете по меню, четыре разделенных кнопки круга появится справа. Наконец, есть версия 4 с четырьмя категориями при нажатии на меню.

Это немного похоже на версию 3; просто кнопки расположены слишком близко друг к другу.

Подробнее / Скачать

Бренден Палмер разработал это меню 17 мая 2015 года. Судя по названию «полноэкранное меню навигации», категории БУДУТ ПОТРЕБИТЬ всю страницу.

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

Если вы хотите закрыть меню, нажмите кнопку X в левой нижней части страницы.

Подробнее / Скачать

Вы искали лучшую начальную иконку гамбургера для мобильного сайта? Это раскрывающееся меню имеет отличную концепцию. Вам нужно только опустить фигуру, чтобы прыгать между страницами.

Фабрицио Бьянки создал эту концепцию взаимодействия с меню 26 ноября 2014 года. Помимо УНИКАЛЬНОГО способа использования этого значка, цвет довольно впечатляющий.

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

Меню Pull — хорошая замена скользящий список. То же самое и с опциями обновления. Разница в том, что страница не обновляется, а происходит переход на следующую страницу. Кроме того, он красочный и слишком забавный в использовании.

Подробнее / Скачать

Это также мобильное Bootstrap Hamburger Menu, созданное Imgonzalves. Что вам понравится в этом меню, так это то, что когда вы щелкнете по меню, оно не будет покрыть всю страницу.

Контент останется и опустится по категориям.

Вы можете добавить до четырех категорий или больше. Также есть кнопка X, если вы хотите закрыть меню. Что в этом уникального? Он СОЗДАЕТ более простую навигацию для вашей аудитории, переходящей на ваш сайт.

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

Подробнее / Скачать

Это меню, созданное Джейсоном Ховансом, является одним из самых популярных и часто используется создателями веб-сайтов. Стиль создан специально для iOs пользователи, но разработчик этого значка придумал другой способ сделать его доступным и для других типов операционных систем.

Это меню также можно добавить на свой сайт!

Что делает это меню особенным? Навигация просто ПРОСТАЯ.

Вам нужно всего лишь нажать одну кнопку, и все категории будут там. Вы можете добавить несколько групп в меню. Цвета, использованные здесь, также привлекают посетителей.

Подробнее / Скачать

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

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

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

Подробнее / Скачать

В этом меню есть разные элементы, которые вы можете выбрать. Помимо Bootstrap Hamburger Menu, есть Doner Menu, Bento Menu, Kebab Menu и Meatball Menu.

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

Анимация значков меню была разработана и создана Оливией Нг.

Подробнее / Скачать

Марио Лонкарек создал этот стиль оверлейного меню Bootstrap Hamburger. Всего одним щелчком мыши вы увидите все категории — даже категории, относящиеся к этим основным категориям.

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

В стиле Лонкарека вы увидите, что он создал три меню — «О программе», «Услуги» и «Работа», что позволяет пользователю УЗКАТЬ категории, которые они ищут.

Он использовал CSS HTML и jQuery для этого значка. Цвет нейтральный, что облегчает чтение.

Подробнее / Скачать

Педро Наук создал это раскрывающееся меню. Вы можете составить несколько меню. Как видно на картинке, создатель создал три списка. В каждом меню на экране отображаются различные категории.

Навигация по этому меню ОЧЕНЬ natural. Необязательно, чтобы ваша страница отображалась полностью, чтобы отображать меню и категории. Вы можете снова щелкнуть стрелку раскрывающегося списка, чтобы скрыть содержимое.

Это не только для мобильных устройств, но и для настольных компьютеров. У него тоже красивый шрифт! Вы можете скопировать шрифт, если хотите, но вы можете изменение мало детали в зависимости от вашего вкуса.

Подробнее / Скачать

Олег Соломка создал эту супер милую и фантастическую концепцию меню, также известную как Lego Mushroom. Вместо обычного значка он использует милые чтобы раскрасить идею, которую он имел в виду.

От ваших предпочтений зависит, ищете ли вы более простой или уникальный.

Олег Соломка даже указал на то, как он создавал кнопку меню. Это только КОНЦЕПЦИЯ. Вы также можете использовать эту концепцию на своем веб-сайте.

Подробнее / Скачать

Джеффри Крофте разработал этот стиль меню. Для его создания он использует CSS-переходы и Vanilla JS. Как видно на картинке, это просто.

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

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

НЕЙТРАЛЬНЫЙ цвет меню делает его подходящим для любой темы вашего блога или веб-сайтов. Он не распространяется на другое содержимое сайта, и это знак плюса для вашей аудитории или посетителя блога.

Подробнее / Скачать

Концепция этого меню почти такая же, как и у других. Хотя в этом стиле меню есть что-то уникальное.

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

Его форма также идеально подходит для показа в нескольких категориях. Просто нажмите кнопку X, если хотите ее скрыть.

Для новичка это НЕ трудно понять. Просто скопируйте коды, которыми поделился Серхио Андранде. Немного отредактируйте его, и тогда вы готовы к работе.

Подробнее / Скачать

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

Марко Фураго создал этот стиль гамбургер-меню.

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

Как видно из изображения, у него отличный визуальный эффект, а стиль шрифта просто идеален. Цвет также добавляет красоты сайту.

Подробнее / Скачать

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

Они только сузят область поиска, выбрав меню, связанное с ним. Тогда категорию можно было бы легко найти.

Подробнее / Скачать

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

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

Помимо ПРОСТОГО дизайна меню, по нему легко перемещаться.

Хорошая навигация и простой дизайн могут работать вместе. Так и будет улучшить функцию вашего веб-сайта таким, каким вы хотите его видеть.

Подробнее / Скачать

Сара

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

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

Просто нажмите кнопку X, чтобы закрыть меню.

Наличие ИЗОБРАЖЕНИЙ на значке меню привлекает зрителей. Это даст им мгновенное представление о том, что входит в каждую категорию. Сара Суейдан провела отличная работа за это!

Подробнее / Скачать

Как сделать дизайн меню гамбургера

Взгляните на левый верхний угол нашего сайта. Узнаете этот значок тройной полосы? Его уже видел каждый пользователь интернета, и мы интуитивно знаем, что внутри — сайт или мобильное меню. Для любого дизайнера это известно как «гамбургер-меню», поскольку оно напоминает форму знаменитого бутерброда. Дизайн значка очень прост; тем не менее, его UX вызывает много споров, и многие авторитетные ресурсы, такие как Techcrunch, призывают убрать эту кнопку и заменить ее более удобными для пользователя параметрами.

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

Источник: Dribbble

Что такое гамбургер-меню?

Начнем с нескольких слов о происхождении иконки гамбургера. Она была создана дизайнером Нормом Коксом для первого компьютера Xerox Star в 1981 году и представляла собой трехстрочную кнопку, представляющую собой меню.

Однако он не получил широкого распространения до 2009 года, когда появился в пользовательском интерфейсе Facebook в виде сетки меню, которое в 2010 году было преобразовано в «бутерброд». К этому времени он начал распространяться на все популярные платформы. в Интернете.

Таким образом, он стал одним из основных элементов дизайна UX/UI и, похоже, останется там надолго. Сообщество дизайнеров восприняло новую тенденцию настороженно: одни не любят иконку и предлагают заменить ее удобными вкладками, другие приветствуют новый минималистичный дизайн сайта-гамбургер-меню и размещают его в каждой системе, будь то корпоративный сайт или дизайн сайта банка. . Так что, можно предположить, причина нелюбви не в том, как он выглядит, а в том, когда и где он используется.

Профи меню гамбургеров

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

Узнаваемость

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

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

Более четкая навигация

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

Прямой доступ

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

Гамбургер-меню минусы

Гамбургер-меню кажется идеальным решением для минималистского дизайна, не так ли? Но есть обратная сторона.

Трудно обнаружить

Существует как минимум три причины, по которым навигационное меню-гамбургер может остаться незамеченным:

• Маленькая кнопка вряд ли будет найдена и распознана как меню. Более 50% людей удаляют приложения сразу после загрузки по многим причинам, в том числе из-за сложного интерфейса, поэтому пользователи могут отказаться, если не нашли знакомые шаблоны меню.

• Положение мобильного гамбургер-меню — верхний левый угол, который совпадает с положением кнопки «Назад»: люди могут попытаться вернуться на предыдущий экран и оказаться в меню.

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

Это не один щелчок

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

Трудно дозвониться с мобильного телефона

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

Советы по составлению хорошего меню для гамбургеров

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

Создать собственный значок

Трехстрочная форма не оставляет места для воображения. Цель состоит в том, чтобы оставаться последовательным и узнаваемым для хорошего пользовательского опыта и в то же время проявлять творческий подход:

Источник: Userapi

Сделать его адаптивным

Что положить в ящик для гамбургеров?

Пользователи настольных компьютеров оценят мегаменю с вертикальными ссылками, строками и вкладками контента. Мобильные пользователи предпочитают горизонтальную навигационную панель или вертикальную скользящую навигацию, и нет смысла отображать более одного столбца меню. Что можно сделать, чтобы удовлетворить обоих? Используйте отзывчивый или адаптивный дизайн и создайте гамбургер-меню на мобильных устройствах и разверните на настольных компьютерах. Популярный подход заключается в том, чтобы обернуть видимое меню рабочего стола topnav в скрытое меню-гамбургер: нажмите, чтобы узнать, как это сделать с помощью кода HTML, CSS и Javascript.

Продумайте анимацию

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

Источник: Tumpanus

Проведение пользовательских тестов

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

Вдохновение для гамбургер-меню

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

Источник: AWWARDASS

Источник: Valnetinc

Источник: Patrickheng

Источник: Kommicraphics

Источник: Suctive Ices. умные взаимодействия и минималистичный дизайн:

Источник: Dribbble

Источник: Dribbble

Источник: Dribbble

Источник: Dribbble

Источник: Dribbble

Альтернативы гамбургер-меню

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

Кнопка «Добавить»

В этом пользовательском интерфейсе функции главного меню представлены на главном экране. а дополнительные всплывают при нажатии кнопки «Добавить».

Источник: Сdn-images-1

Прилепленная навбар

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

Источник: Snowbird

Одностраничная точечная навигация

Длинная прокрутка страниц — популярная тенденция последних лет. Зачем нажимать и искать, когда можно прокручивать вниз и вниз, видеть все и находить то, что вам нужно?

Источник: Codropspz-tympanus.

Источник: Dribbble. уведомлять.

Источник: Dribbble

Вкладки

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

Источник: Dribbble. В этом случае разумно использовать шаблон меню гамбургера, но пометить значок словом.

Источник: Mathis-biabiany

Центральная вертикаль

Чем проще, тем лучше. Не прячьте меню, поместите его прямо в центр экрана.

Источник: Tvihorf

Постепенно сворачивающееся меню

В отличие от гамбургера, постепенно сворачивающееся меню предлагает несколько опций, а также полный набор опций и кнопку «Дополнительно».

Источник: Kyusuf

Плавающее меню

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

Источник: Dribbble

Заключительное слово

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

22 лучших примера гамбургер-меню для мобильных приложений и веб-сайтов

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

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

Что такое гамбургер-меню на веб-сайте?

В Интернете гамбургер-меню — это значок, который открывается для отображения меню навигации при нажатии на него. Такое меню представляет собой стопку из трех горизонтальных линий, напоминающих гамбургер: верхняя булочка, пирожок и нижняя булочка. Таким образом, это называется по-разному, например, «Хот-дог», «Боковое меню», «Блин» и так далее. Он не использовался широко до 2009 года и за эти годы получил много хлопот.

Гамбургер-меню профи в сети:

• В целом хорошо узнаваем. На самом деле это общепонятный знак, который не требует перевода на другие языки.

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

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

Минусы гамбургер-меню в Интернете:

• Это не в один клик, что делает рейтинг кликов относительно низким.

• Его несколько сложно обнаружить, и из-за этого внутренние функции кажутся менее важными.

Меню гамбургеров должно быть слева или справа?

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

Кроме того, рекомендуется сместить его влево, так как он полностью соответствует Руководству Google по дизайну материалов (где значки справа представляют собой действия, связанные с приложением, а значок меню открывает дополнительное меню и содержит такие элементы меню, как настройки , обратная связь и др.).

Что такое гамбургер-меню в Android или iPhone?

В Android гамбургер-меню — это скользящее меню, которое появляется на экране, когда вы проводите искателем от правого или левого края экрана. Между тем, он появляется, когда вы нажимаете кнопку с 3 полосами на панели действий; В iPhone это точно так же, как по умолчанию для кнопки «Назад», и вы можете сжать обе кнопки рядом друг с другом.

Меню гамбургеров для профессионалов на мобильном телефоне:

• Это поможет аккуратно сложить все необходимое.

• Это не требует пояснений и не требует от пользователей повторного обучения.

• Он обеспечивает большее удобство использования и помогает пользователям быстрее и проще добраться до нужного пункта назначения.

Минусы гамбургер-меню на мобильном телефоне:

• Может конфликтовать с кнопками навигации на iOS.

• Трудно достать, особенно если он расположен в верхней части экрана.

Топ 22 примеров гамбургер-меню

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

Гамбургер-меню с использованием CSS

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

1. Полноэкранное гамбургерское мегаменю с JS и CSS

2. 8 гамбургерных анимаций переключения в чистом HTML/CSS

3. Переключение кнопок меню с помощью полноэкранных CSS и JavaScript

3

3 Меню с чистым HTML/CSS

5. Отзывчивая навигация на основе CSS Flexbox

Гамбургер-меню с использованием Bootstrap

Ниже приведено наиболее рекомендуемое гамбургер-меню Bootstrap, и вы можете найти широко используемое левое гамбургер-меню Bootstrap ниже .

6. Шаблон меню навигационной навигации

7. Menu Bootstrap Adpressive с Sumenu

8.

. Свернуть меню Bootstrap0023

12. Атомное меню Алекса Ковена

13. Меню Toggle By Tamino Martinius

14. Нарисованный переход Hamse Couch

15. Frosty graham Wils wils Wils wils Wils wils wils wils wils wils wils wils wils graham. Полноэкранное меню навигации на чистом CSS от Brenden Palmer

17. Анимированный гамбургер от Steven Fabre

18. Another Top Menu от BJack

19. Open – Close от Vineeth.TR

20. CSS3 только гамбургер от Dawid Krajewski

21. Анимированный меню Hamburger от Matthew Ladner

9003

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

Меню с вкладками

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

Вкладка с параметрами «Дополнительно»

» в виде раскрывающегося меню. Вот пример Mockplus для справки:

Плавающее меню-гамбургер и меню, которые могут соответствовать ширине экрана.

Заключение

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

Плюсы, минусы и рекомендации

Дизайн, пользовательский интерфейс, UX, идеи

Все, что вам нужно знать о трех горизонтальных линиях

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

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

Карманный справочник по меню гамбургеров: обзор

• Что такое меню гамбургеров?
• Когда использовать?
• Когда этого следует избегать?
• Сильные и слабые стороны
• Передовой опыт и советы по использованию

3D Button от Аарона Икера

Что такое гамбургер-меню?

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

Icon Concept by Minh Pham

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

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

Скрытие навигации на ПК и мобильных устройствах может быть полезным для одних веб-сайтов и вредным для других. Чтобы предотвратить неправильное использование этого элемента пользовательского интерфейса и создание плохого UX, давайте сначала выясним, когда уместно использовать гамбургер-меню.

• Несущественные элементы: Не на всех веб-сайтах есть минимальное количество элементов (Работа, Услуги, О нас, Блог, Контакты). На самом деле, большинство веб-сайтов имеют гораздо больше опций меню, большинство из которых не привлекают столько трафика, сколько их главные страницы. Включение этих элементов в основную навигацию только загромождает страницу. Лучшее решение — поместить их за пределы экрана в ящик навигации
.
• Настройки профиля и списки: Когда речь идет о приложениях, требующих создания учетных записей, гамбургер-меню является наиболее интуитивно понятным и логичным местом для хранения всех настроек профиля, избранного, лайков, сохраненных элементов и других списков. Они также не будут мешать пользователю выполнять повторяющиеся шаблоны использования.
• Элементы навигации для веб-сайтов электронной коммерции: В электронной коммерции всегда есть второй уровень взаимодействия с профилем, корзиной, списком пожеланий и поиском. Обычно лучше хранить эти элементы в гамбургер-меню, чтобы они не загромождали страницу.
• Мертвые зоны контента: Контент не всегда строится вокруг конверсий и обучения, когда вы полностью реализуете свою стратегию конверсии. На некоторых веб-сайтах навигация должна быть доступна в любое время. В этом случае есть мертвые зоны контента, которые в значительной степени зависят от изучения первичной навигации.
• Одиночный призыв к действию: Для целевых страниц с одним четким призывом к действию.

Иконка Стефана Чирковича

Когда следует избегать навигации по гамбургерам?

• Основные функции: Не заставляйте пользователей переходить в меню-гамбургер для поиска наиболее важных элементов. Основные функции должны быть обнаружены непосредственно при посадке, иначе вы рискуете, что ваши пользователи никогда их не найдут.
• Очень интерактивный веб-сайт: Если на вашем веб-сайте или в приложении уже много взаимодействий (например, анимация при прокрутке), рекомендуется не доставлять им неудобств дополнительным шагом. Для таких веб-сайтов более уместен последовательный доступ.
• Встроенные элементы навигации: В некоторых случаях, например в случае со встроенной навигацией iPhone, меню-гамбургер может скрывать эти параметры, что влияет на удобство использования.
• Рабочий стол: Конечно, есть исключения, когда гамбургер-меню идеально вписывается в дизайн и работу рабочего стола. Тем не менее, гамбургер-меню не должно быть единственным вариантом для настольного веб-сайта в целом по нескольким причинам. Во-первых, на рабочем столе навигация дополняет UX, мгновенно сообщая о том, что представляет собой веб-сайт, и предоставляет немедленный доступ к его содержимому. Во-вторых, без четких пользовательских путей остается много места для упущенных конверсий.

Сильные и слабые стороны

Некоторым UI/UX-дизайнерам нравится гамбургер-меню, некоторые категорически ненавидят его. Как бы то ни было, эти три восхитительные горизонтальные линии в верхнем левом углу постоянно вызывают споры, вдохновляют на критику и, тем не менее, остаются популярными. Чтобы понять обе стороны, давайте взглянем на сильные и слабые стороны гамбургер-меню.

Анимированные меню Юрре Хауткампа

5 Основные преимущества меню гамбургеров

С 2014 года мир UX признает недостатки гамбургер-меню и продолжает называть его провалом. В таких статьях, как Kill the Hamburger Menu на TechCrunch и во всем мире технологий, UX-специалисты постоянно высказываются в пользу устранения этой тенденции ради улучшения пользовательского опыта. Хотя многие крупные приложения перешли на другие стили и шаблоны навигации, гамбургер-меню по-прежнему доминирует в большинстве приложений и веб-сайтов и по сей день. Теперь давайте посмотрим, почему меню-гамбургер остается синонимом меню со скрытым ящиком.

Interactive by Tubik

1. Общепризнанный символ

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

2. Предоставляет прямой доступ

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

3. Чистота и организованность

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

4. Может хранить дополнительные параметры

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

5. Экономит драгоценное место на экране

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

5 основных недостатков гамбургер-меню

После того, как мы хорошо рассмотрели плюсы, давайте перейдем к минусам гамбургер-меню.

Удивительная анимация от Calin Balea

1. Обозначение меньшей важности

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

2. Возможность более низкого вовлечения

Теперь у нас есть небольшое противоречие. С одной стороны, пользователи узнают значок меню гамбургера и точно знают, где его найти. Однако, с другой стороны, количество кликов для значка гамбургера намного ниже по сравнению с другими кнопками. Причина этого в том, что мобильные устройства, особенно телефоны, становятся больше. Чем больше они становятся, тем неудобнее для пользователей становится доступ к верхнему левому или верхнему правому углам, где обычно находится значок гамбургера. Естественно, это может привести к снижению вовлеченности.

3. Требуется больше действий

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

4. Плохо переводится на рабочий стол

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

5. Легко забыть

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

Передовой опыт и советы по использованию

Отбросив теорию, давайте сосредоточимся на том, как сделать ваше гамбургер-меню эффективной частью опыта.

1. Попробуйте пользовательский значок

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

Delicious Foods by Arifin Yeasin

2. Используйте анимацию

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

Micro Interaction Vatsal Mehta

3.

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

Годовой отчет М.видео Татьяны Скоробогатовой

4. Сделайте это очевидным

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

Meetback – представление для мобильных устройств, Саймон Рико

5.

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

Панель вкладок Liquid от Cuberto

6. Влево или вправо?

Размещение значка гамбургера слева интуитивно понятно для носителей языков LTR. Большинство веб-сайтов и приложений используют выравнивание по верхнему левому краю для удобства, и именно там их будет искать большинство пользователей. С другой стороны, правильное расположение лучше для смартфонов с большими экранами, так как большому пальцу немного легче добраться до дальнего правого угла, а не до дальнего левого. Это не принципиальное решение, так как значок гамбургера общеизвестен, и пользователи найдут его в любом случае.

Alzavino Боковая навигация по веб-сайту от Джея Уолтера

Заключительные мысли

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

А пока почему бы не проверить 45 отличных примеров дизайна меню для мобильных устройств [+Лучшие практики] или другие связанные идеи по веб-разработке и веб-дизайну?

• [UI/UX Design Insights] Wireframe VS Prototype: в чем разница? (с примерами и инструментами)
• [Вдохновение для UI/UX] 35 интерактивных дизайнов веб-сайтов, которые заставят вас потерять счет времени
• [Ресурсы по дизайну UI/UX] 15 инструментов и генераторов цветовых схем пользовательского интерфейса для идеального интерфейса

Руководство по дизайну меню гамбургеров

Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство на нашем веб-сайте. Для получения дополнительной информации нажмите здесь. Понял

Есть еще аппетит к меню гамбургеров? В этом посте мы рассмотрим современные примеры и советы по UX.

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

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

Создавайте и прототипируйте веб-приложения и мобильные приложения с помощью Justinmind бесплатно. Неограниченное количество проектов!

Но как же такая горячо оспариваемая иконка стала такой популярной в дизайне пользовательского интерфейса? Что еще более важно, должны ли вы использовать его в своих следующих проектах и ​​как? Это вопросы, которые мы собираемся исследовать в этом руководстве. После этого у вас должно быть более четкое представление о том, когда использовать гамбургер-меню, когда придет время использовать инструмент каркаса. Заправляйся!

• Что такое гамбургер-меню?
• Когда использовать гамбургер-меню
• Когда не использовать гамбургер-меню
• Рекомендации по использованию гамбургер-меню
• Примеры гамбургер-меню лучших мобильных приложений
• Примеры гамбургер-меню самых популярных веб-сайтов

hamburger menu Что такое меню гамбургеров?

Спойлер: это не то меню, которое вы можете найти в вашем Sloppy Joe’s или гастро-баре с рецептом вкусной рваной свинины. Это те три горизонтальные линии, которые вы видите в верхнем углу экрана в приложениях и на адаптивных веб-сайтах. Следовательно, когда дизайнеры ссылаются на «гамбургер-меню», мы на самом деле говорим об значке, который используется для размещения множества пунктов меню в одном слайд-меню и их скрытия.

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

Гамбургер-меню – краткая история

Еще в 80-х Норм Кокс, отец гамбургеров, разработал персональную рабочую станцию ​​Xerox Star. Он разработал четырехстрочный значок, символизирующий, что кнопка открывает список элементов. Позже мир дизайна назовет этот значок печально известным «гамбургер-меню». Позже он получил бы такую ​​же известность в мире дизайна, как Робин Гуд в Шервудском лесу.

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

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

Отлично, правда? Второй шанс для гамбургер-меню. Но не во всех уголках мира дизайна это приветствовалось. Фактически, он столкнулся со многими врагами, которые отвергли его идею, заявив, что это спорный элемент дизайна. Они изо всех сил желали, чтобы меню гамбургеров прыгнуло на машине времени в 80-е и осталось там, в Xerox.

Отказ от гамбургер-меню

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

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

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

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

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

Откройте для себя неоморфизм — новый стиль, покоривший Интернет!

Стоимость взаимодействия в меню «Гамбургер»

Конечно, другая явно очевидная причина заключается в том, что добавление дополнительных касаний, свайпов, щелчков, танца чечетки, ухмылки или чего-то еще — все это сказывается на пользователе, явление, называемое стоимостью взаимодействия. Да, мы сказали это: меню гамбургеров действительно увеличивает стоимость взаимодействия из-за этого дополнительного этапа в открытии.

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

Гамбургер-меню – известная ментальная модель

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

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

Бесплатный дизайн и прототип веб-приложений и мобильных приложений с Justinmind. Неограниченное количество проектов!

Когда использовать гамбургер-меню

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

Скрытие второстепенных функций

Представьте, что основные элементы навигации и функции вашего веб-сайта или приложения уже видны, и у вас есть несколько дополнительных опций или подкатегорий, которые не так важны для целей конверсии веб-сайта. Если не так важно, чтобы пользователи связывались с вами или видели ваш раздел «О нас» (это зависит от целей веб-сайта), вы можете скрыть их за гамбургер-меню, чтобы сэкономить место на экране.

Чтобы узнать больше о важности иерархии и основной навигации, прочтите наш пост о дизайне навигации, в противном случае читайте дальше!

Сохранение пространства на экране

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

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

Когда не следует использовать гамбургер-меню

Когда оно скрывает основные функции

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

Когда ваш веб-сайт уже активно взаимодействует

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

Когда он скроет родную навигацию

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

Рекомендации по приготовлению гамбургер-меню

Слева или справа от экрана?

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

Аргументом в пользу размещения его слева является тот факт, что носители языков с письмом слева направо склонны начинать с содержимого слева от страницы в форме буквы F. Из-за этого многие меню были размещены слева, что также означает, что пользователи привыкли к меню слева. На самом деле, рекомендации по материальному дизайну, которые называют его «навигационным ящиком», указывают на то, что вы должны сделать это именно по этой причине.

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

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

Плавающее меню-гамбургер

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

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

Используйте при уменьшении масштаба

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

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

Как использовать в сочетании с обычным меню

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

Бесплатный дизайн и прототип веб-приложений и мобильных приложений с Justinmind. Неограниченное количество проектов!

Лучшие примеры гамбургер-меню мобильных приложений

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

1. Amazon

Гигант электронной торговли, приложение Amazon, является отличным примером популярной электронной коммерции с использованием гамбургер-меню. Дизайнеры Amazon провели исследование и поняли, что ищет пользователь, как только он открывает приложение.

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

2. Telegram

Самое быстрое приложение для обмена сообщениями на рынке, Telegram также может эффективно использовать гамбургер-меню.

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

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

3. Discord

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

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

4. Amazon Alexa

Гамбургер-меню приложения Amazon Alexa имеет уникальную форму, но мгновенно узнаваем как гамбургер-меню с дополнительными или второстепенными параметрами, которые пользователь может найти в левом верхнем углу экрана.

Перечисление дополнительных параметров под кнопкой «гамбургер» было мудрым выбором, поскольку основные параметры навигации уже видны, например, доступные устройства и группы комнат.

5. Google Pay

Google Pay — еще один отличный пример гамбургер-меню, который можно использовать с пользой. Конечно, основные функции приложения — показывать карты пользователя, доступные для оплаты. Все остальные параметры скрыты от основного пользовательского интерфейса под кнопкой меню гамбургера.

Узнайте больше о дизайне пользовательского интерфейса карты.

Почему? Потому что, как только пользователь открывает Google Pay, он, как правило, занят, на кассе магазина, готовый раскошелиться на наличные. Последнее, что им нужно, — это множество отвлекающих факторов с второстепенными вариантами.

6. Just Eat

Приложение для доставки еды Just Eat также хорошо справляется с меню гамбургеров. Как и в случае с Google Pay, когда голодные пользователи открывают приложение, «История заказов», «Настройки» и «Справка», вероятно, не являются первыми вариантами навигации, которые приходят им на ум.

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

7. LinkedIn

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

Это сразу демонстрирует пользователю, что есть опции, которые напрямую связаны с учетной записью и профилем пользователя прямо в меню.

8. Dropbox

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

Однако в версии для Android все остальные опции расположены за лаконичным гамбургер-меню. Нажав на меню-гамбургер, пользователь может увидеть список дополнительных параметров навигации для фильтрации своих файлов, таких как «Файлы», «Бумага», «Фотографии» и «Автономные файлы».

Бесплатный дизайн и прототип веб-приложений и мобильных приложений с Justinmind. Неограниченное количество проектов!

9. Google Диск

Так же, как Dropbox, приложение Google Диск делает приоритетным показ пользователю всех его последних файлов. Независимо от того, были ли они созданы с помощью Google Docs или Google Sheets, ясно, что они показывают пользователю то, что он, вероятно, ищет в первую очередь.

Остальные дополнительные параметры навигации скрыты за гамбургер-меню, например, «Недавние», «Не в сети», «Корзина», «Уведомления», «Резервные копии» и другие подобные параметры, такие как «Настройки».

10. Uber

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

В конце концов, такие параметры, как «Настройки» и «История», вряд ли станут непосредственными целями для пользователя каждый раз, когда он открывает приложение, и вряд ли будут использоваться каждый раз, когда он открывает приложение.

Примеры гамбургер-меню на самых популярных веб-сайтах с адаптивным дизайном

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

1. Shopify

При уменьшении своего веб-сайта до меньших разрешений Shopify умно решил скрыть большинство своих параметров навигации за меню-гамбургером, которое они размещают в правом верхнем углу экрана.

Это связано с тем, что пользователь, скорее всего, просматривает веб-версию Shopify перед настройкой сайта электронной коммерции, даже при просмотре с мобильного устройства. Расположение гамбургер-меню в правой части экрана означает, что оно не закрывает логотип слева и оставляет пользователю одну основную задачу: зарегистрироваться и начать бесплатную пробную версию!

2. Github

Github, самая популярная платформа для разработки программного обеспечения, хорошо масштабирует свой веб-сайт, а также использует гамбургер-меню, чтобы скрыть панель инструментов, проблемы с запросами на вытягивание и рынок. Почему?

Основные функции их домашней страницы также обычно служат основной навигацией: «Исследовать GitHub», «Прочитать руководство», «Начать проект» и «Создать репозиторий» — все это призывы к действию, чтобы пользователь мог наслаждаться основные функции сайта.

3. NBC News

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

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

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

4. CSS-трюки

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

В мобильной версии все эти категории сжаты в гамбургер-меню, просто выходя из строки поиска. Это показывает, что CSS Tricks понимает смысл срочности (NNG) и срочности, которые часто требуются пользователям мобильных устройств. Когда они переходят непосредственно на веб-сайты, они часто ищут что-то конкретное, а не просматривают.

5. Starbucks

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

Заключительные мысли — гамбургер-меню

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

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

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

Создавайте и прототипируйте веб-приложения и мобильные приложения с помощью Justinmind бесплатно.

Джозеф Даунс

Штатный копирайтер UX, гурман и любитель классических автомобилей

Связанный контент

Гамбургер Дизайн меню, темы, шаблоны и загружаемые графические элементы на Dribbble

1. Посмотреть специальный бургер // Мобильное приложение

   Специальный бургер // Мобильное приложение

2. Просмотр веб-сайта продуктов из яиц: взаимодействие с меню

   Веб-сайт продуктов из яиц: Взаимодействие с меню

3. Просмотр анимированных гамбургер-меню

   Анимированные меню гамбургеров

4. Просмотр 🍔 3D-кнопка

   🍔 Кнопка 3D

5. Бургер и газировка🍔🥤

6. View Attio – Мобильная навигация

   Attio – Мобильная навигация

7. Просмотр ящика навигации по реальному потоку

   Ящик навигации Real Thread

8. Посмотреть анимацию меню smartalpha. ro

   анимация меню smartalpha.ro

9. Посмотреть ретро целевую страницу

   Ретро-целевая страница

10. Посмотреть анимацию меню

    Анимация меню

11. Посмотреть боковое меню гамбургера

    Боковое меню для гамбургеров

12. View HaveStar — адаптивное мега-меню и выпадающее меню

    HaveStar — Отзывчивое мега-меню и выпадающее меню

13. Посмотреть эксперимент 001 панели навигации | Файзур

    Навбар Эксперимент 001 | Файзур

14. Посмотреть мне нравится

    Мне это нравится

15. Просмотр гамбургер-меню / эффект наведения

    Гамбургер-меню / эффект наведения

16. Посмотреть иллюстрацию бургера

    Иллюстрация бургера

17. Посмотреть меню горных экскурсий

    Меню горных экскурсий

18. Посмотреть анимацию переключения гамбургеров

    Анимация переключения гамбургеров

19. Посмотреть меню Tasty Burger

    Меню вкусных бургеров

20. Просмотр Есть и другие вкусные блюда, кроме значка «Гамбургер»

    Есть и другие вкусные блюда, кроме значка «Гамбургер»

21. Просмотр анимации закрытия меню

    Анимация закрытия меню

22. Просмотреть иллюстрацию меню гамбургера

    Иллюстрация меню гамбургера

23. Посмотреть расширяемое меню

    Расширяемое меню

24. Посмотреть анимацию меню гамбургера

    Анимация меню гамбургера

Зарегистрируйтесь, чтобы продолжить или войдите

Загрузка еще…

Что такое кнопка для гамбургера и как она работает?

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

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

Итак, в этом руководстве мы углубимся в детали и поместим кнопку гамбургера под гриль: что такое кнопка гамбургера? Для чего его использовать? Зачем возиться с этим стилем кнопки и как сделать его в CSS? Давайте копать.

Что такое кнопка для гамбургера?

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

Кнопки гамбургера обычно размещаются в верхнем углу пользовательского интерфейса. При нажатии на кнопку открывается ранее скрытое меню (также называемое «гамбургер-меню»). Это меню может «выпадать» из положения кнопки, отображаться как модальное или выскальзывать сверху, сбоку или снизу экрана.

Основное назначение кнопки-гамбургера — экономить место на экране, скрывая элементы навигации. Сама иконка маленькая и подразумевает скрытый список, который можно открыть кликом или нажатием.

Кнопка для гамбургеров История

Кнопка для гамбургеров появилась в 1981 году, когда дизайнер Норм Кокс выполнил некоторую работу для персональной рабочей станции Xerox. Он пробовал другие варианты, включая стрелку вниз, звездочку и символ «плюс», но ни один из них не предлагал такой же простоты использования, как этот простой помощник для приготовления гамбургеров.

Пользователи быстро усвоили концепцию: нажмите кнопку, чтобы открыть раскрывающееся меню навигации или ссылок на функции. Однако, за исключением его первоначального запуска в Xerox, дизайнеры особо не беспокоились о бургере — до тех пор, пока Twitter не начал использовать его в 2008 году. Год спустя он появился в iOS, а сегодня является одним из основных продуктов веб-дизайна, часто появляясь в топах. в левом или правом верхнем углу веб-страницы и обеспечивает удобное место для хранения больших меню.

Булочка для гамбургеров Преимущества и недостатки

Не всем нравится роль кнопок-гамбургеров на веб-сайтах. Недоброжелатели говорят, что эта булочка преувеличена, выявляя такие проблемы, как:

• Отсутствие универсальности — Несмотря на широкое знакомство, не каждый пользователь знает, что такое кнопка-гамбургер или что она делает, поэтому маловероятно, что они нажмут, чтобы увидеть другие варианты сайта.
• Низкая вовлеченность — Панели навигации с понятными значками меню легко увидеть, распознать и использовать. Кнопки-гамбургеры не выделяются и не получают такого же уровня вовлеченности пользователей.
• Отсутствие важности — Разглагольствования о гамбургерах доказывают, что все, что стоит за бургером, не так важно, как все остальное на вашем сайте, иначе оно заняло бы место на первой странице.

Но у размещения меню на основе булочек на вашем сайте есть и свои преимущества, в том числе:

• Чистый вид — Кнопка бургера почти не занимает места, что позволяет легко разместить ее в любом месте страницы, не отвлекая от других кнопок. элементы. Пользователи знают, как это выглядит, а это означает, что вы можете уделить больше времени и усилий другим элементам дизайна.
• Последовательная функция — Это трехстрочное меню делает одну вещь, и одну вещь действительно хорошо. Это делает его отличным дополнением к единообразию дизайна веб-сайта — хотя он может и не быть броским, он предлагает солидную функциональность.
• Четкая цель — Не все должно быть на главной странице вашего сайта. Гамбургер-меню обеспечивает предопределенное место для навигационных элементов, которые не являются главным приоритетом, но все же стоит держать их под рукой.

Примеры кнопок для гамбургеров

Кнопки для гамбургеров есть во всем Интернете — вот несколько примеров, демонстрирующих, как они могут выглядеть.

Кнопка гамбургера в приложении для Android

Начнем со стандартного примера меню гамбургера в приложении. Домашний экран приложения Gmail выглядит так: обратите внимание на кнопку-гамбургер в левом верхнем углу.

Источник изображения

При касании значка с левой стороны появляется меню.

Источник изображения

Кнопка гамбургера на веб-сайте

Далее продуктовый бренд Pipsnacks творчески использует меню гамбургеров на своем мобильном веб-сайте. При загрузке страницы кнопка отображается в верхнем левом углу экрана.

Источник изображения

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

Источник изображения

Креативная кнопка-гамбургер

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

См. меню Pen Animated от Danilo (@Danilo06) на CodePen.

Как сделать кнопку для гамбургера с помощью CSS

К счастью, создать кнопку-гамбургер в CSS не так уж сложно. Если вы предпочитаете создавать код CSS в отдельном редакторе, попробуйте такие варианты, как RapidCSS или Stylizer. RapidCSS быстрый, легкий и хорошо подходит для пользователей с некоторым опытом работы с CSS. Stylizer предлагает более формат графического интерфейса и поставляется с опциями немедленного предварительного просмотра, чтобы убедиться, что написанный вами код дает нужные вам результаты.

Если вы предпочитаете программировать на платформе, одним из самых простых вариантов является WordPress. Сначала войдите в свою учетную запись, найдите «Внешний вид» на левой боковой панели и нажмите «Настроить».

Источник изображения

Перейдите в нижнюю часть нового левого бокового меню и выберите «Дополнительный CSS».

Источник изображения

Наконец, вы увидите страницу редактора CSS, которая позволяет вам вводить и тестировать код CSS перед его размещением на вашем сайте.

Источник изображения

Теперь пришло время построить бургер. Допустим, вы хотите создать статическую иконку. Согласно W3Schools, лучше всего начать с HTML:

Этот код служит основой для кнопки-гамбургера.

Затем добавьте свой CSS:

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

Создание динамического значка кнопки-гамбургера с помощью CSS

Если вы хотите попробовать свои силы в чем-то более сложном, рассмотрите анимированную кнопку меню, которая при нажатии превращается в значок «Отмена». Вот как это начинается:

Нажмите, чтобы открыть меню, и оно превращается в это:

Благо здесь? Пользователи не только получают доступ к вашему бургерному меню, но и понимают, как сделать так, чтобы оно исчезло с помощью универсального «X» для отмены.

Чтобы создать эту динамическую опцию, начните с вашего HTML:

Теперь добавьте свой CSS:

Наконец, добавьте немного JavaScript:

Создание кнопки бургера без кода

Конечно, не все хотят тратить время и усилия по созданию кнопки-гамбургера, на которую пользователи могут нажимать или не нажимать. Некоторые владельцы веб-сайтов просто не умеют кодировать CSS и HTML, в то время как другие предпочитают отдавать приоритет созданию контента или макетам главной страницы.

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

1. CMS Hub

С помощью CMS Hub вы можете создать отличный веб-сайт, отвечающий вашим потребностям и охватывающий целевой рынок. Убедитесь, что все работает должным образом с помощью мониторинга трафика и интеграции маркетинговых кампаний. Кнопки для гамбургеров входят в стандартную комплектацию.

2. Squarespace

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

3. Webnode

40 миллионов пользователей создали сайты с помощью Webnode — добавляйте или изменяйте контент всего несколькими щелчками мыши и быстро настраивайте размещение и параметры раскрывающихся меню любых гамбургер-меню.

4. Site123

«Простой» — это название игры для этого конструктора сайтов. Site123 не прихотлив — он бесплатный и позволяет легко интегрировать гамбургер-меню в ваш веб-дизайн.

Игра в шутку

Не всем нравится кнопка гамбургера.

Логично; меню может вызвать путаницу или поставить важные параметры навигации вне досягаемости. Но есть и преимущества: создание собственной кнопки или использование инструмента для создания веб-сайтов позволяет вам решить, где это меню оказывает наибольшее влияние, и дает вам полный контроль над навигацией по вашему сайту.