Меню

Opencart мега меню настройка

OpenCart 2.x. Как работать с модулем «TM Mega Menu»

Здравствуйте! В этой видео инструкции мы покажем, как управлять модулем TM Mega Menu в OpenCart шаблонах.

Функционал наших OpenCart шаблонов пополнился еще одним модулем — TM Mega Menu:

Давайте посмотрим, как правильно с ним работать.

Эта инструкция предполагает, что Вы уже вошли в админ панель OpenCart.

Затем используйте горячие клавиши CTRL+F/CMND+F (Windows OS /Mac OS ) для того, чтобы найти модуль «megamenu».

Нажмите иконку «Изменить» рядом с названием модуля:

Интерфейс редактирования модуля TM Mega Menu открыт.

Здесь доступны такие опции как «Название модуля» и «Статус», а также и сами пункты меню:

Вы можете увидеть, что добавлено три пункта меню. Для редактирования нажмите названия нужного пункта меню:

Доступно редактирование таких опций как: «Тип пункта меню», «Тип подпункта меню», «Количество колонок», «Количество колонок в ряд» и «Фоновое изображение».

Если меню настроено на отображение нескольких колонок, под определенным пунктом меню появляется список опций для редактирования колонок, таких как: «Ширина колонки», «Содержание» и «Лимит категорий»:

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

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

В меню «Тип пункта меню» выберите Категория, а в меню «Тип подменю пункта меню»Megamenu:

Заполните поля Количество колонок, Количество колонок в ряд и Фоновое изображение (по желанию) для того, чтобы добиться желаемого дизайна:

В случае, если выставить значение поля Количество колонок выше, чем 1, появляются дополнительные вкладки для каждой колонки.

Заполните поля Ширина колонки, Содержание и Лимит продуктов для каждой колонки, чтобы достичь желаемого результата:

Прокрутите страницу вверх и нажмите иконку «Сохранить» в верхнем правом углу экрана:

Откройте свой сайт в браузере и обновите страницу для того, чтобы увидеть изменения:

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

Это конец инструкции. Вы научились управлять модулем TM Mega Menu в OpenCart шаблонах.

Вы также можете посмотреть детальную видео инструкцию по ссылке ниже:

Источник

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

Содержание

Пример мега-меню Ламинат

Пример мега-меню Золотые кольца

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок

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

Пример мега-меню Женская обувь

(чтобы получить структуру “мозаика”, чередуем в колонках 1 или 2 пункта)

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок

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

Пример мега-меню Женское белье

(чтобы получилось разместить большую фоновую картинку справа, не стоит делать больше 3-х колонок)

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню

Примечание. Изображения необходимо подобрать так, чтобы они были примерно одинаковыми по размеру (квадратные или горизонтальные картинки). Тогда меню будет выглядеть корректно.

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

Пример мега-меню Наборы для вышивания

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню

Примечание. Изображения необходимо подобрать так, чтобы они были примерно одинаковыми по размеру (квадратные или горизонтальные картинки). Тогда меню будет выглядеть корректно.

Пример мега-меню Туристическое снаряжение

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню

Примечание. Изображения необходимо подобрать так, чтобы они были примерно одинаковыми по размеру (квадратные или горизонтальные картинки). Тогда меню будет выглядеть корректно.

Пример мега-меню Рыболовные снасти

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню.

Пример мега-меню Детские товары

Пример мега-меню Акции

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню.

Пример мега-меню Коллекция LOFT

Создаем структуру меню, как показано на рисунке

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню.

Для главной категории Коллекция LOFT задаем Название и параметры:

Дополнительный класс center-img-mega-men

Выбираем иконку, которая будет отображаться рядом с этим пунктом

Для каждого пункта Колонка 1 и т.д. задаем Название и параметры

Для каждого пункта реальной категории задаем Название и параметры

После настройки всех параметров необходимо сохранить меню и обновить страницу сайта

Пример мега-меню Межкомнатные двери

Создаем структуру меню, как показано на рисунке

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню.

Для главной категории Межкомнатные двери задаем Название и параметры:

Дополнительный класс side-img-mega-menu

Выбираем иконку, которая будет отображаться рядом с этим пунктом

Для каждого пункта Колонка 1 и т.д. задаем Название и параметры

Для каждого пункта реальной категории задаем Название и параметры

Изображение меню (для категорий второго уровня)

После настройки всех параметров необходимо сохранить меню и обновить страницу сайта

Источник

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

Содержание

Пример мега-меню Ламинат

Пример мега-меню Золотые кольца

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок

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

Пример мега-меню Женская обувь

(чтобы получить структуру “мозаика”, чередуем в колонках 1 или 2 пункта)

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок

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

Пример мега-меню Женское белье

(чтобы получилось разместить большую фоновую картинку справа, не стоит делать больше 3-х колонок)

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню

Примечание. Изображения необходимо подобрать так, чтобы они были примерно одинаковыми по размеру (квадратные или горизонтальные картинки). Тогда меню будет выглядеть корректно.

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

Пример мега-меню Наборы для вышивания

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню

Примечание. Изображения необходимо подобрать так, чтобы они были примерно одинаковыми по размеру (квадратные или горизонтальные картинки). Тогда меню будет выглядеть корректно.

Пример мега-меню Туристическое снаряжение

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню

Примечание. Изображения необходимо подобрать так, чтобы они были примерно одинаковыми по размеру (квадратные или горизонтальные картинки). Тогда меню будет выглядеть корректно.

Пример мега-меню Рыболовные снасти

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню.

Пример мега-меню Детские товары

Пример мега-меню Акции

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню.

Пример мега-меню Коллекция LOFT

Создаем структуру меню, как показано на рисунке

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню.

Для главной категории Коллекция LOFT задаем Название и параметры:

Дополнительный класс center-img-mega-men

Выбираем иконку, которая будет отображаться рядом с этим пунктом

Для каждого пункта Колонка 1 и т.д. задаем Название и параметры

Для каждого пункта реальной категории задаем Название и параметры

После настройки всех параметров необходимо сохранить меню и обновить страницу сайта

Пример мега-меню Межкомнатные двери

Создаем структуру меню, как показано на рисунке

Примечание. Колонка1, Колонка 2 и т.д. вспомогательные пункты, необходимые для разметки меню на заданное количество колонок. Для каждого из этих пунктов необходимо указать дополнительный стиль display: none; чтобы это название не выводилось в меню.

Для главной категории Межкомнатные двери задаем Название и параметры:

Дополнительный класс side-img-mega-menu

Выбираем иконку, которая будет отображаться рядом с этим пунктом

Для каждого пункта Колонка 1 и т.д. задаем Название и параметры

Для каждого пункта реальной категории задаем Название и параметры

Изображение меню (для категорий второго уровня)

После настройки всех параметров необходимо сохранить меню и обновить страницу сайта

Источник

Читайте также:  Как сбросить настройки инженерного меню по умолчанию
Adblock
detector