EM Mega Menu is a Magento extension developed by our web developer team. With the functions of the extension, you will be impressed with the best navigation tool ever. It maximizes ability to custom content with the possibility to integrate video, link, image or banner in the main menu. Also, multicolumn structure has shown all categories in the most logical and dynamic way. There are different styles for menu, so you can choose any style that satisfies you the most.
1. USAGE
1.1. CREATING THE MENU
1. Filling in the information field of menu and save then:
- Name: Name of menu.
- Type: You have 2 options: Horizontal and Vertical.
- Status: Enable or Disable this menu.
- Custom CSS Class: Is a class name of outer DIV wraps the menu contents. It’s useful for creating your own CSS style for this menu.
2. Go back menu list and click on menu to begin creating the menu items.
3. In Edit Page: Drag & drop menu items on to the canvas to design your menu as you want.
- Link: a hyperlink item
- Text: menu item that contains text, html code, Magento widget syntax or block syntax.
- Column Layout: is a menu item that contains other child items per column. Child items of Column Layout should be a Row Layout item.
-
Row Layout: is a menu item that contains other child items per row.
- Item 1: Link
Exmaple:
- Item 2: Text
Exmaple:
- Item 3: Column Layout
- Item 4: Row Layout
1.2. SHOWING MENU ON FRONTEND
2. SAMPLE MENU
2.1 SAMPLE MENU WITH 1 COLUMN
Link: CSS Class: menu-icon menu-icon06;
– Rows Layout: CSS Class: col-menu menu_col5 grid_6
– Text: Enter content
2.2 SAMPLE MENU WITH 2 COLUMNS
Link: Enter link
– Columns Layout: CSS Class: col-sm-12 grid_5 alpha
– Text: Enter content
– Rows Layout: CSS Class: col-sm-12 grid_5 alpha
– Text: Enter content
2.3 SAMPLE MENU WITH 3 COLUMNS
Link: Enter link
– Columns Layout: CSS Class: col-menu menu_col16 grid_18
– Rows Layout: CSS Class: col-sm-8 grid_6 alpha
– Text: Enter content
– Rows Layout: CSS Class: col-sm-8 grid_6 alpha
– Text: Enter content
– Rows Layout: CSS Class: col-sm-8 grid_6 alpha
– Text: Enter content
2.4 SAMPLE MENU WITH 4 COLUMNS
Link: Enter link
– Columns Layout: CSS Class: col-menu menu_col24 grid_24
– Rows Layout: CSS Class: col-sm-24
– Rows Layout: CSS Class: col-sm-8
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
– Rows Layout: CSS Class: col-sm-8
– Text: Enter content
2.5 SAMPLE MENU WITH 5 COLUMNS
Link: Enter link
– Columns Layout: CSS Class: col-menu menu_col24 grid_24
– Rows Layout: CSS Class: col-sm-24
– Rows Layout: CSS Class: col-sm-8
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
2.6 SAMPLE MENU WITH 6 COLUMNS
Link: Enter link
– Columns Layout: CSS Class: col-menu menu_col24 grid_24
– Rows Layout: CSS Class: col-sm-24
– Rows Layout: CSS Class: col-sm-8
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
– Rows Layout: CSS Class: col-sm-4
– Text: Enter content
2.6 SAMPLE MENU WITH 6 COLUMNS
Link: Enter link. CSS Class: dd-menu-link menu-icon menu-icon04
– Text: Enter content
2.6 SAMPLE MENU WITH 6 COLUMNS
To create menu with icon, you just add Font Awesome icon class to CSS class field in link menu item. Go to http://fortawesome.github.io/Font-Awesome/icons/ to get more icon class.
Example:
Link: Homepage.
CSS Class: fa fa-home