Tutorial Creating a Joomla Megamenu_en

KEIFLIN Cdric 1 Novembre 2013http://www.joomlack.fr http://www.template-creator.com

Thanks

I want to thank everyone who helped and supported me in this project.

Thank you all !

Cdric KEIFLIN


My websites

http://www.joomlack.frJoomlack website with demos and download of the extensions that I develop.

http://tutoriels-joomla.joomlack.frSite dedicated to tutorials (in french) for Joomla! with some documentaiton about howto make your own Joomla template

http://www.template-creator.comComponent Joomla that allows you to create your own template

Who is this documentation for ?

This documentation will guide you through the installation and setting process for themodule Maximenu CK.


CONTENT TABLE I.Installation 6

1.Installing the module Maximenu CK 7 2.Installing the plugin Maximenu Params 8 3.Setting the module First steps 9

II.Menu structure 12 1.Creating a new menu 13 2.Creating the menu items 14

2.1)Root item 14 2.2)Child item for submenu 15 2.3)Complete structure 16

III.Customizing the menu 17 1.Setting the menu colors 18

1.1)Main menu styles 19 1.2)Level 1 items styles (root items) 20 1.3)Submenus styles 21 1.4)Submenu item styles 22 1.5)Menu dimensions 23

2.Setting the submenu tabs 25 2.1)Setting the Full width submenu 26 2.2)Fix the submenu height 28 2.3)Designing the tabs 29

3.Loading a module 33 3.1)Create the module 33 3.2)Set up the link 35

4.Setting the columns 36 5.Adding a video 38 6.Setting the Menu headings 42 7.creating a right aligned item 48 8.Adding icons on the root items 50


Installation Installation

SECTION 1

I. Installation


Installation Installing the module Maximenu CK

1. Installing the module Maximenu CKGo into your website >> Extension Manager to install the extensions

Then choose to Upload Package File, select the file on your computer and click theUpload & Install button


1

2

3

4

Installation Installing the plugin Maximenu Params

2. Installing the plugin Maximenu Params

This plugin is a commercial extension

To get the full power of Maximenu CK and to set up your menu easily and quickly youwill need the plugin Maximenu Params.

You will download the file called package_plugin_doc_x.x.x_jxx_UNZIP_FIRST. Youmust first unzip this file, inside you will find the fileplg_maximenuckparams_x.x.x_jxx.zip.

This is the file that you must install into your Joomla website following the steps 1 4like for the module installation.

After installation, go in the Plugin Manager to publish the plugin.

Search the System plugin called System - Maximenu_CK params and enable it.


Installation Setting the module First steps

3. Setting the module First steps

Go in the Module Manager,

then create a new module >> Maximenu CK

You will arrive on a new window with all the parameters for the module. First you willhave to give it a title.


12

3


The most things to do are to

set the menu do display (5) give a unique ID to the module (6) pusblish it in a template position (7) assign it to all pages (this can be changed later for your needs) (8)


4

5

6

7


As module ID I choose to give maximenuckmain, for the main menu that will show myitems.Then I publish it in position-1 which will show the menu at the top of the page in thetemplate Protostar that I use for my example (installed by default in Joomla 3).

Once this has be done, you can save the module and you will see the menu on your pagelike this :


7


SECTION 2

II. Menu structure


Menu structure Creating a new menu

1. Creating a new menu

We will create a new menu for the maximenu module where we will load the menuitems and create the whole structure.

Go in the Menu Manager >> Add New Menu

Give it a Title and a Menu type, then Save and Close

Now that we have created a new menu, we need to set it up into the module. Go inthe Module Manager >> Top menu - Maximenu CK (that we have created before).Change the Menu to render on megamenu.


4

2

3

1

Menu structure Creating the menu items

2. Creating the menu items

2.1) Root item

Go in the Menu Manager >> Megamenu (to edit the new menu just created)Then click on New to create a new item

You will need to give it a Title, choose the Menu Item Type you want to use for yourmenu. By default it will be placed at the root of the menu.

Then click on Save & Close to save the menu item.

For more informations about the available Menu Item Type, please refer to theJoomla documentation, or use the Joomla Forum


3

2

1


2.2) Child item for submenu

To create a submenu item, repeat the steps 1-3 from the paragraph 2.1).The only difference will be the option to set the Parent Item (step 4). Here you mustselect the parent item under which you want to put the new child item.

Then Save & Close the new menu item.You menu structure should like this :

On the frontend of your website it should look like this :


4


2.3) Complete structure

For the beginning of the menu we need multiple root items and multiple submenus. Ihave created them like this, and we will modify and add the necessary items step bystep.



SECTION 3

III. Customizing the menu


Customizing the menu Setting the menu colors

1. Setting the menu colors

Here you will need the plugin Maximenu Params that you have previously installed.Go in the Module Manager >> Edit your Maximenu CK module. We will use the themeblank to allow us to give the whole styles to the menu from A to Z.Go in the Styles Options >> Menu Theme = blank

