JSE Mega Menu for K2, VirtueMart, redSHOP, HikaShop, JoomShopping

From Joomseller Wiki
(Redirected from JSE VirtueMart Mega Menu)
Jump to: navigation, search
This document is written for the JSE K2 Mega Menu but you could use it for other extension: VirtueMart, redSHOP, HikaShop, JoomShopping.
All the setting is the same.

Overview

Introduction

JSE K2 Mega Menu is a powerful & responsive Joomla menu module which helps you to flexibly & easily bring K2 categories & subcategories to display in menu.

With JSE K2 Mega Menu, you can make K2 categories and subcategories display as menu items. The load of menu is fast, and you can arrange all items without any difficulty. You can also bring images, videos or modules to menu and JSE Mega Menu will load it flawlessly. Plus, JSE K2 Mega Menu is totally responsive. Be it a PC or mobile's screen, menu always loads and looks nicely on your site.

For admin, the useful toolbox makes it way easier for you to configure menu – your task can be done faster and easier with supported & direct visual demo right below each backend's configuration. So, you can set up menu in backend and directly view how it will display in frontend at the same time & on the same page.

Features

  • Easy to change orientation for menu
  • Easily customize effect & time for submenu to display
  • Customize to every detail of Top Menu, submenu & menu items at ease, such as:
    • Show/hide items, submenu of items
    • Add/remove column in submenu
    • Select module for added column
    • Hover background color
    • Border, padding, Margin
    • Text & hover text color
  • Totally responsive: displays on any devices

Requirements

Server Requirements

Our extension has several system requirements as follow:

(For redShop, Viturmart are Joomla! 2.5)

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

As said on the feature list, this module work with major browsers but there are some requirement.

  • This module require JavaScript so JavaScript must be activated on your browser.
  • This module use HTML5 Video Tags so the video only plays on browser that support HTML5 Video Tags: Internet Explorer 9+, Chrome, Firefox, Safari, Opera... But please note that the each browser support different video format. You can refer here to see the full list: http://www.w3schools.com/html/html5_video.asp
  • The video doesn't run on Mobile, Tablet because those devices don't allow auto play and full screen video.

Installation

  • Go to your administrator site
  • Select “Extensions” => “Extension Manager” in the Top Menu
  • In "Upload Package File" block, please Upload & Install the following extension:
    • mod_jse_k2_megamenu.zip.

Configuration

Our JSE K2 Mega Menu has Module & Menu Item combined with each other. This means that you have two separated configurations in Module and in each Menu Item.

  • The Module configuration is used for general options of Mega Menu, such as: select Position, select Menu…
  • The Menu Item configuration is used for setting particular items in your Mega Menu, such as: description, number of column, width…

Module Configuration

Module is the part that displays your Mega Menu. Just like any normal Joomla module’s configuration, here are the basic steps to do:

  • Select a Position and Publish JSE K2 Mega Menu module.

JSE K2Megamenu detail config.png

  • Assign the pages that Mega Menu will display on.

JSE K2Megamenu Assign the pages.png

  • After that, you can edit menu’s module as you want with the detailed explanation below.

Basic Options

JSE K2Megamenu Basic Options.png

JSE K2Megamenu Basi Option 2.png

Orientation

Choose Horizontal or Vertical menu.

Submenu Direction

Orientation chosen is Horizontal: default is Down. If you use the megamenu at page’s bottom, you need to choose direction as Up Orientation chosen is Verticle: default is Left to Right. If you use the megamenu on the right of your page, you need to choose direction as Right to Left

Animation

Animation effect for the submenu. If the Menu is Horizontal dropdown, you can use choose between: Fading, Slide, Zoom, Elastic or None effect. Other menu only has Fading or None effect.

Animation Duration

The duration time for above animation effect (in miliseconds).

Animation Delay

The delay time before the animation effect start (in miliseconds).

Show Num Items

Set show or hide number of items in category. Except for the Top menu – it always hides the number of items.

Show K2 Items

