JSE Mega Menu


Often used on e-commerce or large scale websites, mega menus are becoming more and more popular as they offer an effective solution for displaying a lot of content while keeping a clean layout.
JoomSeller’s JSE Mega Menu is a powerful mega menu designed for Joomla site. It helps you bring pictures, videos or even modules onto a submenu.
Features

BackEnd

FrontEnd

Server Requirements

Our extension has several system requirements as follow:

You have to ensure that your system has already installed, XML and Zlib-Support built into your PHP.

PHP should be compiled with support for https (openSSL) and cURL.

PHP Safe Mode should be turned off.

Client Requirements

This module can run well on major browsers such as: Internet Explorer (version 10+), Firefox, Chrome, Opera, and Safari.

The client/browser needs to be capable of accepting Cookies and Cookies must be enabled.

After purchased our product, you’ll see the download link at JSE Mega Menu product page: http://#######.html

Please download the product package:

Note: If there is any problem, please contact us via E-mail: contact@joomseller.com.

Package Preparation

Unpack JSE Mega Menu installation package that you downloaded to your computer. There package in JSE Mega Menu


JSE Mega Menu component Installation

 

Go to Administrator site => “Extension” => “Extension Manager” in the Top Menu.

In “Upload Package File” block, please Upload & Install our extensions:

Browse the JSE Mega Menu installation folder, select pkg_jse_megamenu x.x.x.zip, then choose Upload and Install

Our JSE Mega Menu is module & Menu Item combination, it means that you have two separated configuration: in Module and in each Menu Item.

Module Options

Module is the part that displays your Mega Menu, just likes any normal Joomla’s module you need to do basic steps:

After that, you can set our module as you want with the detailed explanation below

Basic Options

Config option

Select Menu

Select a menu for this module to show.

Start Level

Level to start rendering the menu at. Setting the start and end levels to the same # and setting 'Show Sub-menu Items' to yes will only display that single level.

End Level

Level to stop rendering the menu at. If you choose 'All', all levels will be shown depending on 'Show Sub-menu Items' setting.

Menu Theme

Choose one of the style for your Menu.

Orientation

Choose Horizontal or Verticle Menu

Submenu Direction

Direction of Sumenu transition effect:

  • For Horizonal Menu: Default is Down, if you use the megamenu at bottom of page, you can use direction Up
  • For Vertical Menu: Default is Left to Right. If you place vertical Mega Menu to the right, this should be Right to Left.

Menu Alignment

[Only for Horizontal Menu]

The alignment of menu when sticky: Left - Right - Center.

Responsive Menu

If YES, The menu will collapse to a 'Navigation' menu item when resize browser to a low resolutiion or view on a Smartphone

Responsive Toggle Button

Choose Show or Hide the Toggle Button when Menu collapse on small devices.

Advanced Options

Advanced option

Module ID

The id of the module, if you use multiple JSE Mega Menu modules on the same page, you have to make sure this field is different for each modules.

CSS3 Style(no JS)

Use CSS3 style with animation and disable javascript animation. You should enable this option if your site is using jQuery or mega menu has been conflict with your site script. Supported for all CSS3 browser only. It will not work with IE8 or below.

Trigger

The mouse action to open submenu

Hover Delay Time

Delay time (in milisecond) before submenu transition. This option is for preventing menu reaction when user accidentally move pass the menu

Sticky Menu

If YES, the Menu will stick on the top of the screen when Sticky Menu. This feature need Javascript to work, and it'll not work when the menu collapse

Sticky Menu Alignment

Set position of menu on top page when user scroll page, menu will set alignment left or right or center

Transition

Choose how to display the Submenu with Sliding/Fading effect or None to always display submenu

Trasition On Duration

Set the time (in milisecond) needed for displaying the Submenu

Trasition Out Duration

Set the time (in milisecond) needed for hiding the Submenu

Default Column width

A suffix to be applied to the CSS class of the module. This allows for individual module styling.

Module Class Suffix

Set default width for a column in submenu.

Module Tag

The HTML tag for module

Bootstrap Size

An option to specify how many columns the module will use.

Header Tag

The HTML tag for module header/title

Header Class

The CSS class for module header/title

Module Style

Use this option to override the template style for it's position.

Menu Item Parameters

After you install our Mega Menu, each of a menu item will have an additional parameter pack which named Parameters (JSE Mega Menu Extended)
Please note that in this section, we’ll call “current Menu Item” as the item that the parameter is being set.

Show Title

Show or Hide the Title of current Menu Item.

Item Description

Description added here will be shown as the Tag line below the Menu Item Title. Work for all level of menu.

Tooltip Type

Show tooltip type for this menu item, default is Global in "Link Type Options/Link Title Attribute" option, Select HTML Tooltip to create a HTML Tooltip content

Tooltip content

HTML Tooltip content for this menu item when you selected "HTML Tooltip" for "ToolTip Type" option

Columns

Default value is 1. If you set this parameters to more than 1 columns, our Mega Menu’ll try to evently distribute sub items of current Menu Item into respective columns. You can have as many columns as you need.

Group

If YES, direct child items of current Menu Item will be displayed as a group with current Menu Item.

If NO, direct child items of current Menu Item will be displayed when current Menu Item is selected (by mouse hover over or mouse click).

Combine Columns with Group parameter: if you dynamically combine parameter Columns with Group, you could create a beautiful layout of Sub Menu like the below picture.

For more information please see tutorial: [ How to group menu items into columns]

Submenu Width

Width of Submenu of current Menu Item.

Submenu Column Width

Defaul width for each Submenu’s column (If you do not enter value, it will display with default value: 200px)

Sumenu Column[i] Width

Specify width for individual column. Please use format the same as below:

colw2=250

colw3=360

Additional Class

Additional CSS class for applying to current Menu Item.

Submenu Alignment

Set "Auto" to make submenu align automatically, set a specific aligment value to make it align by your choice.

Submenu Content

Choose content to show with this Menu Item. Beside normal Child menu items, our Mega Menu can load one module or many modules into one Menu Item.

  • Child menu items: Load child menu items as usual.
  • Modules → Select Modules: select Module(s) you want to load.
  • Modules positions → Select Positions: select Position(s) you want, our Mega Menu’ll load all the content of that Position(s).
Menu Item Parameters

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:

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 (JSE 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:

MutilRow

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