Home Home » joomla-extension-document » joomla-extensions » Joomla Mega Menu - Tips and Guide

Joomla Mega Menu - Tips and Guide

10/21/2015
In our previous article about Joomla Mega Menu configuration guide, we have showed you all the basic config for JUX Mega Menu. Today we will continue show you more tips to config for the menu as
This is a step by step guide on how to edit your main menu to add more value to your website.

Basically, we are going to show you examples on:
  • How to add icon to your menu item
  • How to group menu items into columns. (How to display like our Mega Menu)
  • How to load different types of modules into your menu items
  • Please note that we only describe menu item setting that related to our Mega Menu. For the complete understanding of Joomla! Menu Management, please refer to other document as: http://docs.joomla.org/Menu_Management
Before process to the next part, please make sure that you installed and enabled our plugin: System - Megamenu Framework (plg_system_megamenu.zip)

How to add icon to your menu item

Our Mega Menu use Image that set for a Menu Item as the icon. You could add icon for you Menu Item by following these steps:
1. In the setting of a specified menu item, focus on Link Type Options → Link Image



2. Click select: a light box will be displayed.



3. Choose your desired icon or upload a new icon.

How to group menu items into columns

Only Row

After you’ve just installed Mega Menu, the menu hasn’t showed as a complete Mega Menu yet. It will display similar to a regular dropdown menu:



In this section we’ll show you how to display submenu of Megamenu like a complete Mega Menu:



First, please take a look at below picture, it shows the structure of the Menu and what it’ll display. It’ll help you have better imagination of how to group menu items into columns.


There are two things you have to do:
  • Setting up columns in parent Menu Item for Megamenu
  • Grouping sub items for Team Sport, Snow Sports and Extreme Sport.

Setting up columns in parent Menu Item


For setting up columns, you have to setup in the parent Menu Item. In this example, it’s Megamenu. Let’s click on editMegamenu and do step by step as below:

 Step 1 - click the Parameters (JUX Mega Menu Extended) tab to edit the Mega Menu parameters;
Step 2 - set the columns’ number to 3. Since we want 3 columns for Team Sport, Snow Sports and Extreme Sportrespectively.
Step 3 - add a custom width for each column to make them display accurately on your site. (the default column width is 200 pixels as setting in Module Configuration).

When you’ve done, click save and go to Frontend, you will see the menu look like this:


Menu drops down and the item Megamenu has 3 columns now.

Grouping sub items

In this step, we’ll show you how to group all the sub items of one Menu Item. In this example, it’s Components, and it will display one column. Now when you know how to open our Megamenu Parameters, you could go to the setting of one Menu Item and change Group to Yes, like in this picture:



After you click Save, go to Frontend and see your Menu look just like our Demo Mega Menu:

Muti Row

Module can automatically push submenu items down when the number of submenu items exceeds the number of columns previously defined by parent menu. However, to configure your menu as you wish and have a nicely display menu, you should create row and add submenu items to each row instead of using this function.

Suppose that you have a Menu Item called "Parent menu" and submenu items are from A1 to A6. You want to arrange and display them as below:


--> Then after creating joomla menu items, you must have the configuration as the following to have the display like in picture above:

- Demo parent Menu

  • Columns: 1
  • Group: No

- Create 2 submenu items with the following configurations:

  • Detail / Parent Item: Demo parent menu
  • Advanced Options / Parameters / Show title: No
  • Columns: number of columns (or submenus that you want to display in this row) In this example, we have 2 (columns) and 4 (columns)
  • Group: Yes

Detail:

- Submenu Items 1

  • Detail / Parent Item: Demo parent menu
  • Advanced Options / Parameters / Show title: No
  • Menu Title: Row1 (this is not required)
  • Columns: 4

- Submenu Items 1

  • Detail / Parent Item: Demo parent menu
  • Advanced Options / Parameters / Show title: No
  • Menu Title: Row2 (this is not required)
  • Columns: 2

