Express offer for the development of a fast online store for 7999 UAH details...

To configure mega menu {SEO-Store}

To configure mega menu module Neoseo Menu for OpenCart and {SEO-Shop}, you must go to adminpanel - extra - Modules - Neoseo Menu - Main menu

An example of a mega-menu Laminate

  1. Create the menu structure as shown in the figure.
  1. For the main Laminate category, set the Name and Parameters:
  • Menu Type - Mega (Horizontal)
  • Select the Additional icon that will be displayed next to this item.
  • Select an image for the dropdown menu
  1. After setting all the parameters, you need to save the menu and refresh the site page
  1. Example mega menu Gold rings

Create the menu structure as shown in the figure.

  1. Note. Column 1, Column 2, etc. auxiliary items necessary for marking up a menu for a given number of columns
  • For the main category Golden Rings, set the Name and parameters:
  • Menu Type - Mega (Horizontal)
  • Select the icon that will be displayed next to this item.
  • Select an image for the dropdown block.

Specify additional background-repeat style: no-repeat; background-position: right bottom; for the correct placement of the background image

  1. For each auxiliary item, Column 1, etc. set the name and parameters
  • Menu Type - Mega (Horizontal)
  • Optional display style: none; so that this name does not appear on the menu
  1. For each item in the category of the 2nd level, set the Name and parameters
  • Menu Type - Mega (Horizontal)
  • Menu Image
  • Extra class title

Note. Images must be selected so that they are the same in width and in height. Then the menu will look correct.

  1. After setting all the parameters, you need to save the menu and refresh the site page

Example mega-menu Women's shoes

  1. Create the menu structure as shown in the figure.

(to get the mosaic structure, alternate in columns 1 or 2 points)

Note. Column 1, Column 2, etc. auxiliary items necessary for marking up a menu for a given number of columns

  1. For the main category Women's shoes, set the Name and parameters:
  • Menu Type - Mega (Horizontal)
  • Additional class mozaic-mega-menu
  • Select the icon that will be displayed next to this item.
  1. For each item, Column 1, etc. set the name and parameters
  • Menu Type - Mega (Horizontal)
  • Additional class mozaic-column
  • Optional display style: none; so that this name does not appear on the menu
  1. For each item in the real category, set the Name and parameters
  • Menu Type - Mega (Horizontal)
  • Menu Image

Note. Images must be selected so that they are the same in width, and in height 2 pictures from even columns are equal to one of the odd ones. Then the menu will look correct.

  1. After setting all the parameters, you need to save the menu and refresh the site page

Example mega-menu Lingerie

  1. Create the menu structure as shown in the figure.

(to get a large background image to the right, do not do more than 3 columns)

Note. Column 1, Column 2, etc. auxiliary items necessary for marking up a menu for a given number of columns. For each of these items, you must specify an additional display style: none; so that this name does not appear on the menu

  1. For the main category Lingerie, set the Name and parameters:
  • Menu Type - Mega (Horizontal)
  • Select the icon that will be displayed next to this item.
  • Select a background image (in this case, the image should be shifted to the right so as not to overlap with the menu items)
  • Choose a way to display the image
  • Additional classes third-mega-menu cover
  • Optional style background-size: cover

For each item in the real category, set the Name and parameters:

  • Menu Type - Mega (Horizontal)
  • Menu Image

Note. Images must be selected so that they are approximately the same in size (square or horizontal pictures). Then the menu will look correct.

  1. Optional display style: none;

It is necessary so that only images of items without names are displayed.

  1. After setting all the parameters, you need to save the menu and refresh the site page

Example mega menu Embroidery kits

  1. Create the menu structure as shown in the figure.

Note. Column 1, Column 2, etc. auxiliary items necessary for marking up a menu for a given number of columns. For each of these items, you must specify an additional display style: none; so that this name does not appear on the menu

  1. For the main category of Embroidery kits, set the Name and parameters:
  • Menu Type - Mega (Horizontal)
  • Select the icon that will be displayed next to this item.
  • Select a background image (in this case, the image should be shifted to the right so as not to overlap with the menu items)
  • Choose a way to display the image
  • Additional classes triple-mega-menu
  • Optional style background-size: cover
  1. For each item in the real category, set the Name and parameters
  • Menu Type - Mega (Horizontal)
  • Menu Image

Note. Images must be selected so that they are approximately the same in size (square or horizontal pictures). Then the menu will look correct.

  1. After setting all the parameters you need to save the menu and refresh the site page

Example mega-menu Camping Equipment

  1. Create the menu structure as shown in the figure (4 levels of nesting)

