navigation menu pro extension - magento · how to use navigation menu pro extension create menu...

MageBees a Venture by Capacity Web Solutions Pvt. Ltd.

302, "B" Wing, Shivalik Yash, Near Shastrinagar BRTS, Naranpura, Ahmedabad, Gujarat, INDIA.

Support Ticket: - http://support.magebees.com , Support Email :- [email protected]

Our Websites:- https://www.magebees.com , https://www.capacitywebsolutions.com

Navigation Menu Pro Extension User Guide

https://www.magebees.com/magento-navigation-menu-pro-

responsive-mega-menu-accordion-menu-smart-expand-menu.html

Navigation Menu Pro Extension

By

https://www.magebees.com/magento-navigation-menu-pro-responsive-mega-menu-accordion-menu-smart-expand-menu.html



https://www.magebees.com

https://www.capacitywebsolutions.com/

Navigation Menu Pro Extension By MageBees

2 MageBees a Venture by Capacity Web Solutions Pvt. Ltd.


Support Ticket :- http://support.magebees.com , Support Email :- [email protected]


CONTENT

Introduction 3

Features 3

Configuration Settings 5

How To Use Navigation Menu Pro Extension 6

Create Menu Group 6

Create Menu Items 19

Super Cache (Improves Performance) 30

Sample Menu Display On Frontend 31

FAQ 35

Support 38






INTRODUCTION

This Extension is used for Creating Custom Menu in Magento. Using this extension you can

add different type of menu links like add Category, CMS page link, CMS static block content,

product link, custom URL and different magento’s default user links like My Account, My

Wish list, Login, Logout etc.

Our extension is easy to setup and give many options which are configuring from admin.

EXTENSION FEATURES

Supports unlimited menus each with their own configuration.

Enable and disable menu group.

Supports fly out (traditional) or Mega Menu sub-menu styles with horizontally and

vertically option.

Supports Smart Expand or always expand and list Items sub-menu styles.

Set sub menu item levels (Support Max 5 level).

Easily add, edit, and delete menu/sub menu items from the admin.

Drag gable to re-order menu links in all group.

Supports Up to 8 column option in mega menu and manage each column width.

Add icons/thumbnail image to menu items and manage height/width.

Supports Dynamic Items like Category, CMS Page, CMS Static Block, Product Page,

Custom Url, etc...

Allow add/Show/hide menu link title.

Align sub menus to left or right of parent menu item.

Supports external URL in the menu.

Support displaying right-to-left languages.

Show label to highlight menu item that you want, such as Hot, Sale, 40% OFF, etc.

Customize the style of menu: width, menu color, font color/size/weight, icon image,

etc. Can also add custom class name in each item.

Style your own mega menu without editing css file.

Set Relation in the anchor tag.

Allow to set permission for customer groups.

Set Development Mode On and Off Option form the admin.

Publish Static HTML Menu for decrease Page loading time.

Support multiple stores and multiple website.

Responsive, Touch & Retina Ready.






Tested in all modern browsers and mobiles.

Clean code with a low memory footprint.

Easy to install and configure.

Detailed Documentation.

Open source 100%.






CONFIGURATION SETTINGS

Go to admin → MageBees → Navigation Menu Pro → Navigation Menu Pro Settings.

You will get Following Screen.

Enabled: Enable or disable this module from choosing Yes/No.

jQuery Enabled: Enable or disable jQuery Library from choosing Yes/No.

Developer Mode: Enable or disable Developer mode for this module. Heading: Set

your title for Featured Products.

Publish Static HTML Menu: If Developer Mode is set to "No" and you made any

changes in menu items (like add,add-sub,edit,delete,re-order menu items or change

in the menu group ) then you must PUBLISH Static HTML Menu again so that your

changes reflect in frontend.






How to Use Navigation Menu Pro Extension

Create Menu Group:

Go to admin MAGEBEES -> Navigation Menu Pro -> Manage Groups -> Create New

Group For create group. You will get Following Screen.

Title: Enter group name, such as Main menu, Left menu, Top menu …, so you can easily

remember the menu group.

Show Hide Group Title: You can show and hide the group title on the frontend.

Title Color: Set menu title color.

Title Background Color: Set menu title background color.

Status: You can Enable & Disable the Menu using the menu group.

Menu Type: There are main four menu types available.

Mega-menu.

o Horizontal.

o Vertical.

Smart Expand.

Always Expand.

List Item.






In the Mega-Menu there is one more option Alignment Horizontal and Vertical.

Item Level: Here Menu Item different Option listed below.

