Сделать меню с нуля или воспользоваться готовыми вариантами
Меню или шапка - это, как правило, отдельная небольшая область вверху сайта с кнопками для навигации по странице или страницами сайта, логотипом компании и основными контактными данными.
Создать меню можно используя шаблонную секцию изменив её под свои потребности или же создав полностью с нуля. Чтобы настроить быстрое перемещение по странице перейдите к инструкции "Перемещение внутри одной страницы".
Настройка шаблонной секции шапка
Выбрать подходящую шапку можно в категории секций ”Шапка”, ”Первый экран” или в шаблонах страниц при их создании.
- Если вы хотите перенести меню или другие компоненты из шаблонной секции - добавьте эту секцию как новую, а затем перетащите с неё компоненты в нужную секцию;
- Если вам нужно перенести что-то из одной страницы на другую перейдите к этой инструкции.
Перенесли вы секцию или создали её с нуля - не важно, все эти элементы можно редактировать, по этому сразу покажем, как создается меню с нуля.
Создание шапки с нуля
Базовые элементы любого меню - это компоненты Колонки, Кнопки и Текст.
В качестве дополнительных обычно используются Кнопка-картинка, Меню, Меню-гамбургер оно же Мобильное меню.
1. Мы хотим закрепить меню при прокрутке страницы, по этому создадим отдельную секцию и настроим меню там. Закрепить при прокрутке можно только секцию целиком в настройках "Стиль" - "Параметры" - "Фиксация секции при прокрутке".
- Настройка фиксации секции при прокрутке доступна для всех секций на странице, но здесь нужно учитывать высоту секции, если она будет занимать половину высоты экрана или более, то посетителю страницы будет неудобно просматривать весь остальной контент страницы, по этому шапку следует поместить в отдельную секцию.
- Параметр ”Непрозрачность секции при фиксации” задает уровень прозрачности секции и компонентов в ней, когда зафиксированная секция начинает перекрывать собой другую. Значение 0% означает - полная прозрачность, 100% - полная непрозрачность. Самый оптимальный вариант от 85% до 98%. Чем более яркая цветовая палитра у данной секции и её компонентов, тем ниже можно установить непрозрачность.
- Когда нужно сделать саму секцию с меню прозрачной, но чтобы кнопки в ней оставались непрозрачными или слегка прозрачными - можно загрузить в фон секции прозрачную картинку размером 1x1px в формате png.
- Установив прозрачную png картинку вы сможете регулировать уровень её прозрачности используя настройку яркости. Если установить яркость на уровень "50%" картинка будет абсолютно прозрачной. Проверь как это будет выглядеть по результатам настройки можно выполнив предпросмотр страницы.
2. Чтобы при открытии страницы на ПК кнопки в меню всегда отображались, а на мобильных появился крестик для показа или скрытия кнопок в меню добавим компонент Меню-гамбургер и поместим в него другие компоненты с панели компонентов.
Компонент Меню, схож с тем, как выглядело бы меню сделанное при помощи компонентов Колонки и Кнопки, но его особенность в том, что вид каждой кнопки можно настроить за один раз, вместо того, чтобы настраивать вид каждой кнопки в колонке по отдельности, однако остается возможность указать отдельные настройки для любой кнопки в компоненте Меню.
3. Вот и все, наше меню готово. Просмотреть его в работе можно на этой странице
