How to set up the Mega menu App?


Boost your site with a powerful menu !

If you have not yet ordered the "Mega menu" App, click on the "Apps" backoffice icon.

Click on image to enlarge


Search the App and click on the [Buy] button.

Click on image to enlarge


If you have already ordered it, the [Configure] button will appear.

You have the choice between publishing the application on the preview of your site or on your site directly.

Click on image to enlarge


 
 Utilisation

The management of the Mega menu is like for a classic menu : [Site \ Menus \ Horizontal Menu].

Each sub menu turns into a panel:

Click on image to enlarge


Click on image to enlarge


 
 Make a column

The columns are determined by the presence of separating elements.

Click on image to enlarge


It is possible to add as many separating elements - and thus columns - as desired. But in practice, it is difficult to create more than 5 columns.

 
 3 Level Menu

Having a multi-level menu to make browsing easier for your customers

Click on image to enlarge


The "MEN"submenu is in the "title" format to pass it in level 2 :

Click on image to enlarge


As for the sub-menu of level 3, let's take the example of "Tennis" which is in "text" format :

Click on image to enlarge


 
 Inserting a background image in the menu

To place a background image in a panel, you first need to add an image element to a submenu. This image can be placed anywhere in the submenu, but it makes more sense to put it as the last item.

It will then be assigned the background class in the "Associated CSS Class" field: is-background

Click on image to enlarge


NB : Please check that the size of the images shown correspond to the size allocated in the submenu.

 
 Associating images and texts that follow in one entity

Click on image to enlarge


Click on image to enlarge


In the settings of the mega menu application:

Click on image to enlarge


Associating images and texts that follow each other in a single entity :

When this option is selected, the text element followed by an image element are grouped together to form a single element. This allows you to present links as an image while optimizing the SEO of the site.
 
 EXPERT MODE - for experts only :

 
 Switching image by hovering over with the mouse

Click on image to enlarge


The image element, followed by an image with an associated CSS class, allows you to change the image when you move the mouse.

It will be necessary to assign it to the backGround class in the "Associated CSS Class" field : is-img-hover
 
 Importing webBlocks to the menu

Click on image to enlarge


To add a webblock to your menu, insert a "text" element and call it the webblock number previously retrieved in the [Gallery / Webblock Pages] section..

Assign the backGround class in the "Associated CSS Class" field : wb-id:123456
 
 Width of the columns

Click on image to enlarge


Width of customizable columns with dedicated css classes :
  • is-col-100
  • Is-col-50
  • Etc.

Placing the class once in the column is enough.
 
 Place elements horizontally under a column

Click on image to enlarge


You can place items horizontally under a column with the associated CSS class : is-col-inline .

Placing the class once in the column is enough.
 

Add to favorites: http://www.actinic.co.uk/Help/HelpCenterContent.asp?ActionID=1024&TID=56164&MID=56018&LangID=1
© 2001-2018 Actinic. All rights reserved.