JA Mega Menu Screenshot based userguide..

[Hung Dinh]

1. Open and compare both the screenshots below. See how the code change renders the frontend menu items.
2. Go through all the screenshots one by one, reading the text all the way.
3. Watch both the video's (links given in the 8th post), to see replication of mega menu, on lines of JA Purity ii demo.
4. Install quickstart on your localhost to see the implementation of codes in the menu items. Play with them to get the hang of it.
5. Once settled, try using more options as given in the 1st post.

[Hung Dinh]

Steps.

1. Open your Main menu.
2. Check any of the parent menu item, click to edit.
3. In the title option. After the title add [ ] (brackets with space), followed by your slogan line.
4. Save and review.

Check the two screenshots below for overview.





The frontend is rendered as follows, if the [ ] and slogan line is added as shown in above image.

[Hung Dinh]

Steps :

Refer above post for details. It applies here too.

[Hung Dinh]

Steps :

1. Item no. 13 in the below screen is the 2nd child of parent item. with code [group=1] in its title. This makes it stand in the 2nd column, with Heading styles. Look second screenshot in this post for results rendered due to code implementation of 1st screenshot in this post.
2. Item no. 14 to 21 are sub-child of child 2 (column 2). See the effect of putting them as sub-child in the 2nd screenshot here.

Code implementation in the menu backend.




Results as seen on the frontend.

[Hung Dinh]

Steps :

1. Create a separator menu item to load Module.
2. Insert code [group=1] to make it stand in the 3rd column.
3. Load module based on its name / id / postion.
4. To load by position > Publish your module to a unique position.
5. Use code [modpos=xxx], where xxx would be your unique mod position. In Demo case the unique position is 'vimeo'.
6. Refer to post No. 9 of this thread, for other options to load module in column.

Code implementation in the menu backend for 3rd column.




Its result in the frontend.

[Hung Dinh]

Video 1 of 2. (watch 2nd part too, link in next Post).

IMPORTANT :

1. Contains narration, Please enable your speakers.
2. Right click the video, to open in YouTube and watch Full Screen.

[Hung Dinh]

Video 2 of 2. (watch 1st part too, link in above Post).

IMPORTANT :

1. Contains narration, Please enable your speakers.
2. Right click the video, to open in YouTube and watch Full Screen.

Now proceed to "Real Guide" in the next post.

[Hung Dinh]

Official JA Megamenu Module Guide

JA Mega Menu is a dropdown menu with following features

1. Display menu items as any other Joomla menu type
2. Submenu can be multi columns with specified number of menu items for each columns
3. 1 or many modules as sub items

Creating menu items using JA megamenu

JA Megamenu supports to load default Joomla menu items or load a module as a menu item. In particular, JA Megamenu allows to create sub-menu with multi-columns. Depending on each type you select, you declare following params when creating menu items:

A. Code / Syntax Usage

The options for a menu item is declared in the menu title. Title of a menu item of the form:

Title [name1=value1 name2=value2] Description

Value of the option contains no white (spaces, tabs ...)

THE MUST HAVE : All the codes mentioned here are to be placed within the brackets, [ ], or else they will rendered as normal text.

The params options include:

1. cols=n

declaration of the sub menu columns

2. modid=ID1,id2 ...

Load modules by ids

3. modname=name1,name2, ...

Load modules by names

4. modpos=pos1,pos2 ...

Load modules by positions

5. group=0 / 1

0 (default): Sub items / modules are shown as a sub menu

1: Sub items / modules are shown as group content

6. width=xxx

width of the sub menu

7. colw=xxx

width of the columns in the sub menu

• This works, when put to the parent Item e.g. >> [cols=2 colw=300]. This will render both the columns for 300px width.
• It needs the cols=x defined in the parent Item. Then only it will render 'x' number of columns to specified width.
• Wrong usage : [colw=300] without defining cols=x before it.
• This will not work if inserted in the sub menu's.
• Correct Usage : [cols=2 colw=300] > This will render 2 columns of 300px width each , [cols=3 colw=200] > this will render 3 columns of 200px width each.

8. colw[i]=xxx

width of the column i in the sub menu collection

• This again will work only when defined in the parent item only. Will not work in sub-menu items.
• It needs the cols=x defined in the parent Item. Then only it will render specified 'x' column to specified width.
• Correct usage : [cols=3 colw1=200 colw2=150 colw3=300]. This will render column 1 with 200px width, column 2 with 150px width and column 3 with 300px width.

9. class=class1,class2 ...

Add them to the class menu item and submenu.

Some Examples :

1. To load a Single Module as a Parent Menu Item. For this example, we take mod_login, which is published to left, Named Login and module id is 58.

Look at the Frontend example :



The code used for this render is

Login [cols=1 modname=login] or Register

Other way of adding the same module is by use of module id. So alternately the following code will also give the same output.

Login [cols=1 modid=58] or Register

A Separator type menu link is created to load the above code.

See the backend shot of the setting :



Important : To load 2 modules next to each other look at the 2nd example below. The above code will not work in such cases. If you use the code [cols=2 modid=58,19], the two modules (with id 58 and 19) will be rendered one after another.

Example 2 : To load 2 or more module next to each other under Parent Item.

Look at the Frontend example :


Look at the Backend settings :

[korb]

How can I implement Mega Menu into old JA Purity template?

I know so far:

-it uses template overide
/html/mod_mainmenu/default.php

-uses it's own js file
js/menu/mega.js

-own css file
css/menu/mega.css

-his own php.class
libs/menu/mega.class.php

what else should I check or modify to accomplish this?
Thanks for any reply,
Danny

[drarvindc]

Dear basskool,

The old JA Purity will not support JA Mega Menu and currently there are no plans to upgrade the same. There is a major difference of the framework used for old purity and this new purity.

In short, JA Purity II is not a version of old purity. Its a totally independent template release. Please dont go by name and the only way to upgrade to purity II is to install it as a new template and reconfigure.

It would be pleasure, if you could test drive the beta version of Purity II and reports the bug, you can also submit your wishlist to the Bug and Issue manager of JA.

Arvind