JUX MEGA MENU

Frontend

Backend

You can setup your menu via some configure of module

Can custom CSS, Enable jQuery if your site hasn't it.

Setup each menu item via Parameters

Server Requirement

Mega menu has several system requirements as follow:

• Apache 2.0 or above - http://www.apache.org recommended: Apache 2.0 or above.
• PHP 5.2.4 or above - http://www.php.net recommended: PHP 5.3 or above.
• MySQL 5.0.4 or above - http://www.mysql.com recommended: MySQL 5.0.4 or above.
• Joomla! 3.x. Please go to - http://www.joomla.org  download Joomla! 3.x.

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 9+, and Safari. JavaScript must be activated.

Download

After purchasing our product, you’ll see the download link at JUX Megamenu product page:

http://www.joomlaux.com/download.html

Note: If there is any problem, please contact us at: http://www.joomlaux.com/support/contact-us.html

Package

After download the extension you will received an installation package named:

Module Installation

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

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

Configuring the Module Options

The JUX Mega Menu has both a module and menu Item combination. This means that you have two separate configurations: one for the module, and then in each menu Item.

• The Module configuration is used for general option of Mega Menu, such as: selecting the module Position, selecting which core Menu the MegaMenu is linked to…
• Each Menu Item Has a cofiguration for settong for a particular item your MegaMenu, such as: description, number of column, submenu width...

Configuring the Module Options

• Step 1: Select a module Position and Publish Mega Menu module and change the access if you need to.
• Step 2: In the module tab, select the core menu that your MegaMenu is liked to and will display.
All of the options are show in the screenshot below and more detail on these is given below the screenshort



 

Module detail

• Select Menu: Please select your menu that will displays on your site
• Animation: The effect for Dropdown of menu when hover an menu item
• Animation Durations(ms): Animation effect duration for dropdown of Mega Menu( in milseconds)
• 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 t. If you choose “all”, all levels will show depending on “ show sub-menu items’ setting
• Menu Theme: Select one of the style for your Menu
• Orientation: Choose Horizontal or Vertical Menu
• Submenu Direction: Direction for submenu, default is Down, if you use the mega menu at bottom of page, you can use direction Up.(NOTE: if you choose Horizontal for Orientation).
  Default is left to right. If place vertical mega menu to the right, this should be right to left (NOTE: if you choose Vertical for Orientation).
• Menu Alignment: The alignment of menu: Left- Right- Center.(NOTE: This configure only show when you choose Horizontal type)
• Responsive Menu: If yes, The menu will collapse to a ‘Navigation’ menu item when resize browser to a low resolution or view on a Smartphone.
• Sticky Menu: Show/Hide sticky menu on desktop. (NOTE: this configure only show when choose Horizontal type)
• Sticky Menu Alignment: Menu will set alignment left or right or center (NOTE: If Show Sticky menu)

 

• Step 3: If you are wanting some css with Your MegaMenu such as color, padding, width,ect..Please write your code in to Custom CSS field .
  Your site is needing which use two Megamenu module in one page, you have to edit the name ID in module ID field for second module.
  Example: with first module has "js-meganav" name ID => second module, please edit which is "js-meganav1"

  

Advaced detail

• Custom CSS: You can add some code that changed some CSS for your menu.
• Module ID: The id of the module, if you use multiple JUX Mega Menu modules on the same page, you have to make sure this field is different for each modules.
• Contain Sticky: Writing class at center for the site (Container)
• Enable Bootrap: Enable Bootstrap. Please enable if your site still has not bootstrap yet.

Configuring the Parameters Plugin

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

Parameters Detail

• Show title:Show/hide Title
• Font Awesome: Set icon for Menu item.
  Example: want to add icon for home => go to http://fontawesome.io/icon/home/ and copy "fa-home" and paste Font Awesome field.
  
• 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: how 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
• Column: Number of Column that the sub-items of this Menu-item will be divided into.
• Group: If set to Yes, This menu Item will display with all the direct sub-items of it.
  