Save the module. You will have a total transparent menu on frontend with no styles.Then go in the tab Styles Customization to edit the styles of the menu.



1.1) Main menu styles

In the Mainmenu Level 1 popup, set these styles :

background : YES with color #242424 font style : YES with font color #f5f5f5

Then save the popup, and save the module too.

You should get a menu like this :



1.2) Level 1 items styles (root items)

Use the 2nd button to set the styles of the root items.

Set these styles :

margin: YES with margin-right = 10px, padding top, left and bottom = 15px font style : font size = 0,9em, description size = 50 %, description color =

#e0e0e0

You can add the unit you want in almost fields of the plugin params, even if the suffixis "px". The suffix means that by defaut the unit is on px if nothing else is specified.



1.3) Submenus styles

Click on the Submenu Styles button.

Set these styles :

background: YES with color = #e5e5e5 shadow : YES with color = #646464, width = 3px, vertical offset = 1px, font size =

0,9em, description size = 50 %, description color = #e0e0e0



1.4) Submenu item styles

Edit the Submenu link Styles

Set these styles :

margin : YES with padding top = 8px, padding bottom = 3px, padding left = 10px font style : YES with font size = 0,9em, description size = 50 %, description color

= #e0e0e0

text-shadow : YES with color = #ffffff, width, horizontal and vertical offset =1px



1.5) Menu dimensionsGo back in the first button to edit the Main Menu Styles. Here you can set up thedimensions and margins for the submenus.

Set these styles :

submenu width: 180px top margin submenu : 15px left margin submenu : 170px top margin submenu : -20px



Now your menu should look like this :

This is a good point to start with.


Customizing the menu Setting the submenu tabs

2. Setting the submenu tabs

What we will do now is to create some tabsinto the submenu to give more control and anice look to the menu.

First we need to create a submenu structure, Ihave put 4 links under the 1st tab, then aseparator Item Type for the tab 2 & 3.

On frontend the menu should look like this :



2.1) Setting the Full width submenu

A new option that comes from the version 6.2.3 (for Joomla 2.5, or 7.1.4 for Joomla 3)allows easily to set up a full width submenu. Edit the parent item demo tabs dans give itthe css class fullwidth.

Edit the menu item demo tabs (because you want its submenu to be full width), go inthe Maximenu Params tab, add the fullwidth class to the li.

Save & Close the menu item.That is the only thing that you have to do. The result should be like this :

This only works with the latest version of the themes included into Maximenu CK.


1

3

2


The only problem that you might have is that the margins of the submenus are set to 0.Then the submenu moves up because it erase the gap of 15px that we have setpreviously for the submenu in the Main Menu Styles. To fix this, edit the parent itemdemo tabs and set the Top gap for sublevel in the Maximenu CK Styles Submenu.


4


2.2) Fix the submenu height

To get a nice tab effect we will need to set a fixed height for the submenu, becauseMaximenu CK is not yet able to calculate the correct height as the sub-submenus are notreally placed inside (they are placed with absolute position).

This will force the submenu of demo tabs to be 250px height.



2.3) Designing the tabs

In each tab link (tab 1 , tab 2, tab3) we will add a hover color and remove the shadowfor the sub-submenu to make as if it was on the same level.

Step 1 - colors

Edit the link tab 1 and go in the Maximenu CK Styles Hover State tab, give it abackground color of #f5f5f5.

Then go in the Maximenu CK Styles Submenu tab, force the shadow to 0 (use shadow= YES, and width = 0)Just give it a little border to make a separation between the parent item and thesubmenu. Also give it the same background color as the hover state of the parent#f5f5f5.



Step 2- dimsensions

As we also want the sub-submenu to be the same height of the submenu, we need toforce it to 250px too. Then move it 27px up (27px is the rendered height of the parent item tab 1) to stick itat the top of its parent. Next step, give a width to the submenu, here we will set it at 75 %, then it will take 75%of the whole menu container. As we do that we can define the horizontal gap for thissubmenu of 23,9 %(should be 25 % n theory, but I found that the best value is 23,9 %here).


1

3

2

4


This is what you should obtain at this step :

You must now repeat the step 1 colors and the step 2 dimensions for each tab link(tab 2 and tab 3). The only difference will be the Top gap for sublevel which willincrease.

Horizontal gap for sublevel for the item tab 2 : -57pxHorizontal gap for sublevel for the item tab 3 : -81px



Step 3 Creating the tab items width

As you can see on the previous screenshot there is an unwanted space bewteen the tab1 item and the submenu. We need to give a width to the column that contain the 3 tabitems.Edit the link tab 1, set the option Make a column on YES and give the width of 25 %.

Now you have some nice tabs into your submenu. You can test it, it should work.


Customizing the menu Loading a module

3. Loading a module

In the tab2 item we will add some columns. Foreach column we will load a module with text toshow how it fills the whole are in the submenu.

Create this structure under the tab 2 item, with 5link, as Separator Item Type.

