Halloween Wonderful Party

GET EXTRA 30% OFF

Blog

Your go-to resource for Joomla knowledge, tutorial, information and latest news in Joomla world

How to build a mega menu in Joomla 3.x

ow-to-build-Mega-Menu-in-Joomla-3.x

The menu plays an important part in any website, helping visitors to navigate to anywhere that they want to get to.

A functional and navigable menu promises higher user engagement and conversion rates.

However, the Joomla default system hasn't integrated the function to create a large-sized menu - a mega menu. Therefore, you will need support from 3rd parties to create your own mega menu.

This article will introduce two easy ways to create a mega menu for your Joomla sites, regardless of whether you are beginners or experienced developers. 

Table of Contents

What is a mega menu? 

How to create a Joomla mega menu 

Using Sun framework - Joomla templates 

Mega Menu Builder features 

Creating a mega menu on JSN templates 

Mega menu examples 

Using Joomla mega menu extensions 

Final Thoughts 

What is a mega menu?

A mega menu is a drop-down menu that includes different types of media such as images, videos or links and can be displayed in multiple rows or columns.

A mega menu will allow webmasters to show more items and information than the default Joomla menu. Therefore, it is particularly helpful for large websites such as e-commerce sites with many forms of content.

There are many famous brands in the world that prefer using the mega menu for their website rather than a simple menu. Here are some examples:Ebay Mega menuTopshop Mega menuFossil Mega menu

How to create a Joomla mega menu

Using Sun framework - Joomla templates

Mega Menu Builder features

Sun Framework is a modern and innovative Joomla template framework that has been created by the JoomlaShine team and is used as the foundation of all JoomlaShine templates.

Understanding the critical role of the mega menu and its flexibilities, all of using the Sun framework have integrated a mega menu builder function. 

With this function, Joomla users can easily create a flexible and informative mega menu without any coding knowledge

Here are some highlight features of the Mega Menu Builder from Sun framework:

  • Easy to use: Similarity with Layout Manager in JSN Sun Framework, you can easily build a mega menu with drag & drop 
  • Easy to customize: Your mega menu will be customized easily through some simple clicks with WYSIWYG editor.
  • Multi-column layout support: With all templates based on Bootstrap 3, you can create up to 12 columns in the Mega Menu Builder
  • Unlimited content type support: Various types of content including text, images, videos, module, and more, will be able to be displayed in the mega menu from Sun framework. 
  • Mobile-friendly: The mega menu from Sun Framework is responsive to any kind of mobile device.

Creating a mega menu on JSN templates

First of all, you will need to install and activate JoomlaShine templates on your Joomla site. 

Upon activation, you can go to Templates Style Editing to create a mega menu.

Step 1: Go to Extensions -> Templates -> Click on the Selected Template Select the templateStep 2: Open the Mega Menu tab -> Select Menu -> Select Menu ItemJSN Mega menuStep 3: Drag & drop elements to the mega menuBuilding mega menuWith all JSN templates, it is easy to drag and drop the elements on the left column to the control panel. 

There are five elements which you can add to customize the mega menu:

  • Image: insert an image from your library in megamenu
  • Sub-menu: insert a sub-menu with the selected parental menu
  • Module: insert any Joomla menu in mage menu
  • Module position: insert all modules from the selected position
  • Custom HTML: insert a custom HTML

Step 4: Configure the settings for each element and the mega menu container.

The WYSIWYG editor allows users to select and configure each element as well as the mega menu container in the control panel on the right. Configurate elements

Mega menu examples

Mega Menu with image 

View demo: JSN Shine- Pillow niche - Outfit Menu

Images are commonly used in the mega menus of many e-commerce websites, especially for fashions websites, as they are eye-catching and impress users.Pillow NicheHere is the layout of this mega menu:
Mega menu layoutHow to build

This quick tutorial will show you how to create a simple mega menu with a module and image by using Sun Framework:

Step 1:  Create the mega menu layout

Open a template from Joomlashine -> Mega menu tab, then customize the mega menu layout by drag & drop elements from the left column to the control panel. Mega menu layout

Step 2: Configure each mega menu element 

From the main control panel, you can configure each of the following levels: 

Element -> Column -> Row -> Container

Once you select the level setting, you can change the settings for this on the right-hand column:Element ConfigurationSimilarity, you can set up the image element by selecting an image from the media folder.

Step 3: Save the mega menu. 

When you finish, don't forget to save the mega menu and then back to the front-end to see your result: Mega menu example

Multi-columns with sub-menu

View demo: JSN Attorney - Joomla! MenuAttorney - Joomla! Mega menuHow to build

Using multi-module: creating the layout for this mega menu by dragging & dropping four modules like in the following picture:Mega menu layoutAdvanced layout with different types of content 

View demo: JSN Bakery- Pages MenuMega menu example How to build

