JUX Easy Mega Menu

Created: 22/08/2018

Lastest update: 22/08/2018

By: Joomlaux

Need Support

General introduction

What is JUX Easy Mega Menu ?

JUX Easy Mega Menu is an amazing Mega Menu which allows you to customize everything around the menu of your Joomla site in an "EASY" way as exact as its name. The awesome module deserves Joomla users more 11 Beautiful preset styles, unlimited customizations in colors, submenu, top menu, etc. Furthermore, with multi-media and a variety of menu layouts offered, users freely bring images and videos to a submenu, get the option in a vertical or horizontal menu, and much more other surprising features.

 

Key features

  • Users can see the interface right in the back-end, real-time preview in backend
  • Easily edit styles with multiple configurations
  • Ultra customizable: Menu height, Border, Box Shadow, Text Shadow, Corner Radius, Blur Distance, Background Gradient… and more for you to customize!
  • Unlimited colors, You can either use flat color or gradient for your top menu and sub menu
  • 11+ Preset Styles and continue adding:
  • Can insert menu icons , 350+ Font Awesome icons included
  • Many hover effects and custom styles for submenu
  • You can split rows, columns and insert modules in any way you want
  • Drag & Drop Menu Items
  • Use many Positions
  • Show/hide menu any if need
  • Can Custom CSS
  • 100% Responsive or Fix width, height
  • Compatible with Tablet, Smart phone
  • Run on modern browsers (including IE10+)
  • Support multiple languages

Frontend

Front-end custom color, icon menu, border, backdround

 

Mega menu dropdown

 

Multimedia mega menu

 

Custom menu contact

Vertical menu

Mega menu shopping

Preset Style, with 11+ Preset different

 

Backend

Back-end Preview

Select style border, color, box shadow, center menu

Custom font family, icon menu, background color, color menu item, insert module, border submenu and color submenu

Vertical menu and Right to left menu for site have language right to left

List preset style

Tab Config Back-end

Config tab functionality

Config tab menu bar

Config tab top menu

Config tab top menu hover

Config tab sub menu

Config tab sub menu hover

Config tab mobile menu

Config tab advanced

Server Requirement

JUX Easy 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.

The client/browser needs to be capable of accepting Cookies and Cookies must be enabled.

Download

After purchasing our product, you’ll see the download link at JUX Easy Mega Menu 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

Module

mod_jux_easy_megamenu

 

Module Installation

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

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

Extension manager

 

Configuration for Item Menu

- Basic configuration

  • Select a menu: Select a menu
  • Enable Bootstrap 3: Enable jquery boostraps 3
- Hover Buttom Preset Style and select one of the preset styles available and select a preset style below, then click the buttom "preview" button to preview the results in the back-end before the show to the front-end.

After click preview buttom

- Or you can create your own custom preset by selecting the style sheets below then clicking on "Save as Preset Style" to create a new preset style every time you need it..

You can enter name new preset style after click buttom "Save as Preset Style"

After clicking on the buttom "Save as Preset Style" a popup will appear allowing to name the preset style

Menu Toolbox

This toolbox includes all settings of mega menu, just select menu then configure. There are 3 levels of configuration: sub-mega menu setting, column setting and menu item setting.

Sub-mega menu setting

  • Add row: Add a new row to selected submenu
  • Hide when collapse: Hide this column when the menu is collapsed on small screen like on mobile or tablet
  • Submenu Width (px): If Justify option in Alignment is not chosen, you can freely enter width’s value for column. If you don’t enter value in this case, default value will be 200px.
  • Alignment: Alignment for sub-menu. You can choose Align left, right, center or justify (full-width).
  • Extra Class:An extra class to be applied to the css class of this submenu. This allows individual module styling

Column setting

  • Add/remove column: Add a new row to selected submenu
  • Hide when collapse: Hide this column when the menu is collapsed on small screen like on mobile or tablet
  • Width (1-2): Column’s width in submenu. Unit: span (maximum = 12 span, equivalent with full width of sub-menu).
  • Module: This dropdown button will be available when there’s newly added column. You can select a module on your site to display here
  • Extra Class: An extra class to be applied to the css class of this column. This allows individual module styling.

Menu Item Setting

  • Display: Show or Hide this menu Item on Front-End
  • Submenu: Show or Hide Sub-menu of items
  • Group: If YES, the menu item and its sub-items will be grouped and displayed as a column. More Detail.
  • Position: Move menu items between columns. More Detail
  • Extra Class: An extra class to be applied to the css class of this column. This allows individual module styling.
  • Icon: You can enter icon from fontawesome or enter images link Enter icon, you can find icon at fontawesome.
  • Item Caption: Item’s Caption. The caption will be displayed as small lines of text below the Menu item title..

Position Configuration

