Настройка нового типа меню появившегося в версии UniTheme 1.4 от 13.03.2017

18/03/2017
автор alexbranding team

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

  • Возможность загрузить иконку главному пункту меню (первому уровню).
  • Возможность назначить любой пользовательский лейбл пункту меню (акция, новое, тотальная распродажа и др. по желанию) - есть возможность управлять цветом лейбла.
  • Возможность загрузить пользовательский контент (баннеры, любой html контент) в выпадающую часть меню (управление на уровне родительского пункта меню).
  • Возможность опционально переопределять стиль выпадения для второго и третьего уровней вложенностей (галочка для родителя первого уровня).
  • Новый макет (опционально) для главной - с открытым первым уровнем меню по умолчанию.

Создание нового блока

Для всех, кто устанавливает тему на чистую установку:

(Первая установка) и не делает обновление с более старых версий с последующим импортом макетов, блок с новым типом меню уже создан в макетах на странице (По умолчанию), прежний блок с меню (использовался до версии UniTheme 1.4) выключен.

Для тех, кто проходил процесс обновления и экспортировал в тему свои прежние макеты:

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

Перейдите во вкладку (Контент) и выберите ваше Меню для вывода в данном блоке.

Настройки меню

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

Двухуровневое меню

Трехуровневое меню

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

Отрегулируйте количество отображаемых элементов 2-х уровневого меню (допустим, если у вас в некотором пункте меню 10 ссылок третьего уровня, а вы выставили в данном поле 5, то будет выводится не более пяти ссылок и появится кнопка Еще[+] по наведению на которую, будет раскрываться весь доступный список).

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

Как работает 3-х уровневое меню



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

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

Рассмотрим настройки нового функционала во вкладке (АВ: Режим с иконкой).

Для первого уровня меню вы можете загрузить иконку (максимальный размер иконки, высота 18px и ширина до 30px). Размер не регулируется опционально и подогнан для корректного отображения, которое не ломает высоту элементов меню первого уровня (корректировка индивидуального размера иконок возможна по заказу на платной основе).

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

В поле (Текст) вы можете ввести любой HTML контент для вывода в теле выпадающего меню, это может быть графический баннер или ссылки брендов, все зависит от вашей задачи и знания HTML. Чтобы загрузить баннер, заранее подготовьте его в Adobe Photoshop (оптимизируйте размер) и загрузите его c помощью элемента редактора (Изображения).

Опция (Положение текста) регулирует положение вашего баннера (HTML контента) относительно правого края или нижней части меню.

Поле (Маркер) позволяет вывести текстовый маркер (например, Новинка или Хит), в пунктах (Цвет маркера) и (Фон маркера) регулируется его цветовое оформление соответственно.

Примеры оформления выпадающих пунктов меню, как в демо:

- пункт Одежда

<p><img src="http://ut-1.alexbranding.com/images/companies/1/namecavs-zip-hoodie-size480x480-shotflat-colornavy-burgundy.png?1489427835686" alt="" style="margin: 0 0 -50px 0;z-index: 10;">
</p>

- пункт Электроника

<p><img src="http://ut-1.alexbranding.com/images/companies/1/led-tv-banner.jpg?1489755718066" alt="" style="margin-bottom:-15px">
</p>

- пункт Спорт и отдых

<p><img src="http://ut-1.alexbranding.com/images/companies/1/home_sport_sportstar_1.png?1489424838290" alt="" style="margin-bottom: -50px;">
</p>

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

Видео с настройками для всех пунктов меню в демо нашего сайта

Комментарии

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

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