Настройка мега-меню {SEO-Магазина}

Для настройки мега меню в модуле Neoseo Меню для OpenCart и {SEO-Магазина} необходимо зайти в админпанель - Дополнения - Модули - Neoseo Меню - Главное меню

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

  1. Создаем структуру меню, как показано на рисунке
  2. Для главной категории Ламинат задаем Название и Параметры
  • Тип меню - Мега (Горизонтальное)
  • Выбираем Дополнительную иконку, которая будет отображаться рядом с этим пунктом
  • Выбираем изображение для выпадающего меню
  1. После настройки всех параметров необходимо сохранить меню и обновить страницу сайта

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

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

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

  1. Для главной категории Золотые кольца задаем Название и параметры
  • Тип меню - Мега (Горизонтальное)
  • Выбираем иконку, которая будет отображаться рядом с этим пунктом
  • Выбираем изображение для выпадающего блока
  • Указываем дополнительный стиль background-repeat: no-repeat; background-position: right bottom; для правильного размещения фоновой картинки
  1. Для каждого вспомогательного пункта Колонка 1 и т.д. задаем Название и параметры
  • Тип меню - Мега (Горизонтальное)
  • Дополнительный стиль display: none; чтобы это название не выводилось в меню
  1. Для каждого пункта категории 2-го уровня задаем Название и параметры 
  • Тип меню - Мега (Горизонтальное)
  • Изображение меню
  • Дополнительный класс title

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

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

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

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

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

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

  1. Для главной категории Женская обувь задаем Название и параметры:
  • Тип меню - Мега (Горизонтальное)
  • Дополнительный класс mozaic-mega-menu
  • Выбираем иконку, которая будет отображаться рядом с этим пунктом
  1. Для каждого пункта Колонка 1 и т.д. задаем Название и параметры
  • Тип меню - Мега (Горизонтальное)
  • Дополнительный класс mozaic-column
  • Дополнительный стиль display: none; чтобы это название не выводилось в меню
  1. Для каждого пункта реальной категории задаем Название и параметры
  • Тип меню - Мега (Горизонтальное)
  • Изображение меню

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

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

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

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

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

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

  1. Для главной категории Женское белье задаем Название и параметры:
  • Тип меню - Мега (Горизонтальное)
  • Выбираем иконку, которая будет отображаться рядом с этим пунктом
  • Выбираем фоновую картинку ( в данном случае изображение должно быть сдвинуто вправо, чтобы не пересекаться с пунктами меню)
  • Выбираем способ отображения картинки Изображение фоном
  • Дополнительные классы third-mega-menu cover
  • Дополнительный стиль background-size:cover
  1. Для каждого пункта реальной категории задаем Название и параметры :
  1. Тип меню - Мега (Горизонтальное)
  2. Изображение меню

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

  1. Дополнительный стиль display: none;

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

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

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

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

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

  1. Для главной категории Наборы для вышивания задаем Название и параметры :
  • Тип меню - Мега (Горизонтальное)
  • Выбираем иконку, которая будет отображаться рядом с этим пунктом
  • Выбираем фоновую картинку ( в данном случае изображение должно быть сдвинуто вправо, чтобы не пересекаться с пунктами меню)
  • Выбираем способ отображения картинки Изображение фоном
  • Дополнительные классы triple-mega-menu
  • Дополнительный стиль background-size:cover
  1. Для каждого пункта реальной категории задаем Название и параметры 
  • Тип меню - Мега (Горизонтальное)
  • Изображение меню

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

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

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

  1. Создаем структуру меню, как показано на рисунке (4 уровня вложенности)

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

  1. Для главной категории Туристическое снаряжение задаем Название и параметры :
  • Тип меню - Мега (Горизонтальное)
  • Выбираем иконку, которая будет отображаться рядом с этим пунктом
  • Выбираем фоновую картинку ( в данном случае изображение должно быть сдвинуто вправо, чтобы не пересекаться с пунктами меню)
  • Выбираем способ отображения картинки Изображение фоном
  • Надо добавить главной категории доп. класс all-category-show 
  • Каждой категории, которую надо скрыть, надо добавить доп. класс child-hidden
  • Дополнительный стиль background-size:cover
  1. Для каждого пункта реальной категории задаем Название и параметры:
  • Тип меню - Мега (Горизонтальное)
  • Изображение меню

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

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

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

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

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

  1. Для главной категории Рыболовные снасти задаем Название и параметры:
  • Тип меню - Мега (Горизонтальное)
  • Дополнительный класс table-mega-menu bg-img
  • Выбираем иконку, которая будет отображаться рядом с этим пунктом
  • Дополнительный стиль background-size: 35% 100%;background-repeat: no-repeat; background-position: left center; 
  1. Для каждого пункта Колонка 1 и т.д. задаем Название и параметры
  • Тип меню - Мега (Горизонтальное)
  • Изображение в меню, которое будет располагаться слева в выпадающем меню
  1. Для каждого пункта реальной категории задаем Название и параметры
  • Тип меню - Мега (Горизонтальное)
  • Изображение меню
  1. После настройки всех параметров необходимо сохранить меню и обновить страницу сайта

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

  1. Создаем структуру меню, как показано на рисунке
  2. Для главной категории Детские товары задаем Название и параметры:
  • Дополнительный класс header-mega-menu
  • Тип меню - Мега (Горизонтальное)
  • Выбираем Дополнительную иконку, которая будет отображаться рядом с этим пунктом
  • Выбираем изображение для выпадающего меню
  1. Для ячейки “Колонка 4” выбираем изображение:
  2. Для ячейки “Колонка 4” создаем пустую ссылку и прописываем стили opacity: 0:
  3. Для ячейки “Колонка 5” создаем 5 брендов и ссылку на все категории:
  • Для брендов задаем стили display:none и ставим изображение фоном 
  • Для “Все бренды” прописываем нужную ссылку и добавляем класс baby-all-categories

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

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

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

  1. Для главной категории Акции задаем Название и  параметры:
    1. Тип меню - Мега (Горизонтальное)
    2. Дополнительный класс action-mega-menu 
    3. Выбираем иконку, которая будет отображаться рядом с этим пунктом
  2. Для каждого пункта Колонка 1 и т.д. задаем Название и  параметры
  1. Тип меню - Мега (Горизонтальное)
  1. Для каждого пункта реальной категории задаем Название и  параметры
    1. Тип меню - Мега (Горизонтальное)
    2. Изображение меню
  2. После настройки всех параметров необходимо сохранить меню и обновить страницу сайта

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

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

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

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

    1. Тип меню - Мега (Горизонтальное)

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

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

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

  1. Тип меню - Мега (Горизонтальное)

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

    1. Тип меню - Мега (Горизонтальное)

    2. Изображение меню

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

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

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

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

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

    1. Тип меню - Мега (Горизонтальное)

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

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

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

  1. Тип меню - Мега (Горизонтальное)

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

    1. Тип меню - Мега (Горизонтальное)

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

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