Меню для сайта бургер: Как создать Burger Menu для сайта. Мобильное меню на чистом CSS.

Фиксированное гамбургер-меню

.mobile div {

    display: block;

    position: fixed;

    bottom: 16px;

    right: 16px;

    background-color: #337AB7;

    height: 50px;

    width: 50px;

    border-radius: 50%;

    z-index: 9999999;

    border: 4px solid #BFE2FF;

    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.3);

    cursor: pointer;

    box-sizing: content-box;

}

.mobile div span {

    display: block;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: 30px;

    height: 4px;

    background-color: #fff;

    border-radius: 13px;

    transition-duration: .4s;

}

.mobile div span:nth-child(1) {

    top: 14px;

}

.mobile div span:nth-child(2) {

    top: 23px;

}

.mobile div span:nth-child(3) {

    bottom: 14px;

}

.mobile div.active span:nth-child(1) {

    transform: translate(-15px, 9px) rotate(-45deg);

}

.mobile div.active span:nth-child(2) {

    transition-duration: 0s;

    opacity: 0;

}

.mobile div.active span:nth-child(3) {

    transform: translate(-15px, -9px) rotate(45deg);

}

.mobile nav {

    display: block;

    position: fixed;

    bottom: 16px;

    right: 16px;

    height: 50px;

    width: 50px;

    border-radius: 50%;

    z-index: 9999990;

    transition-duration: .4s;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.mobile nav.open {

    background-color: rgba(0, 0, 0, 0.9);

    width: 100vw;

    height: 100vh;

    right: 0px;

    bottom: 0px;

    border-radius: 0;

}

.mobile nav ul {

    display: none;

}

.mobile nav ul.show {

    display: flex;

    flex-direction: column;

    list-style: none;

    margin: 0;

    padding: 0;

}

.mobile ul li {

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: transparent;

    width: 100%;

    opacity: 0;

    animation-name: fadein;

    animation-duration: 1s;

    animation-fill-mode: forwards;

}

.mobile ul li:not(:last-child) {

    margin-bottom: 22px;

}

.mobile ul li a {

    font-size: 24px;

    font-family: ‘Roboto Condensed’, sans-serif;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    text-decoration: none;

    color: #fff;

}

@keyframes fadein {

    0% {

        opacity: 0;

        

    }

    100% {

        opacity: 1;

    }

}

Гамбургер меню на CSS или JS? Часть 1

Вы здесь: Главная — JavaScript — jQuery — Гамбургер меню на CSS или JS? Часть 1

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

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

Активную часть этой задачи, а именно разворачивание и сворачивание пунктов гамбургер меню можно реализовать средствами JS с использованием библиотеки jQuery или на чистом CSS. Здесь сразу оговорюсь, что в CSS делается это «костыльным способом» на

checkbox-ах, позже я поясню что это.

Гамбургер меню на JS

1. Верстаем обычное верхнее меню навигации с одним параграфом контентной части сайта

Код в HTML:

<nav>
  <div>
  <!-- Меню гамбургер, при клике, развернутся пункты меню -->
   <div>Меню</div>
    <ul>
     <li><a href="#">Главная</a></li>
     <li><a href="#">Тарифы</a></li>
     <li><a href="#">Продукты</a></li>
     <li><a href="#">Услуги</a></li>
     <li><a href="#">Контакты</a></li>
    </ul>
   </div>

</nav>
<section>
  <div>
    <p>Основной контент сайта</p>
  </div>
</section>

Код в CSS:

2. Вставляем иконку гамбургер в меню навигации

На сайте iconfinder.com находим нужную иконку, меняем цвет на нужный (Edit Icon), скачиваем в формате SVG, открываем в браузере, копируем код из веб-инспектора.

Вставляем скопированный выше код вместо текста «Меню».

<div>Меню</div>

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

.menuBurger {
  display: none; /* иконка гамбургер скрыта */
}


3. Переходим к медиа-запросу

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

@media screen and (max-width: 530px) {
  .menu {
    display: none; /* пункты меню скрыты */
    background: #f1f2f4;
    position: absolute;
  }

  .menu li {
    float: none; /* пункты меню в столбцах */
  }

  .menuBurger {
    display: inline-block; /* иконка гамбургер видна */

  }
}

4. Развернуть гамбургер меню

Что нужно сделать, перед тем, как раскрыть гамбургер меню? Надо временно закомментировать в CSS коде медиа-запроса /* display: none; */ и горизонтальное меню превратить в вертикальное. Для этого отменим действие float-а, добавим к медиа-запросу следующий код.

.menu li {
    float: none;
  }


Результат на скриншоте

Раскомментируем обратно display: none; — скроем вертикальное меню. Теперь дело осталось за малым – создать событие, чтобы при клике по иконке, разворачивалось и сворачивалось вертикальное меню.

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

Продолжение следует..

• Создано 22.03.2018 12:06:00
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Гамбургер-меню для сайта — история популярности и альтернативы

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

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

История популярности трех волшебных линий

История адаптивного гамбургер-меню началась в 1981 году, когда дизайнер компании Xerox Норм Кокс создал иконку в виде гамбургера. Данное изображение использовалось в системе Xerox Star для обозначения списка. Однако настоящую популярность кнопка гамбургер-меню приобрела в эпоху смартфонов: благодаря ей удалось уместить сложную навигацию по десктопным приложениям на маленьком экране — она удачно скрывалась за тремя полосками, напоминающими три составляющие гамбургера (два слоя хлеба и один – мяса).

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

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

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

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

Вкладки (табы)

WealthsimpleLinkedIn / Google Photos

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

Вкладки + «Еще»

S-Trip

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

Постепенно сжимающееся меню

BBC

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

Навигация со скроллингом

Paytm Mobile App

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

Выпадающее меню

Amazon

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

Нижняя навигация

LinkedIn and Facebook App

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

Вертикальный текст

VR Sessions

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

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

По-прежнему предпочитаете гамбургер-меню?

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

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

А вы используете навигацию гамбургер-меню для сайта на десктопных компьютерах? Или добавляете ее только в мобильную версию?

МЕНЮ-ГАМБУРГЕР, коллекция из 10+ анимированных иконок

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

Меню Header Navigation

Одна из особенностей иконки — анимация выполнена на чистом CSS.

Демо

Скачать

Click me! Hamburger menu

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

Демо

Скачать

Atomic Hamburger Menu CSS

При наведении, ‘гамбургер’ превращается в анимированную иконку атома. Думаю, что такая реализация подходит для сайтов образовательной тематики.

Демо

Скачать

Hamburger Menu Elastic

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

Демо

Скачать

Animated Menu Icon

Анимирован не только сам переключатель, но и рамка.

Демо

Скачать

Simple Navbar Toggle To X (Vanilla JS)

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

Демо

Скачать

Drawn Hamburger Transition

Плавный переход иконки из одного состояния в другое.

Демо

Скачать

Animated Hamburger Menu

Анимация заключается в слиянии полос иконки и смены угла их наклона.

Демо

Скачать

SVG CSS3 Menu / Burger Button

Пожалуй, одна из самых интересных реализаций. Средняя полоса плавно переходит в круглую рамку, а две крайние в кнопку закрытия.

Демо

Скачать

Hamburger Animation

Menu «Hamburger» Icon Animations

Сразу два варианта реализации.

Демо

Скачать

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

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

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

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

 

 

Что такое адаптивный дизайн?

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

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

 

 

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

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

Гамбургер-меню

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

 

Как появилось гамбургер-меню?

Возникновение этого меню уходит корнями в середину 2000-х годов, когда гамбургер-меню нельзя было не появиться в связи с растущими потребностями UX-, UI веб-дизайнеров:

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

 

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

По результатам тестирований гамбургер-меню UX-специалисты обнаружили следующие проблемы:

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

 

A/B тестирование гамбургер-меню: пример от Beamly

Чтобы узнать насколько эффективно гамбургер-меню по сравнению с другими распространенными типами навигации, посмотрим пример веб-сайта «Beamly» (ранее Zeebox), который проводил A/B тестирование пользовательского интерфейса в своих проектах:

A: веб-сайт с боковой панелью навигации (гамбургер-меню).
B: веб-сайт с верхней панелью навигации (видимая навигация).

• Изучив результаты A/B тестирования на этом сайте, эксперты пришли к выводу: замена верхней навигационной панели боковой панелью с изображением значка гамбургер-меню помогла посетителям получить только половину пользовательского опыта;
• Еженедельные результаты взаимодействия были значительно выше для верхней навигационной панели в сравнении с боковой панелью.

 

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

 

 

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

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

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

 

Альтернативы гамбургер-меню: вне скрытой навигации

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

 

 

Нижнее меню

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

 

 

Экранный переключатель

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

 

 

Вертикальное меню

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

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

 

 

Что стоит учитывать при выборе меню для адаптивного сайта?

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

• Какой вы видите структуру своего сайта?
• Где основная область внимания на сайте? Это контент или изображения?
• Кто ваша целевая аудитория?
• Соответствует ли навигация целям пользователя при посещении сайта?

 

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

 

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

 

 

---

---

5 альтернатив меню-«гамбургеру» на смартфонах и кейсы их применения Материал редакции

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

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

1. Вкладки

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

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

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

2. Вкладки с вариантом «Другое»

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

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

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

3. Разворачивающееся меню

Вариация вкладок с разделом «Другое» — меню, которое адаптируется под размер экрана и показывает различное количество вкладок на каждом разрешении. Те вкладки, которые не помещаются на экране, оказываются в разделе «Другое».

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

4. Прокручивающееся меню

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

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

При этом дизайнерам следует убедиться, что пользователям ясно, как применять прокрутку — и установить визуальные подсказки. Например, применить эффект «выцветания» для последнего элемента.

5. Выпадающее меню

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

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

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

Меню | БУРГЕР КИНГ®

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

https://www.delivery-club.ru/BurgerKing

Извините, мобильная версия сайта доставки временно недоступна.

Доставка установлено в приложении Бургер Кинг.

Скачать приложение

ВЫБЕРИ СВОЙ ГОРОД

…АдлерАзовАнапаАнгарскАрмавирАрхангельскАсбестАстраханьБалаковоБалашихаБалашовБарнаулБатайскБелгородБелоярскийБерезовскийБийскБрянскБузулукВидноеВладивостокВладимирВолгоградВолжскийВологдаВоронежВоскресенскГеленджикГорно-АлтайскГорячий ключда БорисовичиДедовскДзержинскДмитровДолгопрудныйДомодедовоДубнаЕгорьевскЕкатеринбургЖелезногорскЖелезнодорожныйЖуковскийЗеленоградЗеленодольскЗлатоустИвановоИжевскИркутскЙошкар-ОлаКазаньКалугаКаменск-УральскийКемеровоКингисеппКировКлинКлинцыКовровКоломнаКолпиноКопейскКоролевКостромаКотельникиКрасногорскКраснодарКраснознаменскКрасноярскКудровоКурганКурскКурскаяЛипецкЛыткариноЛюберцыМагнитогорскМиассМоскваМосковскийМурманскМытищиНабережный ЧелныНаро-ФоминскНемчиновкаНефтекамскНижневартовскНижнекамскНижний НовгородНижний ТагилНовокузнецкНовомосковскНовороссийскНовосибирскНовый УренгойНогинскНоябрьскНяганьОбнинскОдинцовоОктябрьскийОмскОрелОренбургОрехово-ЗуевоОрскПензаПермьПетрозаводскПодольскПолевскойпос Джубгапос Дубовоепос НагорныйПротвиноПушкиноПятиг орскРаменскоеРеутовРжавкиРосты-на-ДонуРыбинскРязаньс ФединоСамараСанкт-ПетербургСаранскСаратовСелятиноСергие ПосадСеровСерпуховСестрорецкСмоленскСолнечногорскСоснового БорСочиСтавропольСтарых ОсколСтерлитамакСтрежевойСтупиноСургутСыктывкарТаганрогТамбовТверьТобольскТольяттиТомскТуапсеТулаТюменьУльяновскУссурийскУфаУхтаФединоФрязиноХанты-МансийскХимкиЧебоксарыЧелябинскЧереповецЧеркесскЧеховЩелковоЩербинкаЭлектростальЭнгельсЮгорскЯрославль…

Оплата доступна только онлайн при помощи карты

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

ОК
Нет, выбрать из списка .

БУРГЕР КИНГ®

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

https://www.delivery-club.ru/BurgerKing

Извините, мобильная версия сайта доставки временно недоступна.

Доставка установлено в приложении Бургер Кинг.

Скачать приложение

ВЫБЕРИ СВОЙ ГОРОД

…АдлерАзовАнапаАнгарскАрмавирАрхангельскАсбестАстраханьБалаковоБалашихаБалашовБарнаулБатайскБелгородБелоярскийБерезовскийБийскБрянскБузулукВидноеВладивостокВладимирВолгоградВолжскийВологдаВоронежВоскресенскГеленджикГорно-АлтайскГорячий ключда БорисовичиДедовскДзержинскДмитровДолгопрудныйДомодедовоДубнаЕгорьевскЕкатеринбургЖелезногорскЖелезнодорожныйЖуковскийЗеленоградЗеленодольскЗлатоустИвановоИжевскИркутскЙошкар-ОлаКазаньКалугаКаменск-УральскийКемеровоКингисеппКировКлинКлинцыКовровКоломнаКолпиноКопейскКоролевКостромаКотельникиКрасногорскКраснодарКраснознаменскКрасноярскКудровоКурганКурскКурскаяЛипецкЛыткариноЛюберцыМагнитогорскМиассМоскваМосковскийМурманскМытищиНабережный ЧелныНаро-ФоминскНемчиновкаНефтекамскНижневартовскНижнекамскНижний НовгородНижний ТагилНовокузнецкНовомосковскНовороссийскНовосибирскНовый УренгойНогинскНоябрьскНяганьОбнинскОдинцовоОктябрьскийОмскОрелОренбургОрехово-ЗуевоОрскПензаПермьПетрозаводскПодольскПолевскойпос Джубгапос Дубовоепос НагорныйПротвиноПушкиноПятиг орскРаменскоеРеутовРжавкиРосты-на-ДонуРыбинскРязаньс ФединоСамараСанкт-ПетербургСаранскСаратовСелятиноСергие ПосадСеровСерпуховСестрорецкСмоленскСолнечногорскСоснового БорСочиСтавропольСтарых ОсколСтерлитамакСтрежевойСтупиноСургутСыктывкарТаганрогТамбовТверьТобольскТольяттиТомскТуапсеТулаТюменьУльяновскУссурийскУфаУхтаФединоФрязиноХанты-МансийскХимкиЧебоксарыЧелябинскЧереповецЧеркесскЧеховЩелковоЩербинкаЭлектростальЭнгельсЮгорскЯрославль…

Оплата доступна только онлайн при помощи карты

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

ОК
Нет, выбрать из списка .