mega menu - magento › media › catalog › ... · magento mega menu extension (a.k.a magento...

Copyright (c) 2009-2015 www.magestore.com

Mega Menu v.3.2

[email protected]

[email protected]

Phone: +1-415-954-7137

MEGA MENU

USER GUIDE

Extension version: 1.0

Magento® Compatibility: CE 2.0

http://www.magestore.com/

mailto:[email protected]

mailto:[email protected]


Mega Menu v.3.2

Table of Contents

1. INTRODUCTION ............................................................................. 3

2. HOW TO USE AND CONFIGURE ................................................. 5

2.1. Manage Megamenu .................................................................................... 5

2.1.1. Create new Top Menu Item ............................................................. 6

2.1.2. Create new Left Menu Item ........................................................... 18

2.1.3. Edit Menu Item ............................................................................... 19

2.1.4 Cache Management........................................................................ 20

2.2. Settings ..................................................................................................... 21



Mega Menu v.3.2

1. INTRODUCTION

Do you know how long customers stay on web pages? Surprisingly, it’s only 10-20s on

average (NNGroup, 2011) whereas you have a variety of products and categories to

show. So as not to let customers leave soon, tell them the shortest way to what they are

looking for.

Magento Mega Menu extension (a.k.a Magento Navigation Menu) is your

solution to create the best sitemap right on the main navigation.

No technical knowledge required! You can flexibly set up your wanted menu

with different content showing-off.

One more thing, you don’t need to worry about running site with “turtle speed”.

Magento Mega Menu extension doesn’t affect your site speed for sure.

Let’s take a look at listed Features below! In the next Part “How to use” and “How to

configure”, we will go into details of each feature.

Outstanding features:

Quickly Create Magento Custom Menu

Create horizontal & vertical Magento navigation menu for your site (Featured)

Easily create different types of menu items. To show a menu item as product

listing or category listing, admin can choose a menu type then select products/

categories to be shown. There are many menu types available, including Content

only, Contact form or Anchor text, etc. (Featured)

Add new type of menu: Dynamic Products Listing by Category(New)

Quickly create a menu bar in which menu items are categories of your site.

Re-index cache (use generated HTML code of your menu) to update changes,

not affecting your site performance (Featured)

Easily add, delete and edit menu items

Export the menu list to CSV/XML file

Easily Configure Menu Content and Style

Set featured products/ categories in menu content

Add labels to highlight products that you want, such as Hot, New, 50% OFF, etc.

(New)

Able to arrange the position of Menu items



Mega Menu v.3.2

Support multiple Menu effects: Hover, animate, toggle. When Customers hover

over a Menu item, a list of your products will be displayed.

Customize the style of menu: width, menu color, icon, etc.

Possible to configure the style of menu content: size, position for content &

number of columns

Add custom CSS code to create your own menu style without editing CSS file

Able to choose the arrangement of category items shown in category menu type

Optimize Menu with Mobile Menu Configuration

Choose your own breakpoint in backend to control the viewport width at which

the menu will be changed to mobile version.

Flexible configure menu style & content to be shown in mobile, like what you

did for menu in PC

Others

Responsive Magento Mega Menu extension (Hot)

Support multiple stores

Support multiple languages

Easy to install and configure

Open source 100%

License Certificate valid for 1 live Magento installation and unlimited test

Magento installations (No license key required)



Mega Menu v.3.2

2. HOW TO USE AND CONFIGURE

This section will show you how to configure Mega Menu extension to create your own

menu. It is very fast and easy!

There are two tabs in back-end: Manage Megamenu and Settings.

2.1. Manage Megamenu

In this tab, you can:

- Create Menu items, such as: Home, Categories, Contact, etc.

- Edit Menu items: after creating you can easily edit your menu. It is unnecessary

to have your Developer edit for you like before.

- Find Menu items you want with given filters.

- View the list of menu items or export to CSV/XML file.



Mega Menu v.3.2

2.1.1. Create new Top Menu Item

Go to Back-end > Mega Menu > Manage Megamenu, click on the Add New

Megamenu button, you will be redirected to Edit Mega Menu Item page. This is the

guide to fill in data:

General Information tab:

- Name: Title of the menu item, such as Home or Contact

- Store View: Select store(s) that you want to show this menu item.

- Link: The address of the landing page when Customers click on the menu

item. You can leave blank if the menu item doesn’t lead to any page. For

example, “Contact” menu item allows Customers to fill in contact form right

in the menu without directing Customers to go anywhere.

- Sort Order: The order of the menu item on menu bar.

- Menu Item Icon: This field allows you to upload image for menu items.

Supported file types are .jpeg, .jpg, .gif, .png with recommended size to be

15x15px.

- Menu Type: Select the position that you want to show this menu. To create

Top menu item, please select Top menu for this field

Your menu will be shown as bellow:



Mega Menu v.3.2

- Status: You can enable or disable the menu.

Content Information tab:

In this tab, you can configure the form and detailed information of the menu item.

The detailed information of the menu item includes 4 content blocks: General

Configuration, Main content, Feature content, and Header & Footer Content.

Depending on Content Type you choose, the Main Content will change respectively.

General configuration section:

Before configuring the content, you need to select Width and Alignment Type for

menu information in this section.



Mega Menu v.3.2

There are 4 alignment types for the menu content to appear.

For example:

If you select From left menu, your menu content will appear from the left of menu bar

to the right:

If you select From right menu, your menu content will appear from the right of menu

bar to the left:



Mega Menu v.3.2

If you select From left item, your menu content will appear from the left of menu item

that you are adding:

If you select From right item, your menu content will appear from the right of menu

item that you are adding:

Main Content:

Our extension gives you 7 types of main content, including: Anchor Text, Static

Category Listing, Dynamic Category Listing, Default Category Listing, Product

Listing, Product Grid, Content, Dynamic Products Listing by Category.



Mega Menu v.3.2

Now, let’s move on to each type of menu:

- “Anchor text” type allows you to create a simple menu item. When Customers click

on the menu title, they will be redirected to the page linked to the title.

- Static Category Listing

If you choose Static Category Listing, you need to fill enough information required in

backend:



Mega Menu v.3.2

Especially, you need to configure Arrange Category Items by field to list all items of

each category in one column or automatically arrange items of category in

columns equally.

The menu will be shown in frontend as following:

- Dynamic Category Listing

In version 3.1, a new menu type is added that allows you to flexible design your own

menu. Configure it in backend:

Then, the menu will be shown in frontend as below:



Mega Menu v.3.2

- Default Category Listing

With this type of menu, you just need to choose categories you want to show:

It will be shown in frontend as below



Mega Menu v.3.2

- With “Product listing” types, you need to enter the column number you want to

show, Products Box Title, after that you select products list in the Products field:

And your menu will be shown in frontend as bellow:

- With “Product Grid” type, configuration for this type is similar to Product Listing

type but on menu content this type will show products list you select with more

information such as product image, product name and price:



Mega Menu v.3.2

- If you choose “Content” type, Menu Content field will be shown for you to enter the

information you want to show in main content part.

- Dynamic Products Listing by Category is similar to Dynamic Category Listing.

This menu types allow you to show products filtered by category in a dynamic style:



Mega Menu v.3.2

Featured Content section:

In this section, you must to select width of featured content in menu content.

For example: If menu content width is 100%, width of featured content is 20%, so width

of main content will be 80%.

Our extension gives 3 types of featured content for you to choose, including: Product,

Category and Content.



Mega Menu v.3.2

If you select “Category” or “Product” type, you also need to enter the value into

Featured Column Number field and Featured Box Title field similar to Product

Listing type of Main content. Please refer Main Content section > Product Listing

type for more details.

On your menu, it will show on Feature content part with the information of categories

you selected such as categories list, image of each category or the information of

products list such as name, image, price and short description.

With Product type, it will be shown as bellow:

With Category type, it will be shown as bellow:

If you select “Content” type, it is similar to Content type of Main Content section. It

will show you the Featured Content field to enter the information you want to show

on your menu:



Mega Menu v.3.2

Add content for header, footer

You can configure the information in Header & Footer Content section or make a quick

configuration for content of menu item by clicking on each part of the sample layout

(Header content, Main content, Footer content) and you will be immediately navigated

to its configuration part to add content.



Mega Menu v.3.2

In the text editor form, you can add text and image.

Fill out data you want to show and save your changes. You can see the Menu item is

added to the list in Menu Manager Page as below:

The menu item which is successfully added will be displayed in front-end as follows:

2.1.2. Create new Left Menu Item

Similar to Create new Top Menu, you also must to configure all required fields in

General Information tab and Content tab. Please refer 2.1.1. Create new Top Menu

for details.



Mega Menu v.3.2

* Notes: With left menu, the Alignment Type just has 2 options for you to select. They

are From top menu (the menu content will appear from the top of menu bar down) and

From top item (the menu content will appear from the top of menu item you are

creating). And the width of left menu item is from the right of menu bar to the right of

the page.

On you website, the left menu will be shown as bellow:

2.1.3. Edit Menu Item



Mega Menu v.3.2

If you want to edit any menu item, you just need to click on its row or link Edit in

Action column. The Edit Menu page will be shown for you edit the field in General

Information tab and Content Information tab:

After editing, please remember to save your work by clicking on Save Megamenu

button or Save and Continue Edit button.

2.1.4 Cache Management

Refresh Cache is an innovation in our Mega Menu extension. You can enable/disable

Cache when editing menu items for convenient preview in front end:

You just need to click on the Refresh Menu Cache button; the system will refresh

cache automatically.



Mega Menu v.3.2

2.2. Settings

Go to Back-end > MegaMenu > Settings. This page has 5 sections, including:

General Configuration, Top Menu Configuration, Mobile Version Configuration,

Left Menu Configuration and Customize Styles.

General Configuration:

- Enable Mega Menu: allow you to enable/ disable the extension.

- Menu Effect: allow you to configure the effect of menu. There are three

types:

Fade: menu item will be displayed immediately when you hover

on menu title.

Slide: this effect is similar to Fade but menu item will be

displayed more slowly

Toggle: menu item will only be displayed when you click on menu

title

Top Menu Configuration:



Mega Menu v.3.2

This section includes configurations for the top menu.

- Responsive Menu: allow the display fit with the tab size respectively

- Top Menu alignment: allow you to choose the way to display the top menu

bar. There are three types for you to choose:



Mega Menu v.3.2

Left: your top menu items will be arranged from the left of your site to

the right.

Right: your top menu items will be arranged from the right of your site

to the left.

Justify: menu items will be justified both to the right & left.

- Menu Item height: allow you to configure the height of the top menu

bar.

- Size to change menu to Mobile version: if the device size is lower than

the number you enter into this field, the menu will be changed to Mobile

version.

- The other configurations: allow you to customize your menu items style

to fit with your site, including: menu item size, menu background color,



Mega Menu v.3.2

submenu background color, active menu item background color, menu item

color, active menu text color, submenu box title color, submenu main text

color, submenu link color and text label.

Left Menu Configuration:

Similar to Top Menu Configuration, Left Menu Configuration enables you to customize

the left menu items styles except Menu alignment filed and Menu item height field.

Please refer to Top Menu Configuration part for details.

Mobile Version Configuration:



Mega Menu v.3.2

In this section, you can customize you menu item style when the menu is changed into

mobile version.

This section allows you to flexibly configure mobile menu such as anchor background

color, size to change menu to Mobile version, mobile item font size, text label, mobile

item text color, mobile item background color, active mobile item background color,

mobile submenu box title color, mobile submenu main text color, mobile submenu

main link color.

Besides, in Mobile Effect field, you can configure how to display the menu on mobile

version. There are two options for you to choose: Blind and Slide.



Mega Menu v.3.2

On mobile, your menu bar will be shown as bellow:

When you click on your menu item, it will be displayed:



Mega Menu v.3.2

Customize Styles:

If you want to style your own menu without having to edit CSS file, you have an option

to insert CSS code as below:

You can change any style, any menu position with custom CSS code.

Remember to click on the Save Config button to save your work.

We hope that you will find this user guide helpful during using Magestore Mega Menu

extension.

-------------------------------------END----------------------------------


mega menu - magento › media › catalog › ... · magento mega menu extension (a.k.a magento...

Documents