Hybrid Mega Menu

VP MegaMart comes with its own built in Hybrid Mega Menu system. It does not need any separate menu module for this. Standard Joomla Menu Module gets transformed into a Mega Menu system with the template. 

We call this as Hybrid Mega Menu because it not only has the ability to show modules in menu but also can automatically add VirtueMart Categories to main menu. 

We will now explain how to setup the menu in VM MegaMart template system.

First create a standard Joomla Menu from Joomla Menu Manager. Lets assume that the name of the menu that we have created in Main Menu. Now add the default page of your site to the Main Menu. Lets assume the same of the default menu item is Home

 

Mega Menu Tutorial

 

Now go to Joomla Module Manager and create a Menu Module for the Main Menu and publish the same to Module Position <em">menu. See the screenshots below for better understanding.

 

Mega Menu Tutorial

Mega Menu Tutorial

Mega Menu Tutorial

Mega Menu Tutorial

 

Now to load the VirtueMart Categories to this main menu, create a new VirtueMart Categories Module and publish the same to module position mega-menu. See the below screenshots.

Mega Menu Tutorial

Mega Menu Tutorial

 

Now you have published the Main Menu Module<span"> at module position menu and VirtueMart Categories Module at module position mega-menu. Now go to the VM MegaMart Template settings area from your template manager and enable the option to Load VirtueMart Categories in Main Menu. Read this to know more about this template settings. - Main Menu Settings

After completing the above steps the Main Menu will automatically load the VirtueMart categories in it.

 

Now we also want to load normal Joomla Modules at a sub-menu in Main Menu. To do that go to Module Manager again. And publish the desired module/modules at the module position mega-menu. After publishing the module please note down the Module ID because we will need this afterwards. Lets assume we want to load the Login Module within the Main Menu. To do that create a new Login Module and publish the same to module position mega-menu. See the screenshots below for ready reference.

Mega Menu Tutorial

Mega Menu Tutorial

 

Now we have to create a root level parent menu item below which this this Login Module will be displayed on mouse over. For that go to Main Menu Manager and create a Menu item at main menu root. As your must have noticed that we have set the default number of columns for the mega menu in the  Main Menu Settings. Now if you want you can override that particular number of columns settings for this parent item by providing your desired number in the Note field of the menu this item in this format [col=4]. Here the number 4 indicate the number of columns for this root menu item. You can change this number any number between 1 to 6. Mega Menu can accommodate maximum 6 columns

Lets assume the name of this root level parent menu item as Mega Menu (you can always change the name of this menu item as per your requirement) and see the screenshots below.

 

Mega Menu Tutorial

Mega Menu Tutorial

Mega Menu Tutorial

 

Now create another menu item. Select the Menu Item Type as Text Separator. In the Name field of this menu item enter the ID of the Login Module which we have published at mega-menu module position in this format - [modid=142]. Select the parent item of this menu as previous root level menu item which we have just created (i.e. Mega Menu). See the screenshot below.

 

Mega Menu Tutorial

Mega Menu Tutorial

 

That's it. Now Login Module will be displayed as a sub-menu to the Mega Menu. Similar way you can load any other static module in your Mega Menu.

VP MegaMart comes with Quick Start package. So if you want to see how the demo site is configured please use this package. It will give you an exact clone of the demo site and you will be able to visualize every tit bits of the demo site settings and configurations. 

Top