3.1) Create the module

Go in the Module Manager >> New >> Custom HTML module.



Give it a title, a text and publish it. No need to give it a position as we don't want it intothe template.

Save the module and repeat the operation to have 5 modules (to be loaded by our 5menu items). In your Module Manager you should have something like this :



3.2) Set up the link

Now go in the Menu Manager to edit the Link 1 item under tab 2, go in the MaximenuCK Params options. Choose to Load a Module = YES, and select the My Text 1 modulepreviously created.

Then Save & Close the menu item. You must repeat this step to load a module for Link 1 5 under tab 2.

You should have the 5 modules loaded into the menu, but as we don't have created thecolumns for now, they all have 180px width.


2

3

1

Customizing the menu Setting the columns

4. Setting the columns

For each link we will need to create a column, and give it width. The easiest way is toset the column width in percent.

In the Menu Manager to edit the Link 1 item under tab 2, go in the Maximenu CKParams options. Choose to Make a Column = YES and give it 25 % width.For the Link 2 do the same with 25 % width.For the Link 3 do the same with 25 % width.For the Link 4 do the same with 25 % width.For the Link 5 do the same with 100 % width.

And your submenu should look like this :


1

2

3

Customizing the menu Setting the columns


Customizing the menu Adding a video

5. Adding a video

Go in the Module Manager >> New >> Custom HTML module (see step before where it isexplained). To add your own video code you must Toggle the Editor.

Then you will have a simple empty text area.Go on Youtube (or whatever hosting video system you want) to retrieve the code toinsert. You must find the code to integrate your video in a HTML code. Copy this code (3)and paste it into your editor (4). Then give it a title and Save & Close.


1


Here to have the best ratio for my video, I changed the width to 100 % and the heightto 220px. Here the final iframe code


2

3

4

5


Go in the Menu Manager to edit the Link 1 item under tab 3, go in the Maximenu CKParams options. Choose to Load a module = YES and select the My video module.

We need also to set the width of the submenu link, then Make a new Column and give itthe width of 100 %.


5

6

7

8

9


NOTE : to add the iframe code into the tinyMCE editor you must allow it first. Go inthe Plugin Manager >> Editor Plugins >> Editor Tiny MCE and remove iframe from theprohibited elements.

An now you should have a nice video into your submenu :


Customizing the menu Setting the Menu headings

6. Setting the Menu headings

When doing a nice megamenu you probably want to put some headings to highlight yourparagraphs, split your data, or just give a look to the menu. We will see the most easierway to do that.

Create a new Menu Item Type as Text Separator under the link Headings.

You can also use the Menu Heading type, bu this does not exists in Joomla 2.5. Theonly difference will be the HTML tags used, but finally you can get the same result.



In the item options you must set the title, the parent item and publish it.

Then Save & Close, and repeat this step to create all the items under the Headings itemfollowing the structure :



Now you should have a flat submenu list in the menu frontend like this :



Now og in the Module Manager and edit the Maximenu CK module, in the StylesCustomization Options. Click on the Edit the styles : Heading.



In the popup that appears, choose the Type of Heading as separator (this is the MenuItem Type used for the links created previously).

Then you can apply the styles you want to the headings.



And you should have some nice headings into your submenu.

Note that if you want to style each heading separately, you can edit each menu itemand define some specific styles in its own maximenu options.


Customizing the menu creating a right aligned item

7. creating a right aligned item

Go in the Menu Manager and edit the right aligned item

Go in the Maximenu CK Params options ans give the class align_right on the LI element

Then Save & Close the item


Customizing the menu creating a right aligned item

That's it, your item and its submenu should be right aligned.


Customizing the menu Adding icons on the root items

8. Adding icons on the root items

Final step before ending our menu, we will add some nice icons on the root items.Go in the Menu Manager and edit the item demo tabs. Go in the Link Type Options.Then select a Link Image, and Save & Close the menu item.

Repeat this operation for all root items and you will see them directly into the menu.

You can choose the position of the image in the module Advanced Options. You canalso set it for each item individually. For example with a Middle Left position :

The tutorial is ending, I hope that you have learned a lot of things and that you can nowstyles and set your menu correctly.


I. Installation1. Installing the module Maximenu CK2. Installing the plugin Maximenu Params3. Setting the module First steps

II. Menu structure1. Creating a new menu2. Creating the menu items2.1) Root item2.2) Child item for submenu2.3) Complete structure

III. Customizing the menu1. Setting the menu colors1.1) Main menu styles1.2) Level 1 items styles (root items)1.3) Submenus styles1.4) Submenu item styles1.5) Menu dimensions

2. Setting the submenu tabs2.1) Setting the Full width submenu2.2) Fix the submenu height2.3) Designing the tabs

3. Loading a module3.1) Create the module3.2) Set up the link

4. Setting the columns5. Adding a video6. Setting the Menu headings7. creating a right aligned item8. Adding icons on the root items

Documents

Tutorial Creating a Joomla Megamenu_en