All menu items will be managed by group, for each group, you can easy embed to every position in the frontend. There is no limited the number of groups per Magento store, you can also each group for each store or store view for the difference menu items target link or translation.

1. Create New Group:
Go to MenuPro > Manage Menu Groups > Add New Group

MenuPro > Manage Menu Groups > Add New Menu Group

2. A Menu Group will included options below:

Group details new

Title: enter group name, such as Main menu, Left menu, Top menu …, so you can easy remember them in group manager

Animations : these are CSS3 animations effects, you can click ‘Screenshot‘ to preview the animations effects, also reference on the live demo to understand how it works:

• Fade Effect
• Scale Effect
• Flip Effect
• Slide Effect

Group Positions, click ‘Screenshot‘ to see how it looks.

• Top Menu
• Left Menu
• Right Menu
• Bottom Menu
• Top Fixed Menu
• Left Fixed Menu
• Right Fixed Menu
• Bottom Fixed Menu
• Accordion Left Menu

Of course, you still can embed menu group to any position on frontend, depend on your design. Most popular position are Top or Left sidebar.

Responsive: this is important option for responsive web design.
We have provide demo to see how it works, please check demo in backend if need.
These are 3 first options for responsive web design, and the last 7 options will be only display on table and smartphone devices.

3 options for responsive web design:

• Responsive into Switcher
• Responsive into Stack
• Responsive into Icons Tab

7 options ONLY small devices(Tablet, smartphone):

• Multi-Level push covering
• Multi-Level push overlapping
• Multi-Level Style 1
• Multi-Level Style 2
• Multi-Level Style 3
• Multi-Level Style 4
• Multi-Level Style 5

If you would like to test the last 7 options for customizing stylesheet then go to MenuPro > MCP Setting , turn ON Developer Mode. It will look like this on frontend:

MenuPro > MCP Setting > Developer Mode: Yes

Color schemes:we provide some basic color, you can do the color change in /skin/frontend/base/default/menupro/css/colours.css
This color doesn’t apply for last 7 Responsive types.

Status: enable/disable this group.

3. How to embed menu group on homepage or replace your default menu?

After created group, you will got the embed code as below:

Copy the embed code to replace the default menu or any position where you want to display this menu group. Below are 3 methods with example group_id =3:

1, Insert into Static block or CMS page for developing:

{{block type=”menupro/menu” name=”menupro_group_3″ group_id=”3″ template=”menupro/menupro.phtml” }}

2, Reference via XML layout file( to replace the default menu or other purpose):

<block type=”menupro/menu” name=”menupro_group_3″ ifconfig=”menupro/setting/enable” template=”menupro/menupro.phtml”>
<action method=”setData”><name>group_id</name><value>3</value></action>
</block>

3, Call via frontend template file:

<?php echo $this->getLayout()->createBlock(“menupro/menu”)->setGroup_id(3)->setTemplate(“menupro/menupro.phtml”)->toHtml(); ?>