Option 1

Using JSN templates: you can easily drag & drop different elements to build the layout as below:

Mega menu layout

Option 2 

Using JSN Page Builder 3 - this extension allows you to create the mega menu as above with only one module. 

Step 1: Download and install Page Builder3 on Joomla site

Step 2: Go to Extensions -> Modules -> New to create a new module

Step 3: Create a new module using Page Builder3

Once you open the ‘New Module’ screen, you will be able to create a new module with JSN PageBuilder3 by following:Page Builder3 Easily drag & drop elements from the left sidebar to the main screen:Create new moduleFor this megamenu example, you can use our pre-built layout with 4 columns and then add image and text elements:Mega menu layoutSelect each element and change the settings on configuration bar on the right:Element configurationStep 4: Present your mega menu in JSN template

Go to Mega Menu tab in your JSN template, then select the menu item.

To present the new module, you will need to drag & drop a module element to the main screen: Module configurationThen, you can configure the module with the right bar.

With JSN PageBuilder 3, you can create any type of mega menu you want.

Using Joomla mega menu extensions

On the other hand, if you consider using extensions to create the mega menu for Joomla websites, you can take a look at these following extensions:

1. DJ- Megamenu

Dj-Megamenu is a smart solution that gives Joomla users the ability to design an advanced mega menu with a diverse range of content. The extension is highly configured and it comes with many handy features.

DJ Megamenu offers Joomla users with both free and paid versions. Depending on your needs, you can decide to pay for this extension or use the free option.DJ-MegaMenu

For this part, we will show you how to create a simple Mega menu with DJ- Megamenu free version.

Step 1: Download DJ- Megamenu 

Step 2: Install the extension

After installing, go to Extensions -> Modules to activate it.Active the moduleStep 3: Open DJ- MegaMenu module and configure it 

Go to Extensions ->  Modules -> New -> Select DJ- MegaMenuDJ-MegaMenu setting

You can see more advanced settings in the Mega Menu Options tab or Mobile Menu Options tab:Mega Menu Options tabHere is the mega menu example in the front-end using Dj- Megamenu extension:Dj-MegaMenu exampleDJ- Megamenu might be a little difficult for Joomla users to use for first-time because it does not come with any guidelines. Moreover, there are quite a lot of limitations in the free edition. 

You will able to use these below features if you pay for the professional edition

Features:

  • Custom themes and continuous updates
  • Change default values of the following options for each menu item: column width in pixels, submenu type and dropdown direction
  • Sticky menu option
  • Responsive and mobile-optimized
  • Allows adding Joomla modules in mega menu
  • Compatible with all mobile devices with dedicated mobile themes

2. JUX Mega Menu

JUX Mega Menu is a drop-down menu module which allows you to display a ton of content in menu items including text, images, module and even modules. This is one of the most complete and responsive extensions for the Joomla mega menu.

Jux Mega Menu is a paid extension with three different packages: Single, Megamenu Membership and Basic membership.Jux MegamenuFeatures:

  • Multiple layouts & colours to match custom themes.
  • Flexible configuration to present menu:

+ Submenu opening direction: Up or Down

+ Submenu opening control by mouse: Click or Hover

+ Auto-align menu: Left, Right or Center.

  • Works perfectly with mobile browsers on the iPhone & iPod, iPad, and Android. 
  • Support all popular web browsers: IE9+, Firefox 2+, Safari 3+, Chrome 8+, Opera 9+ and more. 
  • Supports creating a custom layout with customization guidelines. 
  • Customizable animation with effects: Sliding, fading, zooming, elastic adjustable, speed control, delay time.
  • Fully controllable in the backend.

3. SJ- Megamenu 

SJ- Megamenu is a super flexible mega menu module which is highly customizable to build any custom type of menu. 

With a basic plan from $10, you will able to use a lot of features from SJ- Megamenu which are not only useful but also very easy to set up. 
SJ MegamenuFeatures:

  • User- friendly interface with drag and drop supported.
  • Supports horizontal & vertical mega menu types with 8 pre-designed layout styles.
  • Displays advanced content including HTML, shortcodes, images, banners and more.
  • 100% responsive on any screen sizes.
  • Easily add images, icons or background images from any available folders; insert image URL or directly upload.
  • Various browsers supported, including Chrome, Firefox, Opera, Safari, IE 10+ and more. 

Final Thoughts

The mega menu helps to advance Joomla websites by creating a very large menu with varied content from texts to links, images, icons or videos. 

Let's try our templates to make your Joomla sites become more informative and attractive to audiences. 

Try JSN templates to create a mega menu

How to setup layout in Joomla?
7 FAQs about Joomla login system you need to know
 

Comments (0)

There are no comments posted here yet

Getting Started Series

Step-by-step guide to build quality website with JSN Template

Learn More

Related Posts