When you move item’s position, depend on the direction (right or left) there’ll be two cases:
  • - If the item we are moving is on top or buttom, only this item will be moved to another position.:

    • After clicking the left position button

    After clicking the right position button

  • - If we move item which is not on top or buttom (in the middle, for example), when moving this item, not only this item will change position but also other items.

    • After clicking the left position button

    After clicking the right position button

  • - If you’re moving item but there is no column yet, a new column will be automatically created.

    • Group

  • - Item with group

  • - Item without group

    • Title item menu

    Wth config "title" for the menu that changes menu title This means that if you enter a new title, the titile menu will appear at front-end under that config. If you leave blank and do not enter anything, the title menu will get the original title. If you enter space, the title menu will be hidden

    Enter new menu item

    If you enter space, the title menu will be hidden

    Icon menu item

    Icon menu enter fontawesome , you can find icon at fontawesome

    Icon when enter link images

    Drag & Drop Menu Items

    You can drag or drop and order the menu items as you like

    Drag & Drop sub menu item

    Right click on submenu item frame to drag and drop

    Configuration for functionality Menu

    You can set orientation, submenu direction, animation, sticky and RTL (right to left)

     

    Detail
    • Orientation: You can set Horizontal or Vertical for menu
    • Submenu Direction: Set submenu direction Up or Down
    • RTL Direction: Set Right to left for Language use right to left
    • Animation:Set animation style submenu hover: Fading, side, zoom, elastic
    • Duration:Time for active effects
    • Delay:Delay before and after effects
    • Sticky:Set sticky for mega menu
    • Other: Show/hide icon submenu:

    Tab functionaliy custom

    Sticky mage menu

    Vertical menu

    Configuration for Info Tab Options

    This Tab, you can select config custom to top menu

    Border
    • Style: Select type border .
    • Width : Set width border.
    • Color: Set color border.
    • Postitoin: Set positioin border: Top, Left, Right, buttom.
    Border Radius
    • Top Left: Set top left border radius .
    • Top Right : Set top right border radius.
    • buttom Right: Set buttom right border radius.
    • buttom Left: Set buttom left border radius.
    Item Caption
    • Size: Set font-size item caption .
    • Color : Set color item caption.
    Font
    • Font Family: Select font-family with 20+ font different.
    • Font Style : Select font style with 3 type: Noraml, Italic, Oblique.
    • Font Weight : Select font weight with 4 type: Normal, Lighter, Bold, Bolder.
    • Font Size : Select font size top menu.
    • Font Color : Select color top menu.
    • UPPERCASE : Select uppercase top menu.
    Icon
    • Icon Size: Set font size icon.
    • Icon Color: Set color icon.
    • Icon Position : Set postion icon: left, right, above.
    • Font Size : Select font size top menu.
    • Font Color : Select color top menu.
    • UPPERCASE : Select uppercase top menu.
    Shadow
    • Horizontal Length: Set horizontal length box shadow.
    • Vertical Length: Set vertical length box shadow.
    • Size of Shadow: Set blur distance box shadow.
    • Blur Distance : Set size of box shadow.
    • Color: Set color box shadow.
    • Shadow Inset: Set shadow inset box shadow.
    Background
    • Background Type: Set background menubar: Solid and Gradient .
    • Color: Set color to background solid.
    • Gradient Start Color : Set gradient start color.
    • Gradient End Color: Set gradient end color.
    Padding
    • Top: Set pading top.
    • Right: Set pading right.
    • buttom: Set pading buttom.
    • Left: Set pading left.
    Margin
    • Top: Set margin left.
    • Right: Set margin right.
    Top menu custom

    Custom border, box shadow, margin left, border right, padding top

    Configuration for Top Menu Hover

    This Tab, you can choose color for top menu hover

     

      • Text color: Choose color text top menu hover.
      • Item Caption: Choose color item caption top menu hover.
      • Color: Set color to background solid.
      • Gradient Start Color : Set gradient start color.
      • Gradient End Color: Set gradient end color.
      • Icon: Set color icon top menu hover.
      • Border: Set color border top menu hover.
      Custom top menu hover

    Configuration for style Options

    This Tab, you can select config custom to sub menu hover

     

    Config tab
      • Text color: Choose color text sub menu hover.
      • Item Caption: Choose color item caption sub menu hover.
      • Color: Set color to background sub menu hover.
      • Border: Set color border sub menu hover.
      • Icon: Set color icon sub menu hover.
      Sub menu hover custom color, background

    Configuration for style Options

    This Tab, you can custom menu on sreen mobile and table

     

    Config tab
      • Mobile Breakpoint: Set the width of the screen to have the menu displayed in mobile mode.
      • Mobile Menu Bar: Enter title mobile title.
      • Toggle Icon: Enter icon, you can find icon at fontawesome .
      • Mobi Menu Layout: If select "Collapse with toggle button" with then at front-end is displayed toggle button for the mobile menu, if select "Collapse without toggle button" this is for templates or sites that have a dropdown menu mobile, so the menu will be displayed in the position of the icon available. .

    Configuration for Advanced

    You can write some code by custom code field for Easy Mega Menu module Or add the jquery library

    • Custom CSS: Enter code CSS to custom mega menu.
    • CSS Prefix: Input the id of your navigation element will help resolve conflict with your theme.