- Menu A1, A2, A3, A4

  • Detail / Parent Item: Row1
  • Advanced Options / Parameters / Show title: No
  • Columns: 1
  • Group: Yes (this is not required)
  • Submenu width: enter your desired width for submenu (any size). In this example, A1 and A2 has different widths which are bigger A3’s & A4’s. The total width of 4 columns is not necessary to be equal with parent menu’s width (they can be smaller).

- Menu A5, A6

  • Detail / Parent Item: Row2
  • Advanced Options / Parameters / Show title: No
  • Columns: 1
  • Group: Yes
  • Submenu width: enter your desired width for submenu (any size).

So, we can sum up 2 notes which are needed to pay attention to:

  • You should configure parent menu with Column = 1
  • Base on your desired arrangement, create correspondingly number of submenus to be rows to contain data.

How to load different types of modules into your menu items

In this section we are going to show you how to load different types of modules as menu items. Basically you can load any type of module:

Regular Joomla! modules: login module, quick contact module, external content feeds… generally all modules you have installed on your site.
Custom HTML: embedded videos, external content, community links…
You can also load unique module positions you have set for your modules – position that are not defined in your template.
Loading regular modules
In this example, we’re going to show you how to load the default Joomla! Login module as a Menu Item. Please create a new Menu Item and do the following steps:

*Please note that sometimes you have to specify setting of Submenu’s width for better display*


Step 1 – name this Menu Item, then click Select to choose the Menu Item Type.
Step 2 – in the Menu Type selecting windows, please choose the External URL in the System Link group.
Step 3 – return to the Menu configuration window, you could setup a menu icon if you like. We showed how to do it in the previous section: [ How to add icon to your menu item]).
Step 4 – select Modules for Submenu Content
Step 5 – on the selection box, find and choose Contact Form module.
Please leave other parameters untouched and click the Save button.

Now you can go to frontend and see how your Contact Form doing:


Special cases: in the top menu module

To display the top menu module in place, you need to add the following config required:

Show title = No
Group = Yes

*Please note that sometimes you have to specify setting of the Submenu’s width for better display.*

Loading embedded video

Now you have known that our Joomla Mega Menu can load installed Modules. How about external resource? Can our Mega Menu load stuffs like Youtube video? Yes, our Mega Menu is powerful enough to do it. We’ll show you now.

First, you need an embedded code from a Youtube video. You could get it by:

Step 1 – Open a video, click Share
Step 2 – Click Embed
Step 3 – Copy the code generated by Youtube.



Second, you have to create a Custom HTML module to help loading Youtube video. Please go to Module Manager, click the New button, then do the steps listed below. (I used JoomlaCK editor instead of default Joomla editor as it can help to insert code easier.)
  • Step 1 – select Custom HTML for module type.
  • Step 2 – input title for module and set Show Title = Hide and Status = Published
  • Step 3 – type in a module position name - we are going use Mega Menu for loading this position so it needs to be unique.
  • Step 4 – in the Custom output area: click the Source button so that you’ll be able to edit source.
  • Step 5 – paste the embedded code that you got from Youtube.
  • Step 6 – click the Source button again to return to normal page. You should choose Format is Normal DIV to avoid some unwanted space.
  • Step 7 – assign this module to display On all page then click Save
Third, create a Menu item to show that video. Please create a new Menu Item and do the below steps. Those are almost the same as the example above, except the last two steps:

*Please note that sometimes you have to specify setting of the Submenu’s width for better display*
  • Step 1 – name this Menu Item, then click Select to choose the Menu Item Type.
  • Step 2 – in the Menu Type selecting windows, please choose the Text Separator in the System Link group.
  • Step 3 – return to the Menu configuration window, you could setup a menu icon if you like. We showed how to do it in the previous section: [ How to add icon to your menu item]).
  • Step 4 – start input Megamenu Parameters (under Parameters (Megamenu Extended) tab). Input a short description for this menu item. I wrote “Vietnam poor children”
  • Step 5 – select Modules for Submenu Content
  • Step 6 – on the selection box, find and choose Login Form module.
  • Please leave other parameters untouched and click the Save button.

Now you can go to frontend and see how your Video displays:


Share this post
Related Posts

Comments[ 0 ]


Đăng nhận xét