Jux Joomla

General introduction

All things considered, JUX Facebook feed completes a series of Joomla social extensions with the target in smartly integrate social channels to the Joomla site. JUX Instagram Feed, by JoomlaUX - Joomla Extension Directory So much proud to announce that JUX Instagram Feed has released with lots of attractions inside. This module dedicates users to a beautiful display of Instagram images on the website.

What is JUX 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.JoomlaUX’s JUX 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.

NOTE: 'Tabs' style for Sub menu item doesn't support Verticle menu

Guide setup JUX Mega Menu
When you want display your menu simple.
Use Verticle tabs style
Use Horizontal tabs style
Submenu can setup multi columns
Submenu can setup multi rows
Load module for submenu

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:

Jux Joomla

Jux Joomla Template

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

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:

Package

pkg_jux_megamenu.zip

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
The module actually displays your MegaMenus. As with any core Joomla module you need to do the following basic steps:
  • 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).
Joomla

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 Mondayand choose yes for Group field as image below:


Step : 2 Created children for Monday item.(Such as:Hawaii Five-0, House, Castle,How I Met Your Mother)

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
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.
    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
Please leave other parameters untouched and click the Save button.
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

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

NOTE: Please set 'Submenu width' > width of(column 1+ column 2 +column 3 +column 4)

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”

Create each column similar

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:

Jux joomla tutorial

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

Step 1:Setup for Mega Content

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.

    I'll tell you how to fix that problem. You must be change style of template. And if you want to do it, i'll tell you how to fix that problem, then your menu will be display look like.

    Wrap 6: Go to your file {root}templatesyoo_infinitewarplayoutsmodulestemplatesdropdown.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

Example:

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
Jux joomla template

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

Jux Joomla Application

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

Jux Joomla Tutorial

Frontend