JSE Mega Menu - Joomseller Wiki

JSE Mega Menu

From Joomseller Wiki

This document is written base on the Mega Menu version 2.x.x so some screenshot images and text description is not up to date.

We're sorry for this inconvenience and we'll update our document at the soonest.

Contents

1 Overview

1.1 Introduction

1.2 How to use

2 Installation

2.1 Preparing

2.2 Installation

3 Configuration

3.1 Module Options

3.1.1 Basic Options

3.1.2 Advanced Options

3.2 Menu Item Parameters

4 Examples

4.1 How to add icon to your menu item

4.2 How to group menu items into columns

4.2.1 Setting up columns in parent Menu Item

4.2.2 Grouping sub items

4.3 How to load different types of modules into your menu items

4.3.1 Loading regular modules

4.3.2 Loading embedded video

Overview

Introduction

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

Provide multiple layouts & colors to match your template.

Flexible configuration for menu display and performance.

Submenu opening direction: Up or Down

Submenu opening control by mouse Click or Hover

Auto align menu: Left, Right or Center.

Compatibility with mobile browsers: iPhone & iPod, iPad, Android…

Support all major web browsers: IE9+, Firefox 2+, Safari 3+, Chrome 8+, Opera 9+…

Professional source code:

XHTML 1.0 Transitional.

CSS Validates.

Valid 508 Accessibility.

Well-commented style.css and dropdown_megamenu.css file for manual customization.

Support creating custom layout with customization guideline.

How to use

JSE Mega Menu - Joomseller Wiki http://wiki.joomseller.com/JSE_Mega_Menu

1 de 13 20/10/2013 09:55 p.m.

For using our Mega Menu, you need to do steps by steps:

Install Mega Menu: please see Installation1.

Configuration: please see Configuration2.

We also provided Examples to provide some useful trick to use our Mega Menu.

Installation

Preparing

Extract the downloaded package to your computer.

Installation

Go to your administrator site

Select “Extensions” => “Extension Manager” in the Top Menu

In "Upload Package File" block, please Upload & Install the following extensions:

pkg_megamenu_x.x.x.zip (There's only one package for both Joomla: 2.5 and 3.x). It’s REQUIRED

Configuration

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

Item.

The Module configuration is used for general option of Mega Menu, such as: select Position, select Menu…

The Menu Item configuration is used for setting for particular item in your Mega Menu, such as: description, number of column,

width…

Module Options

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

Select a Position and Publish Mega Menu module.

Assign the menu that Mega Menu’ll display.


2 de 13 20/10/2013 09:55 p.m.

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

Basic Options

Select Menu Select a menu for this module to show.

Menu Theme

Choose the color of your menu. We

provide many color: blue, brown, green,

joomseller, orange, red and default.

Menu Type

Choose Horizontal or Vertical Menu. The

remain parameters will change according

to your choose (see picture on the right)

Menu

Alignment

[Only for Horizontal Menu]

Alignment of your menu. To the Left,

Right or Center.

Submenu

Direction

Direction of Sumenu transition effect:

For Horizonal Menu: Up or Down.

For Vertical Menu: Left to Right or

Right to Left.

Smartphone

Ready

[Only for Horizontal Menu]

If YES, Mega Menu will collapse to a

Menu Item when view in Smartphone.

Advanced Options

Module

Class Suffix

A suffix to be applied to the css class of

the module. This allows individual

module styling

Module ID

This is the ID of the module. You should

only change this parameter when you

want more than one Mega Menu on the

same page.

Mouse

Action

Mouse Action to open the Submenu:

Click or Hover over.

Submenu

Animation

Transition effect of the Submenu: Slide,

Fade or No effect.

Showing

Time

Set the time (in milisecond) needed for

displaying the Submenu.


3 de 13 20/10/2013 09:55 p.m.

Hiding TimeSet the time (in milisecond) needed for

hiding the Submenu.

Enable

Menu IconsEnable/Disable all menu icons.

Default

Column

Width

Set default width for a column in

submenu.

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.

Add

Description

Add a mini description that will be shown as the

Tag line below the Menu Title. (It works for all

level of Menu Item.)

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]


4 de 13 20/10/2013 09:55 p.m.

Submenu Width Width of Submenu of current Menu Item.

Submenu Column

WidthDefaul width for each Submenu’s column.

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 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).

Examples

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:

In the setting of a specified menu item, focus on Link Type Options → Link Image1.

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

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

How to group menu items into columns

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:


5 de 13 20/10/2013 09:55 p.m.

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


6 de 13 20/10/2013 09:55 p.m.

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 Joomseller Products

Grouping sub items for Components, Modules and Plugin.

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 Joomseller Products. Let’s click on edit Joomseller

Products 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 Components, Modules and Plugin respectively.

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:


7 de 13 20/10/2013 09:55 p.m.

Menu drops down and the item Joomseller Products 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:


8 de 13 20/10/2013 09:55 p.m.

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

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*


9 de 13 20/10/2013 09:55 p.m.

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 (JSE Mega Menu Extended) tab). Input a short description for this

menu item. I wrote “Login form”

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 Login Menu doing:

*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.


10 de 13 20/10/2013 09:55 p.m.

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


11 de 13 20/10/2013 09:55 p.m.

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:


12 de 13 20/10/2013 09:55 p.m.

Retrieved from "?title=JSE_Mega_Menu&oldid=1616"

This page was last modified on 5 September 2013, at 00:02.

This page has been accessed 7,782 times.

Content is available under GNU Free Documentation License 1.3 or later.


13 de 13 20/10/2013 09:55 p.m.

JSE Mega Menu - Joomseller Wiki

Documents

Transcript of JSE Mega Menu - Joomseller Wiki