Direction: Set Menu Item language direction, Set Left to Right for normal language. Set Right to Left

for Arabic languages. By default we used Left to Right direction.

Image height / Image width: Set Image Height and Width for the menu items.






Please See Below Image for easily Understanding how menu group color options are

working on the forentend:

Mega Menu Options

o Menu Bar :

o Root Level Items :

o Root Level Items on Hover / Active :






Smart Expand Menu

o Root Level Item:

o Root Level Items on Hover / Active :






Mega Menu Item Options

o MegaMenu Panel :






o First Level Items

o First Level Items on Active / Hover






o Second Level Items

o Second Level Items on Hover / Active






o Third Level Items

o Third Level Items on Hover / Active






Fly out option

o Fly out Panel

o Fly out Menu Items

o Fly out Menu Items on Hover / Active






Sub Menu Item Option

o First Level Items






o Second Level Items

o Third Level Items






Mobile Menu

When you save the Menu group then you will get the Menu Embedded Code tab in the

menu group form.







After creating group you will get embedded code. Use this embedded code as per your

requirements. There are below three methods available. Here group_id=1;

1) Insert into Static block or CMS page:

{{block type="navigationmenupro/menucreator"

name="menucreator_group_1" group_id="1"

template="navigationmenupro/menucreator.phtml”}}

2) Reference via XML layout file:

<block type="navigationmenupro/menucreator"

name="menucreator_group_1"

template="navigationmenupro/menucreator.phtml"><action

method="setGroupId"><value>1</value></action><action

method="setCssJs"><value>1</value></action>

</block>

3) Call via frontend template file:

<?php echo $this->getLayout()->createBlock("navigationmenupro/menucreator")-

>setGroup_id(1)->setTemplate("navigationmenupro/menucreator.phtml")->toHtml();?>

Replace magento top menu with Our Navigation Menu: Open Following given file.

app\design\frontend\<yourpackage>\<yourtheme>\template\page\html\header.phtml

file.

Find <?php echo $this->getChildHtml('topMenu') ?> and comment or remove this code and

put below mention code there in the header.phtml file.








Create Menu Items:

Go to admin MageBees -> Navigation Menu Pro -> Manage Menu Items -> Manage

Menu Items For create menu item.


All Menu Item will be managing from navigation menu pro manage menu items. Here you

can add new menu as well as delete and update menu items easily.

You can directly drag and drop menu items from one group to another group.

Also you can change Parent and child menu item using the drag and drop and then

click on the Save Order button which is set at the bottom for change the menu

order.

You can get menu items store view wise by choosing store view from Choose Store

view drop down.

There are two kind of option to delete the menu items.

o Delete only parent item.

o Delete parent and child both menu item.






Following are the list of fields which are used for create menu item with the different

options.

General Options:

Menu Item Type: In the Menu there are different item types available for the

menu items.

o CMS Page: Create link to CMS page. Select CMS page from the “Select Cms

Pages” drop down. Only active / enable CMS page display in the select CMS

pages drop down.

Select Cms Pages: Using “Select Cms Pages” drop down select page

which we want to display in the menu item.






o Category Page: Create link to category page with the following different

options.






Select Category: Select Category from the drop down.

Show Category Image: Select Image type if you want to show

category image in the menu.

Show Auto Sub-Categories: Checked the checkbox if you want to

show sub categories in the menu.

Show Images For Sub-Categories: Checked the checkbox if you want

to Show images in the sub categories also.

Use Custom Image for Main Category: Using this option we can add

custom image for the category menu item by using “Upload Item

Thumbnail” Option from the Advance Options Tab.

o Static Block: Create Link for the Static block item. Using this we can embed a

static block as content. Static block’s Sub Item is not display in the menu.

Select Static Block: Using “Select Static Block” drop down select static

block which we want to display in the menu item.

Show / Hide Menu Title: Using this we can show / hide menu title for

the static block when static block is set as child menu item.

o Product Page: Create menu item for the product page.

Product Id: Enter Product Entity Id.

o Custom URL: Create Link to any custom URL. You can add external and

internal both URL using our custom URL menu item.

Custom URL: Enter custom URL value.

External URL: When you need to add external custom URL then you

need to select checkbox “External URL”. When we need to add

custom magento module URL in the menu from the magento then we

do not want to select External URL check box.

Internal URL: catalog/seo_sitemap/category/. (Do not Select External URL

Checkbox)

External URL: http://www.example.com. (Select External URL Checkbox)

