mega menu pro - rootways.com...rootways advance mega menu extension is your solution to create the...

User Guide for Rootways Mega Menu Pro Extension

2017 Rootways Inc. All Rights Reserved.

[email protected]

MEGA MENU PRO

USER GUIDE

Version 1.0

mailto:[email protected]



Table of Contents

1. Introduction…………………………………………………………………………………... 3

2. How to use and configure……………………………………………………………………. 5

2.1 General Settings….............................................................................................................. 5

2.1.1 Top Menu Design………………………………………………………………….. 7

2.1.2 Vertical Menu Design……………………………………………………………… 8

2.1.3 Implementation code……………………………………………………………… 9

2.2 Mega Menu Management………………………………………………………………... 9



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:

Features:

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 SystemConfigurationRootwaysRoot (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.

$this->getChildHtml ("rootways_vertical_menu")

2.2 Mega Menu Pro Management:

This section will show you how to manage Mega Menu Pro from category section. Go

to AdminCatalogManage 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

Half Width

◦ Only Links

◦ Links with right block

◦ Links with left block

◦ With sub category

◦ Sub category with right block

◦ Sub category with left block

Full Width

◦ Only Links

◦ Links with right block

◦ Links with left block

◦ With sub category

◦ Sub category with right block

◦ Sub category with left block

Tabbing Menu

Products Only



- 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

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 Website: https://rootways.com/

Our Shop: https://rootways.com/shop/

Email: [email protected]

Phone: 1-855-766-8929

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!!!

------------------------- THANK YOU -------------------------

https://rootways.com/

https://rootways.com/shop/

mailto:[email protected]

tel:18557668929

mega menu pro - rootways.com...rootways advance mega menu extension is your solution to create the...

Documents