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(); ?>