• Submenu Width: Set the width of the Submenu of this Menu Item.
  Example: set 750px for submenu width
  
• Submenu Column Width: Default width for each Submenu’s column (If you do not enter value, it will display with default value: 200px)
• Submenu Column[i] width: Specify width for individual column. Please use format the same as below:
  Colw1=170
  colw2=250
  colw3=220
  colw4=200
  
• Additional class: Additional CSS class to apply to this menu item.
• Submenu Alignment: Set “Auto” to make submenu align automatically, set a specific alignment value to make it align by your choice
• Submenu Content: Choose content to show in submenu of this menu item. You can select module position or module
  
  • 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).

How do add icon to your menu item

Our Mega Menu use “Font Awesome” that set for a Menu Item as the icon. You can add icon for your Menu Item by following these steps:

1.     Go to link :Click Here

2.     Find icon you like and copy name of it, and paste in Font Awesome in parameters. 

Example: Icon for Home Item.



You only copy words fa-home and paste it on Font Awesome in Paramters

How to group menu item 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:

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

Step: 1 Create menu item that is name Monday and choose yes for Group field as image below:

How to group menu item into columns

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

• Step 1 Name this Menu Item, then click Select to choose the Menu Item Type.
  In the Menu Type selecting windows, please choose the External URL in the System Link group.
  
  



• Step 2: Next to Parameters tab, setup some configure such as:
  Group: Yes
  Submenu Content: Module
  Select Modules: Please select your module that want to displays in menu item
  
  

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.

• 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

How to divided multiple columns on one rows

MegaMenu + Descriptions have to 4 childs respectively: Monday, Tuesday, Wednesday, Thursday

Monday, Tuesday, Wednesday, Thursday can have/ have not child.

Step 1: Configure for Mega Menu + Description as image below

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

• click the Parameters (JUX Mega Menu Extended) tab to edit the Mega Menu parameters;
• set the columns’ number to 4. Since we want 4 columns for Monday, Tuesday, Wednesday, Thursday
• 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)

Step 2: Configure for each Child of “MegaMenu + Descriptions”

How to create multiple rows

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.

Create Mega Content item and two children (Mega_content 1 and mega content_2)that is two rows look like image below:

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

Step 2: Setup for Mega_content_1(row 1)

Step 3: Setup for mega_content_2(row 2)

Step 4: Create each column similar this here

How to use two module on one page

• Step 1: Please duplicate megamenu module
• Step 2: Please go to Advanced tab and edit "module ID" field one in two module But only add number after name, not replacing other name
  Example: js-meganav1, js-meganav2....

Q&A

Some Issuse when use megamenu on your site.

• 1. Conflict with Some template

  Your menu have problem with Yootheme template look like as image.

  

  Wrap 6: Go to your file {root}\templates\yoo_infinite\warp\layouts\modules\templates\dropdown.php. You will see content of file

  

  That ul tag make all module when you put to menu position, that will be display to drop-down menu. So you should be change content to

  

  Wrap 7: Go to your file {root}/template/yoo_infinite/layout/widget.php line 77. You will see content of file like below.

  

  Then change content to:

  

• 2. Submenu don't show when reponsive
  
  Please try to this solution. Go to the advanced tab and enable ( if you're off it) or turn off ( if you're turning it) Because can your site has or hasn't load Jquery / can conflict jquery.
  
  
  
  
• 3. If you want to collapse menu than 768px
  Example: You want to collapse menu in 1024px resolution
  Please go to.. modules/mod_jux_megamenu/includes/css.php
  and find line 64, 112 and edit number from 768px to 1024px

How to use "Tabs Style" for sub menu item

Level 1: Create menu item "Mega Content" and setup some config

• Select "Tabs" style
• Enter sub menuitem that will display on "Mega Content" item
• Select Horizontal or Vertical style

Level 2: Create sub menu item that you enter in Tabs name field before. (NOTE: Have to same all words)

Level 3: Create child for each sub menu item. Ex: this child of "Mega Content 1"

Frontend