Как добавить мегаменю на сайт

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

Пример мегаменю:

Шаг 1. Добавьте кнопку для открытия мегаменю

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

Далее выберите одно из действий (рисунок 1):

• «Открыть / закрыть мегаменю» — выберите, если при прокрутке сайта мегаменю должно оставаться на исходном месте в верхней части сайта.
• «Открыть / закрыть мегаменю и зафиксировать» — выберите, если при прокрутке сайта меню должно закрепляться сверху (актуально для закрепленной при прокрутке шапки).
  • В таком случае ниже у вас появится поле «Отступ от верхнего края для фиксированного мегаменю» — в него напишите расстояние от верхней части экрана до мегаменю (для варианта без фиксации это расстояние будет настраиваться на 3 шаге).

Если нужно открывать мегаменю и в закрепленной при прокрутке шапке, то рекомендуем сделать две шапки:

1. Стандартная, в которой будет выбрано «Открыть / закрыть мегаменю».
2. Закрепленная, в которой будет выбрано «Открыть / закрыть мегаменю и зафиксировать» и настроен «Отступ от верхнего края для фиксированного мегаменю».

Шаг 2. Создайте блок «Мегаменю»

Нажмите на название страницы (в нашем случае — «Главная страница») и выберите вкладку «Блоки» (рисунок 2).

Напротив заголовка «Мегаменю» нажмите на плюсик.

Далее в поле напишите любое название (например «Основное мегаменю») и нажмите кнопку «Создать».

Далее нажмите в списке на созданное мегаменю (рисунок 3):

Перед вами появится пустое полотно — нажмите на кнопку создания первой группы (рисунок 4), а затем добавьте в слои любые элементы — надписи, меню, картинки и т. д.

Шаг 3. Добавьте мегаменю в структуру страниц

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

Если у вас несколько структур страниц, то мегаменю нужно добавлять в каждую из них отдельно.

Перейдите в настройку структуры (рисунок 5):

Нажмите на кнопку плюса и в слои перетащите «Структурный элемент» (рисунок 6):

Нажмите на добавленный структурный элемент в слоях, и выберите следующее свойство, чтобы мегаменю было на всю ширину сайта (рисунок 7):

Далее перейдите в основные настройки и выберите свойства (рисунок 8):

• «Структурный элемент» — выберите название созданного вами мегаменю.
• «Позиция мегаменю по вертикали» — отвечает за то, какое расстояние будет между верхней частью сайта и мегаменю.
  • Это свойство работает, только если в настройках кнопки из шага 1 в действиях выбрано «Открыть / закрыть мегаменю», иначе отступ нужно настраивать в настройках той кнопки (шаг 1).

Шаг 4. Убедитесь, что все работает

Перейдите на сайт и нажмите на кнопку с меню — оно должно открываться корректно (рисунок 9).

Уточнения

1. При желании вы можете настроить любую ширину мегаменю — она не обязательно должна совпадать с шириной страницы.