Mega Menu

1. INTRODUCTION

Rootways Mega Menu is Magento navigation menu extension and it is your solution to create the best sitemap right on the main navigation.

No technical knowledge required! You can flexibly set up your menu as per your requirements with Content, Products, Category and everything you want to feature.

You don’t need to worry about your site speed. Rootways Mega Menu doesn’t affect your site speed.

Let’s take a look at its Features below:

• Easily create different types of menu items by selecting Mega Menu types.
• Allow adding static block with Mega Menu.
• Set Products to Mega Menu.
• Add products to cart directly from Mega Menu.
• Mega Menu introduces new Vertical Tabbing Menu with mind blowing layout and UI experience.
• Easily manages Position of Content, Number of Columns, Category Image Size, and Show Category Image.
• Allows arranging Position of Categories.
• Manage Home Page, Contact Form, and Category Images from Admin Mega Menu settings.
• Set Contact Form in Mega Menu and Form is submitted using Ajax without loading page.
• Easily Add, Delete and Edit Menu types and Menu items.
• Mega Menu is Responsive with Mobile and Tablet supported Menu.
• Easy to Install, Configure and Use.
• Support by Rootways to help you solve any difficulties using Mega Menu.

2. HOW TO USE AND CONFIGURE

This section will show you how to configure Rootways Mega Menu Extension and how to use different layout with different categories. It’s very easy and fast!
You have to manage Mega Menu from two places, first one from Configuration setting and second one from category section.

2.1 General Settings:

This section will show you how to manage Mega Menu from Configuration settings.
Log in to Admin Panel and then click System -> Configuration -> Rootways Extensions (Left sidebar) -> Mega Menu. Below is the Screen shot for Mega Menu Settings and also the detailed
description of each setting.

• Enable: Enable/Disable Mega Menu using this setting. If it is disabled then you can see default Magento menu at front side.
• Domain Mode: Choose Live or Development mode
• Domain: If Live Mode selected, then enter live domain URL that was entered at the time of purchase extension. Else if Development Mode selected, then enter development domain URL that was entered at the time of purchase extension.
• License key: Enter License key that was sent to you by us in the email.
• Show Home Link: Show/Hide Home link to Mega Menu.




• Contact Us CMS Block: Select CMS block for display content with contact us dropdown. Content of selected CMS block is displayed at left side of contact us dropdown.

2.2 Mega Menu Management:

This section will show you how to manage Mega Menu from category section. Go to Admin -> Catalog -> Manage Categories. Over here you can see New Mega Menu tab is created using this extension.

Mega Menu Tab: Mega Menu tab from category section has options to display Menu as per your requirement. When you first open Mega Menu tab of any category and there is no option of “Menu Type” selected, at that time you can see only two options under Mega menu tab.

Note: You must select ‘Menu Type’ option under Mega Menu tab with each and every main categories of your website. No need to select the sub categories of main category, e.g. in below screen there are 7 main categories (Highlighted with arrow is main category) and you only need to select ‘Menu Type’ with these main categories.

There are 7 types of Mega Menu and these will cover your all required navigation menu. The types of Mega Menu are as follows:
1) Simple Dropdown.
2) Half Width Menu.
3) Full width – only links
4) Full width – sub category with right block
5) Full width – sub category with left block
6) Tabbing Menu.
7) Product Only.
Read about each Menu type in detail to know which type of menu match your requirement and how it works.

1) Simple:
This is simple dropdown menu, with this menu you can see tree of categories with 4th level of categories that means it expands to sub-sub-sub categories. Below is the preview for Simple Mega Menu from Admin and Front End.

Admin: Menu Type=”Simple dropdown”

Front side: Result of Menu Type=”Simple Dropdown”

Note:No need to select “Show Category Image” with “Simple Dropdown” menu, because with simple menu we don’t give facility to show category image.

2) Half Menu:
Half Menu is for less sub categories. This dropdown displays in half width of navigation showing the sub categories. This is suitable for those categories that have few sub categories. Below is the Preview for Half Menu from Admin and Front End.

Admin: Menu Type=”Half Menu

Front side: Result of Menu Type=”Half Menu”

You can show Category image (as icon) with each sub-categories of this menu type.
Admin: Menu Type=” Half menu” and category image with specific size.

Front side: Result of Menu Type=” Half Menu” and with category image

3) Full width – only links:
This menu is displayed in full width without any content and without sub-sub categories. This is suitable for those categories only having sub categories.
Admin: Menu Type=” Full width – only links”

You can set Number of Column from admin side in this Mega Menu.

Admin: Menu Type=” Full width – only links” and Number of Column=”4″

Front side: Result of Menu Type=” Full width – only links” and Number of Column=”4″

Front side: Result of Menu Type=” Full width – only links” and Number of Column=”6″

You can show category image (as icon) with each sub-categories of this menu type.
Admin: Menu Type=” Full width – only links”, Number of Column=”4″ and category image with specific size.

Front side: Result of Menu Type =” Full width – only links”, Number of Column=”4″ and with category image.

Note: You have to upload image with each sub-categories. Categories without image will take default image of Mega Menu as categories’ image.

4) Full width – sub category with right block:
This is Mega Menu with Content at right side of dropdown menu. You can add Text, Image, and Image Slider, Product or anything as Content at right side of this menu.

– How to add Block to right side of menu?
Create static block from Admin -> CMS -> Static Blocks with content you want to display at right side of this type of Mega Menu. After adding this block, select the block you have created using “Select CMS Block” dropdown under Mega Menu option and select block with main category only, no need to select with all sub categories, you are done adding block with menu. (See below screenshot)

– Show Category Image:
To display category image with Mega Menu select “Yes” from “Show Category Image” dropdown. When you select ‘Yes’ from drop down you can see two more option to add category image width and height. You have to add category image width and height in “Category Image Width” and “Category Image Height” text box. (See below screenshot)

Front side: Result of Menu Type=”Full width – sub category with right block”

5) Full width – sub category with left block:
This is Mega Menu with Content at left side of dropdown menu. You can add Text, Image, and Image Slider, Product or anything as Content at the left side of this menu.

Note: Everything is same like above “Full width – sub category with right block” only difference is the content position.

Admin: Menu Type=”Full width – sub category with left block”

Front side: Result of Menu Type=”Full width – sub category with left block”

6) Tabbing Menu:
It displays Mega Menu feature with vertical tab of category. This is an extra ordinary feature of Mega Menu ever used with Magento Websites.

Admin: Menu Type=”Tabbing Menu”

Note: No need to select “Show Category Image” because with this category we take category image by default. So please add
category images to every sub-sub category for better layout.

Front side: Result of Menu Type=”Tabbing Menu”

7) Product Only:
This Mega Menu displays Products only. It can be used to feature Best selling Products, Products with Special offer. User is redirected to Product detail page or Product can be Added to Cart directly from mega menu. (Only simple Product can be add to cart)

To display Product under ‘Products only’ Mega Menu just create Category with any name (in given example we take Best Seller) then add products under this category and select Menu Type=”Products only” and you can see all products in Mega Menu under this category.

Admin: Menu Type=”Products only”

Front side: Result of Menu Type=”Products Only”

Responsive Layout of Rootways Mega Menu

Responsive Layout of Rootways Mega Menu is adaptive to all screen resolutions whether it is Mobile or Tablet.

Have a look at some of the screen shot of Responsive Mega Menu.

Tablet screen resolution

That’s how easy it is to use Mega Menu by Rootways. Please contact us for any queries regarding Magento and custom web-development of E-commerce websites.

Our team is working on the newer version of Rootways Mega Menu with an extra ordinary feature that you’ve never seen with any extension!!!