JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

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

1 de 13

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

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

For using our Mega Menu, you need to do steps by steps: 1. Install Mega Menu: please see Installation 2. Configuration: please see Configuration 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). Its 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 Joomlas module you need to do basic steps: Select a Position and Publish Mega Menu module. Assign the menu that Mega Menull display.

2 de 13

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

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

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.

Choose the color of your menu. We Menu Theme 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)

[Only for Horizontal Menu] Menu Alignment Alignment of your menu. To the Left, Right or Center.

Direction of Sumenu transition effect: Submenu Direction For Horizonal Menu: Up or Down. For Vertical Menu: Left to Right or Right to Left.

[Only for Horizontal Menu] Smartphone If YES, Mega Menu will collapse to a Ready Menu Item when view in Smartphone.

Advanced Options
A suffix to be applied to the css class of Module the module. This allows individual Class Suffix 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.

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

Hiding Time

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

Enable Enable/Disable all menu icons. 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, well 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 a mini description that will be shown as the Add Tag line below the Menu Title. (It works for all Description level of Menu Item.)

Columns

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

If YES, direct child items of current Menu Item will be displayed as a group with current Menu Item. Group 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.

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

Submenu Width

Width of Submenu of current Menu Item.

Submenu Column Width

Defaul width for each Submenus column.

Specify width for individual column. Please use format the same as below: Sumenu Column[i] Width colw2=250 colw3=360

Additional Class

Additional CSS class for applying to current Menu Item.

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. Submenu Content 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 Menull 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: 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

After youve just installed Mega Menu, the menu hasnt 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.

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

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

6 de 13

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

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

First, please take a look at below picture, it shows the structure of the Menu and what itll display. Itll 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, its Joomseller Products. Lets 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 youve 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.

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

Menu drops down and the item Joomseller Products has 3 columns now.

Grouping sub items

In this step, well show you how to group all the sub items of one Menu Item. In this example, its 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.

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

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, were 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 Submenus width for better display*

9 de 13

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

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

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 Submenus 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. Well 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.

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

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

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

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

JSE Mega Menu - Joomseller Wiki

http://wiki.joomseller.com/JSE_Mega_Menu

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.