Mega menu для joomla

Содержание

Мега меню для joomla
Модуль JUX Mega Menu
Настройка Мега меню
JUX MEGA MENU
General introduction
What is JUX Mega Menu
Features:
NOTE: «Tabs» style for Sub menu item doesn’t support Verticle menu
Frontend
Backend
Server Requirement
Client Requirements
Download
Configuring the Module Options
Configuring the Parameters Plugin
How do add icon to your menu item
How to group menu item into columns
How to group menu item into columns
How to divided multiple columns on one rows
How to create multiple rows
How to use two module on one page
How to use «Tabs Style» for sub menu item

Мега меню для joomla

Мега меню — это многофункциональный модуль горизонтального меню для Joomla, способный наделить меню на вашем сайте самым расширенным функционалом.

Есть один очень хороший и многофункциональный модуль меню для Joomla. Называется данный модуль JUX Mega Menu.

Восхвалять его возможности можно долго.

Возможности данного меню, которые все как один относятся к плюсовым характеристикам:

Он лёгкий и очень шустрый;
Множество настроек как в модуле, так и в пункте меню;
Выбор горизонтального или вертикального отображения;
При прокручивании страницы, меню может залипать вверху или внизу экрана (задаётся в настройках);
Выводит модули в пунктах меню;
Выпадание субменю вниз или вверх, с настройками скорости выпадания;
Вывод подпунктов меню в заданном количестве колонок:;
Поддерживаются изображения для пунктов меню;
Работает на joomla
и много других возможностей.

Настройка Мега меню

Чтобы вывести мегаменю на сайте, вам необходимо зайти в менеджер модулей (Расширения → Менеджер модулей) и нажать кнопку Создать новый модуль.

В открывшейся вкладке Тип модуля, выбрать пункт JUX Mega Menu, после чего попадаем в настройки модуля.

Хочу обратить ваше внимание, что настройки осуществляются в двух разных местах:

в настройках модуля
и в настройках пункта меню.

В настройках модуля: выбор выводимого меню, выбор позиции, цветовая тема, отображение на всех или только на заданных страницах, ориентир отображения (горизонтально или вертикально), уровни отображения пунктов, выравнивание, направление для выпадания, отзывчивость, залипание и некоторые другие.

В настройках пункта меню: содержимое подменю (можно вывести любой модуль или всю позицию из шаблона), подсказка (всплывающий текст при наведении мышкой на пункт меню), вывод субменю, его тип и размеры, количество столбцов для субменю.

Источник

Lastest update: 13/03/2020

General 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. 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.

Guide setup JUX Mega Menu

Frontend

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:

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

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

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).

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:

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

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:

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

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

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вЂќ

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 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.
Some Issuse when use megamenu on your site.

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 \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 /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