Дизайн меню сайта и применение на практике

Виды меню, инструкции по настройке и рекомендации по применению.
В статье мы рассмотрели 10 видов меню, по каждому написали инструкцию по настройке и дали рекомендации в каких случаях уместно его использование.
Материал посвящен дизайну меню — то, как меню работает и как оно выглядит. Если вам нужно разобраться как вообще создать меню сайта, добавить меню сразу на все страницы или сделать навигацию внутри страницы, пожалуйста прочитайте статью:
Меню — набор ссылок на другие страницы сайта, либо на конкретные разделы одной страницы. Каждая ссылка — пункт меню. Меню необходимо для навигации: перехода между страницами или между разделами одной страницы.
Общие рекомендации
>
Меню должно помогать посетителю быстро найти необходимую информацию.
>
Меню должно быть лаконичным.
>
Пунктов меню не должно быть слишком много.
>
Оптимальное количество пунктов меню — 5 или меньше.
>
Названия пунктов меню лучше делать из одного слова.
>
Хорошо, если слова будут не слишком длинные.
>
Меню не должно быть тяжеловесным и отнимать внимание от контента.
Примеры хороших меню
виды меню
Прозрачное статичное меню поверх обложки
Как себя ведет:
Всегда находится вверху страницы, не отвлекает от содержания, при необходимости пользователь может легко к нему обратиться, так как оно расположено в привычном месте.
Как сделать:

Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:

Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%
Посмотреть страницу с меню в браузере
виды меню
Фиксированное меню
Как себя ведет:
Меню, которое всегда находится в поле зрения пользователя и он может обратиться к нему на любом месте на странице. У такого меню чаще всего прозрачный фон в начале страницы (на обложке), который меняется на непрозрачный во время скрола.
Как сделать:

Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:

Основные настройки → Поведение позиционирования → Фиксация при скролле
Фон меню → Цвет фона меню — на выбор
Фон меню → Непрозрачность фона меню — 0%
Фон меню → Непрозрачность фона меню после начала скролла — 80%
Посмотреть страницу с меню в браузере
виды меню
Два разных меню: одно вверху страницы, другое появляется при скролле
Как себя ведет:
Вариант, похожий на предыдущий, только при скролле появляется меню с другим содержимым. Например, в начале страницы меню содержит логотип, пункты (ссылки на разделы сайта) и ссылки на социальные сети. А когда пользователь начинает пролистывать страницу, появляется и остается в поле зрения меню с логотипом, призывом к действию и кнопкой обратного звонка.
Как сделать:

Добавить на страницу два блока ME301. И задать им следующие параметры:

Первое меню (остается на обложке)
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%

Второе меню (появляется при скролле)
Основные настройки > Поведение позиционирования — Фиксация при скролле
Основные настройки > Появление меню при прокрутке через N пикселей — 600px
Фон меню > Цвет фона меню — на выбор
Фон меню > Непрозрачность фона меню — 70%
Посмотреть страницу с меню в браузере
виды меню
Меню «гамбургер»
Как себя ведет:
Меню в виде трех полосок в углу экрана, при клике на которое раскрывается полная версия.

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

Добавить на страницу блок ME401/402/403/404/405, настроить поведение позиционирования, цвет иконки меню и цвет фона самого меню и цвет фона для пунктов меню. В нашем примере параметры будут следующими:

Основные настройки → Поведение позиционирования — Фиксация при скролле
Иконка меню → Цвет — черный
Фон меню → Цвет фона закрытого меню — прозрачный
Фон меню→ Цвет фона открытого меню — белый
Посмотреть страницу с меню в браузере
виды меню
Многоуровневое меню
Как себя ведет:
При клике на пункт меню появляется выпадающий список вложенных пунктов.

Для чего используется:
В объемных сайтах со сложной структурой.
Как сделать:


Добавить пункты подменю у основного блока или использовать сочетание меню ME301(или любого другого с пунктами меню) и ME601.
Пункты подменю основного блока
Добавить на страницу любой блок меню, который содержит пункты меню.

Перейти в Контент блока → Список пунктов меню → нажать «Добавить пункты второго уровня» — напротив пунктов меню появятся иконки в виде символа плюс.

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

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

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

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

Добавить на страницу блок ME301, настроить меню, как в примерах выше и добавить блок ME601 (Меню: второй уровень).

Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.

Как это работает:
1) В блоке ME601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.

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

Примечание: "#submenu:more" может быть любым словом, например: #submenu:portfolio или #submenu:aboutus
Посмотреть страницу с меню в браузере
виды меню
Вкладки (табы)
Как себя ведет:
Каждой ссылке соответвует контент, который показывается, когда активна (пользователь кликнул) та или иная вкладка.

Для чего используется:
Для демонстрации однотипного контента, разбитого по категориям, например, работ портфолио.
Как сделать:

Добавить на страницу блок ME602/ME603 Блок позволяет создавать на странице вкладки и показывать разный контент по клику на соответствующую вкладку в рамках одной страницы. Затем ниже последовательно расположить все блоки, которые будут меняться при клике на вкладку.

