How To Create Mega Menu In Joomla

Mega Menu is a game change feature in JV Framework. This documentation is about how to create a megamenu. You will learn how to build up a mega menu, use mega menu setting effectively.

OVERVIEW

We've probably some of Joomla team to introduce Mega Menu feature with our creative generation JV Framework. It was an instant hit and we have refined the Mega Menu work since then and n our latest JV Framework. In the template user guides, we provide screenshots of how we configure megamenu as in the demo site. But what if you are trying to configure the mega menu without any userguide? That is when this tutorial come and play its role.

Step by step guide - How to build Mega Menu in your Joomla 3x

Things are getting easier with Joomla 3x JV Framework. Just follow the following step to build your Mega Menu from absolutely nothing.

Under Menus categories in the back-end, navigate to Menu Manager > Add New Menu

Then fill in the menu's title, menus' types and it description:

CREATE NEW MENU ITEM

As you already have your new Mega menu, we are going to need categories for it. This can be easily done by navigating to Main Menu -> Mega Menu (or to whatever name you're going to name your new Menu as) -> Then Add New Menu Item .

Repeat this step several times until you get all your desired categories for you Mega Menu. Sub- menu can be created the same way, but you have to correct the Parent Item field to coordinate your sub-menus. So far, we have the following Mega Menu in our frontend.

CONFIG YOUR MEGA MENU

Adding module into your menu item.

What we want to achieve: Display the Latest Articles, Most Read Articles and an ad all are aligned in the same row whenever we hover over Hot News Menu items.

You have to:

  • Navigate to Extensions > Template Manager > Choose your desired template to configure your Mega Menu at (in this case we choose JV Structure - Features)
  • Under Navigation tab, select your Mega Menu name to configure in the Mega Menu Configuration toolbox (in this case we choose MegaStructure as named above)
  • You’ll see all the menu items you have created in the above steps. Select Features menu item to work on.
  • Simply choose Yes for Submenu, set your Submenu width and the alignment for it as your prefer. For this example, we’ll set 820px (or any value you wish, we choose 820px due to the actual JV Structure Mega Menu demo) as the desired width and keep left alignment for it.
  • Time to add row. For Features, we need 1 row only. If you want to add more, please go ahead. Columns are meant to be configured later after you are done with all the required rows.

Let's watch our example for more detail:

We wish you good luck in your work!