o Alias [href=#]: Create Alias for Just tag href=”#”.

o Group: Create group for make sub column in the mega menu. Group Item’s

Menu title is not display in the front when menu type is mega menu. Group

Item is not used as root menu item.

o My Account: Create link for user account page.

o My Cart: Create link to shopping cart page.

http://www.example.com/






o My Wish list: Create link to default checkout page.

o Login: Create link to login page. If user is not logged in then only this menu

type of menu item will be displayed in the front.

o Logout: Create link to logout action. If user is logged in then only this menu

type of menu item will displayed in the front.

o Register: Create link to register page. If user is not logged in then only this

menu type of menu item will displayed in the front.

o Contact Us: Create link to contact us page.

Status: Status is use for enabled and disabled the menu item in the menu group.

Disabled menu item is not displayed on the frontend. Cloths menu item set as

disable so its display like below:

Menu Title: Menu Title is use for display menu item title on the frontend.

Add Custom Class: Using this you can add the custom class on the menu item.

Assign Menu Group: Using this you can assign the menu group on the menu item. So

that menu item is set in that menu group which is selected in the Assign Menu

Group.

Parent Item: In the parent item display all the menu items base on the selected

group from the Assign menu group drop down. Select menu item in which you want

to add sub item in the menu.

Visible In: Using this you can select multiple store view so current menu item is

visible for the selected store.

Sub Column Layout: This Option will work only in the mega-menu type. Using this

you can set drop down menu layout.

o No Sub Item - Child Menu Item not display in the menu when menu item Sub

Column Layout set as No Sub.

o 1 Column Layout. – Dropdown menu will set fly out menu.

o 2 Column Layouts. – Dropdown menu will set in two columns.

o 3 Column Layouts. – Dropdown menu will set in three columns.

o 4 Column Layouts. – Dropdown menu will set in four columns.

o 5 Column Layouts. – Dropdown menu will set in five columns.

o 6 Column Layouts. – Dropdown menu will set in six columns.

o 7 Column Layouts. – Dropdown menu will set in seven columns.

o 8 Column Layouts. – Dropdown menu will set in eight columns.






When menu item is not root level this option will work for set column width.

Here root item set 8 columns full widths. With all Sub item set 1 column layout.

Mega Menu with Column:






For making Column in the sub menu item you need to use the Group menu type.

Sub Menu Align: With the help of this option you can manage the menu alignment.

Following are the different alignment options examples.

o Left

o Right

o Full Width






Advance Options:

Access Permission: Using this you can set permission on the menu item base on the

magento customer group.

o Public: Every one can access the menu item. When we need to access the menu item for all if customer is logged in or not then assign the menu item Access Permission to the Public.

o Registered: User who is logged in site as customer then only access the menu item. When we need to give permission for the logged customer then assign the menu item Access permission to the Registered.

o Not Logged In: If Customer is not logged in then only access the menu item. o General: When Menu Item Access Permission as General is accessible when

customer is logged in and customer’s group is general. o Wholesale: When Menu Item Access Permission as Wholesale is accessible when

customer is logged in and customer’s group is wholesale. o Retailer: When Menu Item Access Permission as Retailer is accessible when

customer is logged in and customer’s group is retailer.

Target Window: Using this set a target as current window or new window using the

Parent or New window option.

Custom Link Title: Using this set the link title for the SEO.

Set Relation: Using this set a relationship between the current document and the linked document.

Upload Item Thumbnail: Using this you can set the menu item image. When menu item type is not category then only this option is available.

Show/Hide Thumbnail: Using this you can show or hide the uploaded Image on the frontend.






Label Options:

Label Title: Enter label text which you want to use as menu item label.

Label Text Color: Select color from the color picker which you want to use as label

text color.

Label Font Size: Enter label text size on which size you want to display your label in

the menu item.

Label Text Background Color: Select color from the color picker which you want to

use as label text back ground color.

Edit Menu Item:






Add Sub Item:

Note: When you try to use Add Sub then Assign Menu Group and Parent Item drop down is

not displayed because that value is automatically set base on the click on the auto sub

button.

Delete Menu Item:

Delete Parent Item Only: Using this you can delete current item and if it has child element then it will make as root menu item.

Delete Parent and Child Both Menu Items: Using this you can delete current

item and its entire child menu items.






Notes:

1) When Menu item’s Sub Column Layout is set as a No Sub Item then its child

element is not display in the frontend.

2) When Menu item is static block and its column layout is not set then its content is

not display in the frontend.

Set Static block Column Layout For displayed the static block content in the menu.

3) When menu item type is group and you drag that item as root item then it will not

display at the frontend.