Note. Column 1, Column 2, etc. auxiliary items necessary for marking up a menu for a given number of columns. For each of these items, you must specify an additional display style: none; so that this name does not appear on the menu

  1. For the main category Camping equipment, set the Name and parameters:
  • Menu Type - Mega (Horizontal)
  • Select the icon that will be displayed next to this item.
  • Select a background image (in this case, the image should be shifted to the right so as not to overlap with the menu items)
  • Choose a way to display the image
  • It is necessary to add the main category add. class all-category-show
  • Each category that needs to be hidden must be added. class child-hidden
  • Optional style background-size: cover
  1. For each item in the real category, set the Name and parameters:
  • Menu Type - Mega (Horizontal)
  • Menu Image

Note. Images must be selected so that they are approximately the same in size (square or horizontal pictures). Then the menu will look correct.

  1. After setting all the parameters, you need to save the menu and refresh the site page

Example Mega Menu Fishing Tackle

  1. Create the menu structure as shown in the figure.

Note. Column 1, Column 2, etc. auxiliary items necessary for marking up a menu for a given number of columns. For each of these items, you must specify an additional display style: none; so that this name does not appear on the menu.

  1. For the main category Fishing tackle we set the Name and parameters:
  • Menu Type - Mega (Horizontal)
  • Optional class table-mega-menu bg-img
  • Select the icon that will be displayed next to this item.
  • Additional style background-size: 35% 100%; background-repeat: no-repeat; background-position: left center;
  • For each item, Column 1, etc. set the name and parameters
  • Menu Type - Mega (Horizontal)
  • The image in the menu, which will be located on the left in the drop-down menu
  1. For each item in the real category, set the Name and parameters
  • Menu Type - Mega (Horizontal)
  • Menu Image
  1. After setting all the parameters, you need to save the menu and refresh the site page
  • Example Mega Menu Baby Products
  • Create the menu structure as shown in the figure.
  1. For the main category of Baby Products, we set the Name and parameters:

Extra class header-mega-menu

Menu Type - Mega (Horizontal)

  1. Select the Additional icon that will be displayed next to this item.
  1. Select an image for the dropdown menu
  • For the “Column 4” cell, select the image:
  • For the “Column 4” cell, create an empty link and prescribe opacity styles: 0:
  • For the “Column 5” cell, create 5 brands and a link to all categories:
  1. For brands, set display: none styles and set the image as the background
  1. For “All Brands” we write the desired link and add the class baby-all-categories

Promotional Mega Menu Example

  1. Create the menu structure as shown in the figure.

Note. Column 1, Column 2, etc. auxiliary items necessary for marking up a menu for a given number of columns. For each of these items, you must specify an additional display style: none; so that this name does not appear on the menu.

  1. For the main category of Promotions, set the Name and parameters:
  • Menu Type - Mega (Horizontal)
  • Additional class action-mega-menu
  • Select the icon that will be displayed next to this item.
  1. For each item, Column 1, etc. set the name and parameters
  • Menu Type - Mega (Horizontal)
  1. For each item in the real category, set the Name and parameters
  • Menu Type - Mega (Horizontal)
  • Menu Image
  1. After setting all the parameters, you need to save the menu and refresh the site page

Example mega menu LOFT Collection

  1. Create the menu structure as shown in the figure.

Note. Column 1, Column 2, etc. auxiliary items necessary for marking up a menu for a given number of columns. For each of these items, you must specify an additional display style: none; so that this name does not appear on the menu.

  1. For the main category LOFT Collection, set the Name and parameters:
  • Menu Type - Mega (Horizontal)
  • Optional class center-img-mega-men
  • Select the icon that will be displayed next to this item.
  1. For each item, Column 1, etc. set the name and parameters
  • Menu Type - Mega (Horizontal)
  1. For each item in the real category, set the Name and parameters
  • Menu Type - Mega (Horizontal)
  • Menu Image
  1. After setting all the parameters, you need to save the menu and refresh the site page

Example mega-menu Interior doors

  1. Create the menu structure as shown in the figure. 

Note. Column 1, Column 2, etc. auxiliary items necessary for marking up a menu for a given number of columns. For each of these items, you must specify an additional display style: none; so that this name does not appear on the menu.

  1. For the main category Interior doors, set the Name and parameters:
  • Menu Type - Mega (Horizontal)
  • Optional class side-img-mega-menu
  • Select the icon that will be displayed next to this item.
  1. For each item, Column 1, etc. set the name and parameters
  • Menu Type - Mega (Horizontal)
  1. For each item in the real category, set the Name and parameters
  • Menu Type - Mega (Horizontal)
  • Menu image (for second level categories)
  1. After setting all the parameters, you need to save the menu and refresh the site page