Professional Documents
Culture Documents
JSE Mega Menu - Joomseller Wiki
JSE Mega Menu - Joomseller Wiki
http://wiki.joomseller.com/JSE_Mega_Menu
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
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
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
Submenu Animation
Showing Time
Set the time (in milisecond) needed for displaying the Submenu.
3 de 13
http://wiki.joomseller.com/JSE_Mega_Menu
Hiding Time
Set the time (in milisecond) needed for hiding the Submenu.
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
http://wiki.joomseller.com/JSE_Mega_Menu
Submenu Width
Specify width for individual column. Please use format the same as below: Sumenu Column[i] Width colw2=250 colw3=360
Additional Class
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)
5 de 13
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
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.
7 de 13
http://wiki.joomseller.com/JSE_Mega_Menu
Menu drops down and the item Joomseller Products has 3 columns now.
8 de 13
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:
9 de 13
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.*
10 de 13
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
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
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