Set show or hide K2 items in menu. If you choose Hide, the Menu only show the K2’s categories.

Advanced Options

JSE K2Megamenu Advanced Option.png

Custom Css

You can input your customized css here. It’ll affect the Menu.

Module Class Suffix

A suffix to be applied to the css class of the module. This allows individual module styling

Menu Item Configuration

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

JSE K2Megamenu Sub-mega menu setting.png

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

JSE K2Megamenu Column setting.png

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

JSE K2Megamenu Menu Item Setting.png

Display

Show or Hide this menu Item on frontEnd

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 menu item. This allows individual module styling.

Item Caption

Item’s Caption. The caption will be displayed as small lines of text below the Menu item title.

Top Menu Style

JSE K2Megamenu Top Menu Style.png

Background Style

Choose a Background Style. We have Flat style and Gradient style.

Menu Gradient Color

Gradient Color is the new CSS3 color effect for menu. There’re preset gradient colors. Please choose the color that best matches your style, then you can customize it.

Gradient Type

Set gradient type. With Linear you’ll have a simple gradient effect, with Glass you’ll have two gradient colors combined to make a beautiful glass effect.

Gradient Start Color 1

Start color of Gradient 1.

Gradient Start Color 2

Start color of Gradient 2.

Gradient End Color 1

End color of Gradient 1.

Gradient End Color 2

End color of Gradient 2.

Border

Set value for top menu’s border. More Detail

Padding

The CSS padding properties define the space between the element border and the element content.

Margin

The CSS margin properties define the space around elements.

Border Radius

Set border radius for each angle of Top menu. Note: for it to display nicely, you should choose 4 same values.

Dropdown Menu Style

JSE K2Megamenu Dropdown Menu Style.png

Background Color

Choose a background color for the dropdown submenu.

Border

Set border value for the dropdown submenu. More Detail

Padding

Set the padding value. The CSS padding properties define the space between the element border and the element content.

Margin

Set the margin value. The CSS margin properties define the space around elements.

Border Radius

Set border’s radius for each angle of the dropdown submenu. Note: for it to display nicely, you should choose 4 same values.

Box Shadow

Set value for shadow. Please refer to this link for more information:

http://css3gen.com/box-shadow/

Menu Items Style

JSE K2Megamenu Menu Items Style.png

This section includes the same configurations for Items & Dropdown items.

Hover Background Color

Set background color when mouse hovering over.

Border

Set border value for the dropdown submenu. More Detail

Padding

Set the padding value. The CSS padding properties define the space between the element border and the element content.

Margin

Set the margin value. The CSS margin properties define the space around elements.

Text Color

Set text color.

Hover Text Color

Set text color when mouse hovering over.

Tips

When orders in K2 Mega Menu change

K2 Mega Menu module automatically fetchs information from K2 categories and K2 items; also automatically resets order & column to fit the new changes when K2 categories or K2 items have new change

Border

  • Border width: enter value in one of the below formats (note that there’s a space between values):
    • [vertical border] [horizontal border]: 1px 2px
    • [top border] [left border] [bottom border] [right border]: 1px 2px 3px 4px
  • Border Style

JSE K2Megamenu Boder Style.png

  • Border Color

JSE K2Megamenu Border Color.png

Position

Note:

  • 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 bottom, only this item will be moved to another position.

JSE K2Megamenu Item Configuration.png

JSE K2Megamenu Column Configuratioin.png


JSE K2Megamenu Item Configuration 2.png

JSE K2Megamenu Submenu Configuration.png


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


JSE K2Megamenu Item Configuration 3.png

JSE K2Megamenu Column Configuration 2.png

JSE K2Megamenu Item Configuration 4.png

JSE K2Megamenu Item Configuration 5.png


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

Group

Item with group

JSE K2Megamenu Item Configuration 6.png


Item without group

JSE K2Megamenu Item Configuration 7.png

Note for VirtueMart, redSHOP, HikaShop, JoomShopping Megamenu

Hikashop

You must create menu for category in which you want to show product