Mega Menu Pro Extension

1. INTRODUCTION

Rootways Advance Mega Menu extension is your solution to create the best site map right on the main navigation bar of your website. Using mega menu you can display categories upto 4th level, you can also display content, images, products, contact form, header and footer in your website’s main navigation.

You can also display vertical navigation on any page. Rootways mega menu has more than 15 layouts of mega menu; you can set any layout for specific category. Rootways mega menu is flexible for mobile, tablet and all responsive screens. Without touching HTML and CSS you can modify mega menu layout from admin settings. You can set different layout and menu type for top menu and vertical menu.

Create Professional looking Magento Navigation Menu. All your categories and sub-categories are easy to find with this extension. Add featured content in Navigation menu with Right/Left CMS block. Promote products/services with Add to cart feature directly in navigation menu.

Display 3rd level of categories in attractive Pop up style. Select font color, Background color, and Active menu font color with easy options from admin. No need to learn HTML and CSS. Very User friendly and easy to install. It doesn’t affect your site speed.

Check out the features below:

• Display Mega Menu both horizontally & vertically.
• 15 different types of Mega Menu.
• Manage design of Mega Menu from Admin.
• Add Vertical menu on specific page.
• Just select mega menu types and change mega menu layout.
• Full and half width menu.
• Add category image icons.
• Manage height and width of category image icon.
• Set number of columns in dropdown menu.
• Add header and footer text for menu content part.
• CMS static block within Mega Menu.
• Add products to cart directly from the menu.
• Display Products in Top and Vertical Menu.
• Easily manages Position of Content, Number of Columns, and Category Image Size.
• Hide or show specific category from mega menu.
• Choose to show home icon or not.
• Vertical Tabbing menu reveals products on hover effect.
• Contact form in menu. Form is submitted using Ajax without reloading page.
• Easy to Install, Configure and Use.
• Responsive

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 -> RootwaysRoot (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 Pro using this setting. If it’s enabled then only you will be able to see the Rootways Mega Menu Pro in front side. Disable it to set default Magento Menu.
• Domain Mode: Choose appropriate Domain Mode, if you’re site is in development then select ‘Development’ or select ‘Live’.
• Domain: Add the Domain name that you entered when you purchased Rootways Mega Menu Pro extension.
• License Key: Enter the License Key that was emailed to you by Rootways Shop after the purchase of Mega Menu Pro.
• Show Contact Form: Select ‘Yes’ if you want to include Contact Form in your Mega Menu Pro.
• Contact us CMS block: If you have selected above Show Contact Form option as ‘Yes’, you need to select the CMS block to add in this option.
• Top Menu Alignment Type: Choose Alignment of Top Menu as Left, Right aligned or you can choose Fit to Screen to display the top menu in a line fit properly to screen.
• Vertical Menu Dropdown Type: For Vertical Menu choose from where you want to show the sub-category dropdown as ‘Top’ or ‘Relative’.

2.1.1 Top Menu Design:

Top Menu Design: All the CSS and Style related settings for Top Menu can be controlled from here such as Active Menu Font color, Header Font size, Vertical, Tabbing Menu and simple dropdown menu type’s style settings.

2.1.2 Vertical Menu Design :

Vertical Menu Design: All the design and style settings for Vertical Menu are controlled from here. You can customize the vertical menu according to your wish.

2.1.3 Implementation Code:

After successfully installing and enabling the Rootways Mega Menu Pro extension, you will see that your current menu is replaced with Rootways Mega Menu Pro. If you want to display vertical mega menu in any page, move this code into your pages.

2.2 Mega Menu Pro Management

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

Top Mega Menu:

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 ‘Menu type’ option under Top Mega menu tab.

Note: You must select ‘Menu Type’ option under Mega Menu tab with each and every main category of your website. No need to select the sub categories of main category. There are 15 Menu types to choose from for your Top Mega Menu. Below is their overview:

– Simple Dropdown:

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 Front End.

– Half Width:

There are 6 different menu types in half width size. With all these menu types you can add category image icon, header and footer text for featured content in menu drop down, custom CSS class for customization.

Below are the menu types with their front-end screen shots.

1) Half width – Only Links:
This menu type size is half width and you can display only links in it.

2) Half width – Links with Right Block:
Using this menu type, you can show links and a right CMS block directly in the menu drop down.

3) Half width – Links with Left Block:
This menu type is similar to the half width links with right block just the position of CMS block is on Left side in this.

4) Half width – Sub categories:
In this menu type, you can display sub categories and their links in Half Width.

5) Half width – Sub categories with Right Block:
If you select this menu type, you can add CMS block on Right side with Sub – categories and their links.

6) Half width – Sub categories with Left Block:
This menu type is similar to the half width sub – categories with Right block just the position of CMS block is on Left side in this.

– Full Width:

There are 6 different menu types in Full width size. With all these menu types you can add category image icon, header and footer text for featured content in menu drop down, custom CSS class for customization.

Below are the menu types with their front-end screen shot.

1) Full width – Only Links:
This menu type size is Full width and it can be used to display only links in menu drop down.

Below is the front-end screen shot of full width – Only Links menu type.

2) Full width – Links with Right Block:
Using this menu type, you can display links in full width with a Right CMS block directly in menu drop down.

3) Full width – Links with Left Block:
This menu type is similar to Full width – Links with Right block, just the position of the CMS block is on Left side.

4) Full width – Sub categories:
Use this menu type to show the sub-categories with their links and in the Full width size. Below is its screen shot:

5) Full width – Sub category with right block:
This menu type is full width in size and you can display sub categories and its links as well as CMS block on right side of menu drop down.

6) Full width – Sub category with Left block:
This menu type is same as the above described menu type, just the position of the CMS block is on the Left side in this one. Below is its screen shot:

– 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.

– Products 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.

Note: All these menu types can be added in Vertical Mega Menu also. To manage Vertical Mega Menu go to Admin -> Catalog -> Manage Categories -> Vertical Mega Menu

Responsive Layout of Rootways Mega Menu Pro

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.

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

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