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

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

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

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

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

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

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

Второе меню (появляется при скролле)

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

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

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

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

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

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

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

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

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

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

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

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

Как работает:
1) Напишите название вкладок в меню «Контент» блока МЕ602/603.
2) Укажите ID блоков, которые должны быть видны при клике на эту вкладку (через запятую и без пробела).
3) ID блока можно посмотреть в меню «Настройки» каждого блока, в самом низу.
Посмотреть страницу с меню в браузере
Мы рассмотрели основные типы меню. Если вы придумали какой-то еще способ и хотели бы им поделиться, присылайте ссылку на ваш сайт на team@tilda.cc с пометкой «Дизайн меню». Спасибо.

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