Set Group type menu item as child menu item for creating the columns.






Super Cache (Improves Performance)

Set Developer Mode Yes before going to change in the menu item like add, edit, add sub in

the menu item or change menu item option.

If Developer Mode Set as No and you want to make changes at the front end then click on

PUBLISH button for refresh generated html which are use for display menu item for

decrease page load.

Note: Select "Yes" when you are working on staging/development environment. In

production environment(when you make your site live) set this to "No", by doing this it

will generate Static HTML Code for your menu(s).Please note that this will decrease page

load time, and help you in making your site load fast.






Sample Menu Display on Frontend:

Mega Menu o Horizontal

1. Full width mega menu :

2. Display menu item and static block in the menu :

3. Display contact us form with static block in the menu :






Fly Out Menu:

1. Fly out left alignment :

2. Fly out right alignment :

Vertical Mega Menu:






Smart Expand:

Always Expand:






List Item:






FAQ:-

Q-1:- I have installed Navigation Menu Pro Extension Using Magento Connect Manager. But When I am login into my magento admin then it will give following error.

Solution:- This type of issue occurred when Compilation is enabling in your magento store.

Please disable our extension from

<YourMagentoRoot>/app/etc/modules/CapacityWebSolutions_NavigationMenuPro.xml file.

For disable our extension by setting <active>false</active> tag in the above mention file.

Rename var folder to var-old which is available in your Magento Root directory.

Please Re-Compile your magento store. Once Re-Compilation is completed then enable our

extension by setting <active>true</active> tag.

Please refresh all magento cache and Log-out from the admin and Re-Login into the admin.

Q-2:- I have installed Navigation Menu Pro Extension. But When I click on Navigation Menu Pro tab in the configuration page will get a 404. :(.

Solution:- After installing Navigation Menu Pro Extension. Please Logout from admin

account and Re-login and Refresh Cache.

Q-3:- How to display Menu on the Frontend?

Solution:- After creating the groups you will get embed code for that group using that

displayed menu on the frontend. There are 3 methods available. Here group_id=1;

1) Insert into Static block or CMS page:

{{block type="navigationmenupro/menucreator" name="menucreator_group_1"

group_id="1" template="navigationmenupro/menucreator.phtml" }}

2) Reference via XML layout file:






<block type="navigationmenupro/menucreator" name="menucreator_group_1"

template="navigationmenupro/menucreator.phtml"><action

method="setGroupId"><value>1</value></action><action

method="setCssJs"><value>1</value></action></block>

3) Call via frontend template file:


>setGroup_id(1)->setTemplate("navigationmenupro/menucreator.phtml")-

>toHtml();?>

Q-4:- How to replace magento top menu with the Navigation Menu?

Solution:-

Open Following given file.

app\design\frontend\<yourpackage>\<yourtheme>\template\page\html\header.phtml

file.

Find <?php echo $this->getChildHtml('topMenu') ?> and comment or remove this code and put

below mention code there in the header.phtml file.



Here group_id=1; so we need to change the group id when you use this code to display menu

in the front.

Q-5:- Auto show subcategories not working in the menu?

Solution:- Menu Item which is making as the Auto Sub has child menu item then auto sub

is not working in that menu item. Make sure assigned all subcategories activated, and

select YES in “Include in Navigation Menu” option.

Q-6: Any Changes like add, edit, add-sub, delete menu -items or change in the menu group

then it‘s effect are not displayed at the Front?

Solution:- Go to MageBees -> Navigation Menu Pro -> Navigation Menu Pro Setting and

follow below mention points.

Check Developer Mode is set as “No” then click on the “PUBLISH” button for

display new changes on frontend.






If developer mode is set as “Yes” and still new changes are not displayed on the

Frontend then Refresh magento cache From System-> Cache Management.

Q-7: I applied the 6788 patch on my magento setup, a navigationmenupro ďlo does t sho up on home page or any cms page when we call it from the static block or cms page from admin using following method.

{{block type="navigationmenupro/menucreator" name="menucreator_group_1"

group_id="1" template="navigationmenupro/menucreator.phtml" }}

Solution:

Go to admin -> System -> Permissions -> Block

Click on Add New Block and fill details as follow:

Now menu creator block has permission to display.






Thank you!

Do you need Extension Support? Please create support

ticket for quick reply,

http://support.magebees.com/

Do you have any suggestions? Please contact us,

https://www.magebees.com/contact-us

http://support.magebees.com/

https://www.magebees.com/contact-us

navigation menu pro extension - magento · how to use navigation menu pro extension create menu...

Documents