Макет и эффекты
Тонко настройте расположение панели навигации, закрепите её вверху при прокрутке и добавьте со вкусом подобранные анимации — всё из раздела «Макет» в Menu Builder.
Отступы и выравнивание
В разделе Layout вы можете управлять расположением пунктов меню:
- Выравнивание — где располагаются пункты в панели: в начале, по центру, в конце, с равными промежутками (space-between) или равномерно (space-evenly).
- Промежуток — расстояние между пунктами меню.
- Горизонтальный / вертикальный внутренний отступ — внутренние поля панели навигации.
- Радиус скругления контейнера — скругление углов всей панели.
- Сместить последний пункт — прижать последний пункт меню к противоположному краю (удобно для призыва к действию «Контакты» или «Войти»).
Закреплённая навигация
Включите Sticky, чтобы панель навигации оставалась зафиксированной вверху экрана, пока посетитель прокручивает страницу вниз.
| Параметр | Описание |
|---|---|
| Сжатие при прокрутке | Панель становится компактнее после прокрутки страницы. |
| Тень | Добавляет тень под панелью, когда она закреплена. |
| Зеркальный макет | Использует другое выравнивание в закреплённом состоянии, отличное от обычного. |
| Переход | Насколько плавно панель анимируется между состояниями (в секундах). |
| Z-index | Порядок наложения — на случай, если панель должна располагаться над другими фиксированными элементами. |
Индикатор прогресса прокрутки
Тонкая полоса, заполняющаяся по мере прокрутки страницы посетителем, — популярный штрих для длинных статей и документации.
- Включите индикатор прогресса прокрутки в разделе Layout.
- Выберите его цвет, высоту (1–10 px) и положение (сверху или снизу панели навигации).
Анимация появления
Анимируйте меню при первой загрузке страницы. Выберите из вариантов Проявление, Выезд вниз/вверх/влево/вправо, Приближение или Flip X — либо оставьте None.
Также можно настроить длительность, задержку перед стартом и смещение, чтобы пункты появлялись друг за другом.
Анимация ссылки при наведении
Добавьте микровзаимодействие при наведении посетителя на ссылку меню. В числе вариантов: Подъём, Масштаб, Пульсация, Отскок, Тряска, Свечение и Анимированное подчёркивание.
Индикатор выпадающего меню
У пунктов с подменю может отображаться небольшой индикатор. Выберите форму — треугольник, шеврон, точка или нет — и при желании задайте его цвет, размер и поворот при открытии выпадающего меню.
Сама панель выпадающего подменю полностью настраивается в разделе Style → Submenu Dropdown: радиус скругления, горизонтальный и вертикальный внутренний отступ, размер шрифта, насыщенность шрифта и минимальная ширина. Цвет при наведении вычисляется адаптивно от фона подменю, поэтому он остаётся заметным как на светлых, так и на тёмных темах.
Scroll Spy
Scroll Spy автоматически подсвечивает ссылку навигации, соответствующую разделу, который в данный момент виден в области просмотра, пока посетитель прокручивает длинную страницу, — распространённый приём на сайтах документации, лендингах и одностраничниках.
- Включите Scroll Spy в разделе Layout → Layout.
- Задайте смещение срабатывания (по умолчанию 80 px) — высота закреплённой панели добавляется к нему автоматически во время выполнения.
- При желании включите плавную прокрутку с обновлением хеша через History API и объявлениями в ARIA-областях live для программ чтения с экрана.
Последний раздел страницы всегда становится активным при прокрутке в самый низ. Ссылки на активный раздел получают визуальное оформление, заданное в разделе Colors → Active Link.
Все анимации учитывают настройку посетителя prefers-reduced-motion — см. страницу Доступность.