Работаем с меню - (AB: Вертикальный выпадающий список с иконками)

12/06/2018
автор alexbranding team

Рассмотрим список функциональных возможностей, которые предлагает нам тип меню (AB: Вертикальный выпадающий список с иконками):

При нажатии на кнопку "Каталог товаров", появляется блок меню.

  1. Преемственность стилей для заголовков дает понять где основные уровни каталога.
  2. Краткое описание для основных разделов каталога (для пунктов меню первого уровня).
  3. Возможность загрузить иконку для первого уровня пунктов меню (максимальный размер иконок 32 x 32px / для HiDPI 64 x 64px). Если вы не используете краткое описание для пунктов меню первого уровня то максимальный размер иконки будет (24 x 24px / для HiDPI 48 x 48px).
  4. Возможность помечать лейблами, важные пункты меню (акция, новое, тотальная распродажа и др. по желанию), можно управлять цветом лейбла.
  5. Возможность загрузить иконку для второго уровня пунктов меню (максимальная ширина иконок 100px / для HiDPI 200px).
  6. Если у вас много элементов подуровней каталога, то можно задать отсечение для равномерности заполнения. При наведении на ссылку "Еще", раскроется полный список пунктов меню.
  7. Возможность загрузить пользовательский контент (баннеры, любой html контент) в выпадающую часть меню (управление на уровне родительского пункта меню).

— Режим 3-х уровневого меню (выпадающим списком)

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

  1. Первый уровень меню.
  2. Возможность загрузить иконку для первого уровня пунктов меню (размеры картинки подгоняйте по вашей необходимости, большой размер картинки будет ограничен размерами секции второго уровня).
  3. Второй уровень меню. Пункты меню выстраиваются вертикально их можно помечать лейблами.
  4. Третий уровень меню. Заголовок для активного пункта меню второго уровня.
  5. Пункты меню третьего уровня, распределяются на две колонки для возможности равномерного распределения большого количества ссылок.
  6. Возможность выводить пользовательский контент (баннеры, любой html контент), загружается для пункта меню второго уровня.

Управление блоком

Блок с данным типом меню уже создан и включен в макетах на странице (По умолчанию). Рассмотрим параметры блока (Каталог товаров).

  1. Шаблон для этого блока должен быть выбран (AB: Вертикальный выпадающий список с иконками).
  2. Элементы второго уровня - ограничивает максимальное количество выводимых пунктов меню второго уровня.
  3. Показывать иконки для пунктов меню второго уровня - разрешает вывод иконок для пунктов меню второго уровня. Эта опция не работает если используется (режим 3-х уровневого меню выпадающим списком).
  4. Элементы третьего уровня - ограничивает максимальное количество выводимых пунктов меню третьего уровня.
  5. Ограничивает максимальное количество выводимых пунктов меню третьего уровня для 2-x уровневого типа меню. Если указанное значение меньше номинального количества элементов третьего уровня то выводится ссылка "Еще" при наведении на которую происходит раскрытие полного списка пунктов меню.
  6. Ограничивает максимальное количество выводимых пунктов меню для каждой колонки в (режиме 3-х уровневого меню выпадающим списком).
  7. Включает Ajax-загрузку для второго (и т.д.) уровня меню. Полезно если у вас очень большая структура в меню и вам необходимо облегчить загрузку страниц.
  8. Оболочка "Выпадающий по клику список", создает механику раскрытия меню при нажатии на кнопку "Каталог товаров".
  9. Пользовательский класс "top-menu", имеет важное значение для корректного оформления меню и его адаптивности.

Создание блока (если он был случайно удален):

В макетах (Дизайн > Макеты > По умолчанию) добавьте в эту же секцию [+] новый блок > Создать новый блок (Меню), выберите шаблон (AB: Вертикальный выпадающий список с иконками) и сохраните. Откройте настройки вновь созданного блока и выберите оболочку (Выпадающий по клику список), в поле (Пользовательский CSS-класс) добавьте (top-menu), на скрине выше указаны красными рамками обязательные настройки для данного блока. Отредактируйте настройки вывода меню под ваши нужды и перейдите во вкладку (Контент), выберите ваше "Меню" для вывода в данном блоке.

Редактирование элементов меню

Перейдем в Дизайн > Меню > Главное меню и произведем модификацию пункта меню на примере демо элемента - "Электроника". Чтобы активировать новый функционал, включите чекбокс (AB: Активировать расширенное меню с иконкой) и сохраните. После повторного открытия настроек пункта меню "Электроника" у вас появится новая вкладка (AB: Расширенные настройки меню).

Рассмотрим настройки нового функционала во вкладке (AB: Расширенные настройки меню). Цветами выделены зависимые элементы.

  1. Возможность загрузить иконку для первого уровня пунктов меню (максимальный размер иконок 32 x 32px / для HiDPI 64 x 64px). Если вы не используете краткое описание для пунктов меню первого уровня то максимальный размер иконки будет (24 x 24px / для HiDPI 48 x 48px). Размер не регулируется опционально и подогнан для корректного отображения, которое не ломает высоту элементов меню первого уровня. Для второго уровня меню вы можете загрузить иконку (максимальная ширина иконки, 100px / для HiDPI 200px). Размер не регулируется опционально и подогнан для корректного отображения, которое не ломает ширину колонок второго уровня.
  2. Краткое описание для основных разделов каталога (только для пунктов первого уровня).
  3. Активирует режим 3-х уровневого меню выпадающим списком (только для пунктов первого уровня).
  4. В поле (Текст) вы можете ввести любой HTML контент для вывода в теле выпадающего меню, это может быть графический баннер или ссылки брендов, все зависит от вашей задачи и знания HTML. Чтобы загрузить баннер заранее подготовьте его в Adobe Photoshop (оптимизируйте размер) и загрузите его c помощью элемента редактора (Изображения).
  5. Опция (Положение текста) регулирует положение вашего баннера (HTML контента) относительно правого края или нижней части меню (только для пунктов первого уровня):
    • Положение (Внизу) - выводит контент не используя добавочную колонку и устанавливает выравнивание контента по нижнему краю меню. Рекомендуется для вывода фонового изображения для элемента меню или для вывода списка брендов (собственный html).
    • Положение (Справа вверху) - выводит контент в крайнем правом положении, в добавочной колонке с выравниванием по верхнему краю меню. Рекомендуется для вывода рекламных баннеров.
    • Положение (Справа снизу) - выводит контент в крайнем правом положении, в добавочной колонке с выравниванием по нижнему краю меню. Рекомендуется для вывода рекламных баннеров.
  6. Поле (Маркер) позволяет вывести текстовый маркер (например, Новинка или Хит), в пунктах (Цвет маркера) и (Фон маркера) регулируется его цветовое оформление соответственно.

Примеры для оформления баннеров, как в демо:

Пункт меню - Одежда

<div style="width:100%;text-align:center;">
    <img src="http://youpi.shop/images/companies/1/235243635473676858.jpg" alt="" style="margin:20px 0;">
    <a href="https://youpi.shop/odezhda/obuv/adizero-rush-shoes/" title="">
    <div style="font-size:18px;font-weight:bold;">Скидки до 50%</div>
    </a>
    по промокоду на одежду<br>
    <a class="ty-btn ty-btn__secondary" title="" style="margin:20px 0;">Просмотреть</a>
</div>

Комментарии

Сообщения не найдены

Новое сообщение