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

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

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

Как сделать:

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

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

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

Как сделать:

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

Основные настройки → Поведение позиционирования → Фиксация при скролле
Фон меню → Цвет фона меню — на выбор
Фон меню → Непрозрачность фона меню — 0%
Фон меню → Непрозрачность фона меню после начала скролла — 80%

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

Как сделать:

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

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

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

Как себя ведет:
Меню в виде трех полосок в углу экрана, при клике на которое раскрывается полная версия.

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

Как сделать:

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

Основные настройки → Поведение позиционирования — Фиксация при скролле
Иконка меню → Цвет — черный
Фон меню → Цвет фона закрытого меню — прозрачный
Фон меню→ Цвет фона открытого меню — белый

Как себя ведет:
При клике на пункт меню появляется выпадающий список вложенных пунктов.

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

Как сделать:


Добавить пункты подменю у основного блока или использовать сочетание меню ME301(или любого другого с пунктами меню) и 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 → Settings → Position and Overflow и поставить значение Fixed, чтобы зафиксировать блок.

Блок можно зафиксировать сверху или снизу страницы, а также настроить появление спустя Х пикселей (Appear Offset). В этом случае доступна настройка одного из двух вариантов анимации появления — Fade in или Slide up/down. Это может пригодиться, например, если вы хотите, чтобы шапка сайта появлялась не сразу, а через несколько скроллов.

Мы рассмотрели основные типы меню. Если вы придумали какой-то еще способ и хотели бы им поделиться, присылайте ссылку на ваш сайт на team@tilda.cc с пометкой «Дизайн меню». Спасибо.

Удачных экспериментов!