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

Мегаподменю на всю ширину панели с пятью колонками разного устройства — шпаргалка по типам колонок.

Структура пунктов#

• МегаменюстраницаПодменю → Тип подменю: Мега-подменю · Подменю → Позиция: На всю ширину
  • ОбычныеОбщее → Отображение: Заголовок · Общее → Отключить ссылку: да · Макет → Ширина колонок: 1/6
    • Футбол, Хоккей, Баскетбол, Волейбол, Теннисссылки
  • С описаниямиОбщее → Отображение: Заголовок · Общее → Отключить ссылку: да · Макет → Ширина колонок: 1/4
    • Мастер и Маргарита…ссылкиполе «Описание»: автор
  • Картинки и описанияОбщее → Отображение: Заголовок · Общее → Отключить ссылку: да · Макет → Ширина колонок: 1/4
    • НЛО, Ракета, КосмонавтссылкиИзображение → Картинка: из медиатеки · Изображение → Размер: Thumbnail · Изображение → Размеры: Пользовательский 56×56 · Макет → Макет: Изображение слева · описание
  • ИконкиОбщее → Отображение: Заголовок · Общее → Отключить ссылку: да · Макет → Ширина колонок: 1/6
    • Компьютер, Ноутбук…ссылкиИконка → Иконка: fa-desktop…
  • Свой контентОбщее → Отображение: Заголовок · Общее → Отключить ссылку: да · Макет → Ширина колонок: 1/6
    • [Свой контент]Пользовательский контентHTML: абзац и кнопка «Подробнее» · ширина: На всю ширину

Приёмы#

• Разная ширина колонок: 1/6 + 1/4 + 1/4 + 1/6 + 1/6 = 1. Сумма долей в ряду не должна превышать единицу — иначе колонка перенесётся на новую строку.
• Миниатюры слева: макет «Изображение слева» и маленький размер картинки (56×56). Без явного размера картинка займёт всю ширину колонки.
• Иконки выбираются на панели «Иконка», макет по умолчанию подставит «Иконка слева».
• HTML в колонке: внутрь заголовка вложен расширенный пункт «Пользовательский контент» шириной «На всю ширину».

HTML кнопки из примера:

<p style="margin:0 0 .6em">Любой HTML и шорткоды прямо в подменю.</p>
<a href="#" style="display:inline-block;padding:.45em .9em;border-radius:8px;background:#4f46e5;color:#fff;text-decoration:none">Подробнее</a>