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

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

1. Створюємо структуру меню, як показано на малюнку
2. Для головної категорії Ламінат задаємо Назва та Параметри:

• Тип меню - Мега (Горизонтальний)
• Вибираємо Додаткову іконку, яка буде відображатися поруч з цим пунктом
• Вибираємо зображення для меню, що випадає

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

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

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

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

2. Для головної категорії Золоті каблучки задаємо Назва і параметри:

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

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

• Тип меню - Мега (Горизонтальний)
• Додатковий стиль display: none; щоб ця назва не відображалося в меню

4. Для кожного пункту категорії 2-го рівня задаємо Назва і параметри

• Тип меню - Мега (Горизонтальний)
• зображення меню
• Додатковий клас title

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

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

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

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

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

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

2. Для головної категорії Жіноче взуття задаємо Назва і параметри:

• Тип меню - Мега (Горизонтальний)
• Додатковий клас mozaic-mega-menu
• Вибираємо іконку, яка буде відображатися поруч з цим пунктом

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

• Тип меню - Мега (Горизонтальний)
• Додатковий клас mozaic-column
• Додатковий стиль display: none; щоб ця назва не відображалося в меню

4. Для кожного пункту реальної категорії задаємо Назва і параметри

• Тип меню - Мега (Горизонтальний)
• Зображення меню

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

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

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

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

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

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

2. Для головній категорії Жіноча білизна задаємо Назва і параметри:

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

3. Для кожного пункту реальної категорії задаємо Назва і параметри:

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

2. Зображення меню

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

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

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

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

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

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

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

2. Для головної категорії Набори для вишивання задаємо Назва і параметри:

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

3. Для кожного пункту реальної категорії задаємо Назва і параметри

• Тип меню - Мега (Горизонтальний)
• Зображення меню

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

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

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

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

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

2. Для головній категорії Туристичне спорядження задаємо Назва і параметри:

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

3. Для кожного пункту реальної категорії задаємо Назва і параметри:

• Тип меню - Мега (Горизонтальний)
• Зображення меню

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

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

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

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

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

2. Для головної категорії Рибальські снасті задаємо Назва і параметри:

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

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

• Тип меню - Мега (Горизонтальний)
• Зображення в меню, яке буде розташовуватися зліва в випадаючому меню

4. Для кожного пункту реальної категорії задаємо Назва і параметри

• Тип меню - Мега (Горизонтальний)
• Зображення меню

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

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

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

2. Для головної категорії Дитячі товари задаємо Назва і параметри:

• Додатковий клас header-mega-menu
• Тип меню - Мега (Горизонтальний)
• Вибираємо Додаткову іконку, яка буде відображатися поруч з цим пунктом
• Вибираємо зображення для меню, що випадає

3. Для осередку "Колонка 4" вибираємо зображення:

4. Для осередку "Колонка 4" створюємо порожнє посилання і прописуємо стилі opacity: 0:

5. Для осередку "Колонка 5" створюємо 5 брендів і посилання на всі категорії:

• Для брендів задаємо стилі display: none і ставимо зображення фоном
• Для "Всі бренди" прописуємо одне з посилань і додаємо клас baby-all-categories

Приклад мега-меню Акції

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

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

2. Для головної категорії Акції задаємо Назва і параметри:

• Тип меню - Мега (Горизонтальний)
• Додатковий клас action-mega-menu
• Вибираємо іконку, яка буде відображатися поруч з цим пунктом

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

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

4. Для кожного пункту реальної категорії задаємо Назва і параметри

• Тип меню - Мега (Горизонтальний)
• Зображення меню

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

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

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

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

2. Для головної категорії Колекція LOFT задаємо Назва і параметри:

• Тип меню - Мега (Горизонтальний)
• Додатковий клас center-img-mega-men
• Вибираємо іконку, яка буде відображатися поруч з цим пунктом

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

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

4. Для кожного пункту реальної категорії задаємо Назва і параметри

• Тип меню - Мега (Горизонтальний)
• Зображення меню

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

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

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

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

2. Для головної категорії Міжкімнатні двері задаємо Назва і параметри:

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

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

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

4. Для кожного пункту реальної категорії задаємо Назва і параметри

• Тип меню - Мега (Горизонтальний)
• Зображення меню (для категорій другого рівня)

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