«Будь швидким або помри»! Будь лідером з NeoSeo, деталі акції...

Налаштування мега-меню {SEO-Магазину}

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

Приклад мега-меню ЛамінатМодуль

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

Приклад мега-меню Золоті каблучкиМодуль 3

  1. Створюємо структуру меню, як показано на малюнкуМодуль 0

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

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

Примітка. Зображення необхідно підібрати так, щоб вони були однакові по ширині, та по висоті. Тоді меню буде виглядати коректно.

  1. Після налаштування всіх параметрів необхідно зберегти меню і оновити сторінку сайту

Приклад мега-меню Жіноче взуттяМодуль 3

  1. Створюємо структуру меню, як показано на малюнкуМодуль 4

(Щоб отримати структуру "мозаїка", чергуємо в колонках 1 або 2 пункту)

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

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

Примітка. Зображення необхідно підібрати так, щоб вони були однакові по ширині, а по висоті 2 картинки з парних колонок були рівні однієї з непарної. Тоді меню буде виглядати коректно.

  1. Після налаштування всіх параметрів необхідно зберегти меню і оновити сторінку сайту

Приклад мега-меню Жіноча білизнаМодуль 6

  1. Створюємо структуру меню, як показано на малюнкуМодуль 7

(Щоб вийшло розмістити велику фонову картинку справа, не варто робити більше 3-х колонок)

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

  1. Для головній категорії Жіноча білизна задаємо Назва і параметри:Модуль 8
  • Тип меню - Мега (Горизонтальний)
  • Вибираємо іконку, яка буде відображатися поруч з цим пунктом
  • Вибираємо фонову картинку (в даному випадку зображення повинно бути зрушене вправо, щоб не перетинатися з пунктами меню)
  • Вибираємо спосіб відображення картинки Зображення фоном
  • Додаткові класи third-mega-menu cover
  • Додатковий стиль background-size: cover
  1. Для кожного пункту реальної категорії задаємо Назва і параметри:Модуль 9
  1. Тип меню - Мега (Горизонтальний)
  1. Зображення меню

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

  1. Додатковий стиль display: none;

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

  1. Після налаштування всіх параметрів необхідно зберегти меню і оновити сторінку сайту

Приклад мега-меню Набори для вишиванняМодуль 10

  1. Створюємо структуру меню, як показано на малюнкуМодуль 22

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

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

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

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

Приклад мега-меню Туристичне спорядженняМодуль 21

Створюємо структуру меню, як показано на малюнку (4 рівня вкладеності)Модуль 11

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

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

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

  1. Після налаштування всіх параметрів необхідно зберегти меню і оновити сторінку сайту

Приклад мега-меню Рибальські снастіМодуль 11

  1. Створюємо структуру меню, як показано на малюнкуМодуль 12

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

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

Приклад мега-меню Дитячі товариМодуль 21

  1. Створюємо структуру меню, як показано на малюнкуМодуль 55
  1. Для головної категорії Дитячі товари задаємо Назва і параметри:Модуль 0
  • Додатковий клас header-mega-menu
  • Тип меню - Мега (Горизонтальний)
  • Вибираємо Додаткову іконку, яка буде відображатися поруч з цим пунктом
  • Вибираємо зображення для меню, що випадає
  1. Для осередку "Колонка 4" вибираємо зображення:Модуль для інтернет магазину
  1. Для осередку "Колонка 4" створюємо порожнє посилання і прописуємо стилі opacity: 0:Модуль для сайту
  1. Для осередку "Колонка 5" створюємо 5 брендів і посилання на всі категорії:Модуль 23
  • Для брендів задаємо стилі display: none і ставимо зображення фономНалаштування модуля
  • Для "Всі бренди" прописуємо одне з посилань і додаємо клас baby-all-categoriesМодуль для інтернет-магазину

Приклад мега-меню АкціїМодуль 321

  1. Створюємо структуру меню, як показано на малюнкуМодуль для сайту

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

  1. Для головної категорії Акції задаємо Назва і параметри:
  • Тип меню - Мега (Горизонтальний)
  • Додатковий клас action-mega-menu
  • Вибираємо іконку, яка буде відображатися поруч з цим пунктом
  1. Для кожного пункту Колонка 1 і т.д. задаємо Назва і параметри
  • Тип меню - Мега (Горизонтальний)
  1. Для кожного пункту реальної категорії задаємо Назва і параметри
  • Тип меню - Мега (Горизонтальний)
  • Зображення меню
  1. Після налаштування всіх параметрів необхідно зберегти меню і оновити сторінку сайту

Приклад мега-меню Колекція LOFTМодуль неосео

  1. Створюємо структуру меню, як показано на малюнкуМодель НеоСео

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

  1. Для головної категорії Колекція LOFT задаємо Назва і параметри:
  • Тип меню - Мега (Горизонтальний)
  • Додатковий клас center-img-mega-men
  • Вибираємо іконку, яка буде відображатися поруч з цим пунктом
  1. Для кожного пункту Колонка 1 і т.д. задаємо Назва і параметри
  • Тип меню - Мега (Горизонтальний)
  1. Для кожного пункту реальної категорії задаємо Назва і параметри
  • Тип меню - Мега (Горизонтальний)
  • Зображення меню
  1. Після налаштування всіх параметрів необхідно зберегти меню і оновити сторінку сайту

Приклад мега-меню Міжкімнатні дверіМодуль НеоСео 1

  1. Створюємо структуру меню, як показано на малюнкуМодуль НеоСео для Інтернет-магазину

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

  1. Для головної категорії Міжкімнатні двері задаємо Назва і параметри:
  • Тип меню - Мега (Горизонтальний)
  • Додатковий клас side-img-mega-menu
  • Вибираємо іконку, яка буде відображатися поруч з цим пунктом
  1. Для кожного пункту Колонка 1 і т.д. задаємо Назва і параметри
  • Тип меню - Мега (Горизонтальний)
  1. Для кожного пункту реальної категорії задаємо Назва і параметри
  • Тип меню - Мега (Горизонтальний)
  • Зображення меню (для категорій другого рівня)
  1. Після налаштування всіх параметрів необхідно зберегти меню і оновити сторінку сайту