Navigation Menu Pro Extension

Navigation Menu Pro Extension User Guide https://www.magebees.com/magento-navigation-menu-proresponsive-mega-menu-accordion-menu-smart-expand-menu.html Navigation Menu Pro Extension By Support Ticket: - http://support.magebees.com, Support Email :- support@magebees.com

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 2

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

Tested in all modern browsers and mobiles. Clean code with a low memory footprint. Easy to install and configure. Detailed Documentation. Open source 100%. 4

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

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

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

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 : 8

Smart Expand Menu o Root Level Item: o Root Level Items on Hover / Active : 9

Mega Menu Item Options o MegaMenu Panel : 10

o First Level Items o First Level Items on Active / Hover 11

o Second Level Items o Second Level Items on Hover / Active 12

o Third Level Items o Third Level Items on Hover / Active 13

Fly out option o Fly out Panel o Fly out Menu Items o Fly out Menu Items on Hover / Active 14

Sub Menu Item Option o First Level Items 15

o Second Level Items o Third Level Items 16

Mobile Menu When you save the Menu group then you will get the Menu Embedded Code tab in the menu group form. You will get Following Screen. 17

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. <?php echo $this->getlayout()->createblock("navigationmenupro/menucreator")- >setgroup_id(1)->settemplate("navigationmenupro/menucreator.phtml")->tohtml();?> 18

Create Menu Items: Go to admin MageBees -> Navigation Menu Pro -> Manage Menu Items -> Manage Menu Items For create menu item. You will get Following Screen. 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. 19

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

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

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

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

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: 24

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 25

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

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: 27

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

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

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

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 : 31

Fly Out Menu: 1. Fly out left alignment : 2. Fly out right alignment : Vertical Mega Menu: 32

Smart Expand: Always Expand: 33

List Item: 34

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: 35

<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();?> 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. <?php echo $this->getlayout()->createblock("navigationmenupro/menucreator")- >setgroup_id(1)->settemplate("navigationmenupro/menucreator.phtml")->tohtml();?> 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. 36

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

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 38