Create a megamenu with tabs

egamenus are now well implemented in the web design. Sometimes you need to have a more advanced layout using vertical buttons (tabs) on the left of the submenus, and a deeper level with more infos to show. This type of layout allows you to put a lot of informations into your menu, without having a too complex navigation for your users.

Simple example of the principe :

First you must create a menu structure to have 3 levels of items.

1st level : top item in the menu bar

2nd level : left items as tabs

3rd level : submenu that opens under the tabs

Once you have created your menu structure, you must select your menu in the module options.

You must edit your maximenu module and go in the options

- Advanced : Alternative Layout >> megatabs

- Styles options : Menu theme >> tabs (you can use another theme, this one has just a better design for this use)

Here is the first result that you should get.

To make the submenu to be wull width of the menu, you must activate the fullwidth. For this, click on the "Maximenu CK Manu Manager" button in the module to open the popup with the menu structure.

Then click on the button "fullwidth" on the top parent item. This will give the direct submenu the same width as the menu bar.

To correctly render your menu you can set the width of the tabs in the left of the submenu. Just edit the menu structure to create a column. When creating a column (on the first submenu item) you can then define the width.

What you need now is to make your submenus fullwidth to take the rest of the place in the dropdown. Easy as pie, click on the "fullwidth" button for each tab item.

Once your menu is setup to be fullwidth with the tabs layout, you can do what you want in the 3rd level of items like creating the columns and publishing some modules to fill the content.

Still in the Maximenu module Menu manager, you can do it with a simple click.

Just for the fun in this tutorial we will load a module in the submenu to show you how you can do. First you must create your module in the Module Manager of Joomla!.

In the following example I have created a custom module and added an image in the editor. Then I just need to call this module in the menu manager.

This is now the final result that you shall have after following these few steps. I hope that you will enjoy playing with the options to create your own design and menu structure.

Have a good play ! :)