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 :

menu result 6

STEP 1 : Menu structure and module options

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.

Do it faster with Menu Manager CK

You can use Menu Manager CK to create your menu faster with drag and drop:

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.

STEP 2 : Activate fullwidth

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.

STEP 3 : Tabs width

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.

STEP 4 : Fullwidth for submenus

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.

STEP 5 : Create columns in submenus

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.

STEP 6 : Load a module, for the fun

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 ! :)

STEP 7 : Bonus effect

Just a little suggestion for your menu, if you want to use this tabs layout, I think that the best result is obtained using a smooth fade effect to reveal the items.

Go in the module options >> Effect options and set them like this

- Effect >> Fade

- Mouseout Duration >> 100

This will make your menu better !

step7 effect options


Outil de création rapide, puissant et responsive.

En savoir plus

Extensions favorites

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449