Как работает:
1) Напишите название вкладок в меню «Контент» блока ME602/ME603.
2) Укажите ID блоков, которые должны быть видны при клике на эту вкладку (через запятую и без пробела).
3) ID блока можно посмотреть в меню «Настройки» каждого блока, в самом низу.
Посмотреть страницу с меню в браузере
виды меню
Меню с навигацией точками
Как себя ведет:
При клике на точку в меню осуществляется переход к определенному блоку на странице

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

Добавить на страницу блок ME604 из категории Меню. С помощью этого блока можно сделать вертикальную навигацию внутри страницы между разделами.

Примечание: данный блок предназначен только для больших экранов (от 960px).

Как работает:

1) Перед каждым разделом добавьте блок с якорной ссылкой (находится в категории "Другое"). Их удобно называть по смыслу, например: about, team, gallery
2) В списке пунктов меню для каждого из разделов введите названия и якорные ссылки с символом "#". Пример якорной ссылки: #about
Посмотреть страницу с меню в браузере
виды меню
Хлебные крошки
Как себя ведет:
При клике на пункт меню осуществляется переход к определенному разделу или внутренней странице.

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

Добавить на страницу блок ME605 из категории Меню. В контенте блока в поле Текст 1, Текст 2, Текст 3 указать навигационную цепочку страниц сайта, начиная от главной страницы и заканчивая текущей страницей, на которой находится пользователь. Ниже в поле Ссылка 1, Ссылка 2, Ссылка 3 указать ссылку на страницу для пункта меню.

Как работает:
1) Установите адрес для страницы в Настройках страницы > Главное
2) Укажите ссылку на отдельную страницу для пункта меню в поле Ссылка
Посмотреть страницу с меню в браузере
Как себя ведет:
Развернутое боковое меню, которое содержит разделы и подразделы. Меню имеет фиксированное позиционирование, что позволяет обратиться к нему в любом месте на странице.

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

Добавить на страницу блок ME901, настроить стили отображения меню с помощью настроек блока.

Блок ME901 позволяет добавить подразделы к пунктам основного меню. Указывать ссылки на подразделы необходимо в контенте блока > список пунктов меню.

В качестве ссылки нужно указать либо полный адрес страницы включая http:// либо относительный адрес - только название страницы (например /page7890.html или /about).
Чтобы сделать навигацию внутри страницы, вы можете использовать якорные ссылки (например #contacts). Чтобы добавить якорь на страницу используйте блок Другое > Якорная ссылка.

Меню остаётся раскрытым, если ширина экрана больше 1500px.
Посмотреть страницу с меню в браузере
виды меню
Меню с корзиной, поиском и избранным
Как себя ведет:
Отображает товары в корзине, отложенные в избранное и поиск по сайту в меню рядом с разделом навигации.


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

Добавьте блок меню ME401 на страницу → «Контент → Корзина, поиск и избранное» → поставьте галочки, чтобы отобразить нужные иконки в меню.

Поставьте галочку «Не показывать отдельные кнопки виджетов», чтобы иконки отображались только в меню.
Затем добавьте на страницу блоки ST100 для корзины, T985 для поиска и ST110 для избранного и опубликуйте страницу.
Готово.

Работает для всех блоков меню с номерами ME4XX.
Посмотреть страницу с меню в браузере
Варианты отображения:

Если требуется показывать в меню и иконки и кнопку виджета Избранное, то снимите галочку «Не показывать отдельные кнопки виджетов» в Контенте блока ME401.
Отключите иконку виджета только у корзины ST100 и поиска T985 — в Настройках обоих блоков во вкладке «Дополнительные настройки» поставьте галочку в чекбоксе «Не показывать кнопку открытия виджета». Опубликуйте страницу.
Готово! Три иконки показываются в меню и есть отдельный виджет для избранного. Аналогичным способом можно настроить видимость для виджета корзины или поиска.
Посмотреть страницу с меню в браузере
виды меню
Сделать своё меню в Zero Block
Вы можете сделать собственное меню в Zero Block, расставив элементы по своему усмотрению, а потом зафиксировать этот блок.

Чтобы настроить фиксацию, перейдите к редактированию Zero Block → Settings → Position and Overflow и поставить значение Fixed, чтобы зафиксировать блок.
Блок можно зафиксировать сверху или снизу страницы, а также настроить появление спустя Х пикселей (Appear Offset). В этом случае доступна настройка одного из двух вариантов анимации появления — Fade in или Slide up/down. Это может пригодиться, например, если вы хотите, чтобы шапка сайта появлялась не сразу, а через несколько скроллов.
Мы рассмотрели основные типы меню. Если вы придумали какой-то еще способ и хотели бы им поделиться, присылайте ссылку на ваш сайт на team@tilda.cc с пометкой «Дизайн меню». Спасибо.

Удачных экспериментов!
Сайт, о котором вы мечтали, начинается прямо здесь
Made on
Tilda