You are on page 1of 50

KEIFLIN Cdric 1 Novembre 2013

http://www.joomlc!."r http://www.templte#cretor.com

KEIFLIN Cdric 2 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com

Thanks
I want to thank everyone who helped and supported me in this project.
Thank you all !
Cdric KEIFLI
KEIFLIN Cdric 3 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com

!y we"sites
http#$$www.joomlack.%r
&oomlack we"site with demos and download o% the e'tensions that I develop.
http#$$tutoriels(joomla.joomlack.%r
)ite dedicated to tutorials *in %rench+ %or &oomla! with some documentaiton a"out how
to make your own &oomla template
http#$$www.template(creator.com
Component &oomla that allows you to create your own template
,ho is this documentation %or -
This documentation will .uide you throu.h the installation and settin. process %or the
module !a'imenu CK.
KEIFLIN Cdric $ Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com

CONTENT TABLE

I.Installation 6
1.Installing the module Maximenu CK 7
2.Installing the plugin Maximenu Params 8
3.etting the module ! "irst steps #
II.Menu stru$ture 12
1.Creating a ne% menu 13
2.Creating the menu items 1&
/.0+1oot item 02
/./+Child item 3 %or su"menu 04
/.5+Complete structure 06
III.Customi'ing the menu 17
1.etting the menu $olors 18
0.0+!ain menu styles 07
0./+Level 0 items styles *root items+ /8
0.5+)u"menus styles /0
0.2+)u"menu item styles //
0.4+!enu dimensions /5
2.etting the su(menu ta(s 2)
/.0+)ettin. the Full width su"menu /6
/./+Fi' the su"menu hei.ht /9
/.5+:esi.nin. the ta"s /7
3.*oading a module 33
5.0+Create the module 55
5./+)et up the link 54
&.etting the $olumns 36
).+dding a ,ideo 38
6.etting the Menu headings &2
7.$reating a right aligned item &8
8.+dding i$ons on the root items )-
KEIFLIN Cdric % Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
I&'tlltio& I&'tlltio&
SECTION 1
I. Installation
KEIFLIN Cdric ( Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
I&'tlltio& I&'tlli&) the mod*le +,ime&* CK
1. Installing the module Maximenu CK
;o into your we"site << .xtension Manager to install the e'tensions
Then choose to /pload Pa$kage "ile= select the %ile on your computer and click the
/pload 0 Install "utton
KEIFLIN Cdric - Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
1
2
3
4
I&'tlltio& I&'tlli&) the pl*)i& +,ime&* .rm'
2. Installing the plugin Maximenu Params
This plu.in is a commercial e'tension
To .et the %ull power o% !a'imenu CK and to set up your menu easily and >uickly you
will need the plugin Maximenu Params.
?ou will download the %ile called pa$kage1plugin1do$1x.x.x12xx1/34IP1"I5T. ?ou
must %irst un@ip this %ile= inside you will %ind the %ile
plg1maximenu$kparams1x.x.x12xx.'ip.
This is the %ile that you must install into your &oomla we"site %ollowin. the steps 0 3 2
like %or the module installation.
A%ter installation= .o in the Plugin Manager to pu"lish the plu.in.
)earch the )ystem plu.in called 6stem 7 Maximenu1CK params and ena"le it.
KEIFLIN Cdric / Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
I&'tlltio& 0etti&) the mod*le 1 Fir't 'tep'
3. Setting the module First steps
;o in the Module Manager=
then create a new module << Maximenu CK
?ou will arrive on a new window with all the parameters %or the module. First you will
have to .ive it a title.
KEIFLIN Cdric 2 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
1
2
3
I&'tlltio& 0etti&) the mod*le 1 Fir't 'tep'
The most thin.s to do are to
set the menu do display *4+
.ive a uni>ue I: to the module *6+
pus"lish it in a template position *B+
assi.n it to all pa.es *this can "e chan.ed later %or your needs+ *9+
KEIFLIN Cdric 10 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
4
5
6
7
I&'tlltio& 0etti&) the mod*le 1 Fir't 'tep'
As module I: I choose to .ive maximenu$kmain= %or the main menu that will show my
items.
Then I pu"lish it in position71 which will show the menu at the top o% the pa.e in the
template Protostar that I use %or my e'ample *installed "y de%ault in &oomla 5+.
Cnce this has "e done= you can save the module and you will see the menu on your pa.e
like this #
KEIFLIN Cdric 11 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
7
I&'tlltio& 0etti&) the mod*le 1 Fir't 'tep'
SECTION 2
II. !enu structure
KEIFLIN Cdric 12 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
+e&* 'tr*ct*re Creti&) &ew me&*
1. Creating a new menu
,e will create a new menu %or the ma'imenu module where we will load the menu
items and create the whole structure.
;o in the Menu Manager << +dd 3e% Menu
;ive it a Title and a Menu t6pe8 then a,e and Close
ow that we have created a new menu= we need to set it up into the module. ;o in
the Module Manager << Top menu 7 Maximenu CK *that we have created "e%ore+.
Chan.e the Menu to render on megamenu.
KEIFLIN Cdric 13 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
4
2
3
1
+e&* 'tr*ct*re Creti&) the me&* item'
2. Creating the menu items
2.1) Root item
;o in the Menu Manager << Megamenu *to edit the new menu just created+
Then click on 3e% to create a new item
?ou will need to .ive it a Title= choose the Menu Item T6pe you want to use %or your
menu. Dy de%ault it will "e placed at the root o% the menu.
Then click on a,e 0 Close to save the menu item.
For more in%ormations a"out the availa"le !enu Item Type= please re%er to the
&oomla documentation= or use the &oomla Forum
KEIFLIN Cdric 1$ Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
3
2
1
+e&* 'tr*ct*re Creti&) the me&* item'
2.2) Child item for submenu
To create a su"menu item= repeat the steps 0(5 %rom the para.raph /.0+.
The only di%%erence will "e the option to set the Parent Item *step 2+. Eere you must
select the parent item under which you want to put the new child item.
Then a,e 0 Close the new menu item.
?ou menu structure should like this #
Cn the %rontend o% your we"site it should look like this #
KEIFLIN Cdric 1% Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
4
+e&* 'tr*ct*re Creti&) the me&* item'
2.3) Complete structure
For the "e.innin. o% the menu we need multiple root items and multiple su"menus. I
have created them like this= and we will modi%y and add the necessary items step "y
step.
KEIFLIN Cdric 1( Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
+e&* 'tr*ct*re Creti&) the me&* item'
SECTION 3
III. Customi@in. the menu
KEIFLIN Cdric 1- Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the me&* color'
1. Setting the menu colors
Eere you will need the plu.in !a'imenu Farams that you have previously installed.
;o in the Module Manager << Edit your Maximenu CK module. ,e will use the theme
(lank to allow us to .ive the whole styles to the menu %rom A to G.
;o in the t6les 9ptions << Menu Theme H "lank
a,e the module. ?ou will have a total transparent menu on %rontend with no styles.
Then .o in the ta" )tyles Customi@ation to edit the styles o% the menu.
KEIFLIN Cdric 1/ Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the me&* color'
1.1) Main menu styles
In the !ainmenu 3 Level 0 popup= set these styles #
"ack.round # ?E) with color I/2/2/2
%ont style # ?E) with %ont color I%4%4%4
Then save the popup= and save the module too.
?ou should .et a menu like this #
KEIFLIN Cdric 12 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the me&* color'
1.2) Level 1 items styles (root items)
Jse the /nd "utton to set the styles o% the root items.
)et these styles #
mar.in# ?E) with mar.in(ri.ht H 08p'= paddin. top= le%t and "ottom H 04p'
%ont style # %ont si@e H 8=7em= description si@e H 48 K= description color H
Ie8e8e8
?ou can add the unit you want in almost %ields o% the plu.in params= even i% the su%%i'
is Lp'L. The su%%i' means that "y de%aut the unit is on p' i% nothin. else is speci%ied.
KEIFLIN Cdric 20 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the me&* color'
1.3) ubmenus styles
Click on the u(menu t6les "utton.
)et these styles #
"ack.round# ?E) with color H Ie4e4e4
shadow # ?E) with color H I626262= width H 5p'= vertical o%%set H 0p'= %ont si@e H
8=7em= description si@e H 48 K= description color H Ie8e8e8
KEIFLIN Cdric 21 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the me&* color'
1.!) ubmenu item styles
Edit the u(menu link t6les
)et these styles #
mar.in # ?E) with paddin. top H 9p'= paddin. "ottom H 5p'= paddin. le%t H 08p'
%ont style # ?E) with %ont si@e H 8=7em= description si@e H 48 K= description color
H Ie8e8e8
te't(shadow # ?E) with color H I%%%%%%= width= hori@ontal and vertical o%%set H
0p'
KEIFLIN Cdric 22 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the me&* color'
1.") Menu dimensions
;o "ack in the %irst "utton to edit the Main Menu t6les. Eere you can set up the
dimensions and mar.ins %or the su"menus.
)et these styles #
su"menu width# 098p'
top mar.in su"menu # 04p'
le%t mar.in su"menu # 0B8p'
top mar.in su"menu # (/8p'
KEIFLIN Cdric 23 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the me&* color'
ow your menu should look like this #
This is a .ood point to start with.
KEIFLIN Cdric 2$ Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the '*bme&* tb'
2. Setting the sumenu tas
,hat we will do now is to create some ta"s
into the su"menu to .ive more control and a
nice look to the menu.
First we need to create a su"menu structure= I
have put 2 links under the 0st ta"= then a
separator Item Type %or the ta" / M 5.
Cn %rontend the menu should look like this #
KEIFLIN Cdric 2% Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the '*bme&* tb'
2.1) ettin# the $ull %idth submenu
A new option that comes %rom the version 6./.5 *%or &oomla /.4= or B.0.2 %or &oomla 5+
allows easily to set up a %ull width su"menu. Edit the parent item demo ta(s dans .ive it
the css class :ull%idth.
Edit the menu item demo ta(s *"ecause you want its su"menu to "e %ull width+= .o in
the Maximenu Params ta"= add the :ull%idth class to the li.
a,e 0 Close the menu item.
That is the only thin. that you have to do. The result should "e like this #
This only works with the latest version o% the themes included into !a'imenu CK.
KEIFLIN Cdric 2( Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
1
3
2
C*'tomi3i&) the me&* 0etti&) the '*bme&* tb'
The only pro"lem that you mi.ht have is that the mar.ins o% the su"menus are set to 8.
Then the su"menu moves up "ecause it erase the .ap o% 04p' that we have set
previously %or the su"menu in the !ain !enu )tyles. To %i' this= edit the parent item
demo ta"s and set the Top gap :or su(le,el in the Maximenu CK t6les ! u(menu.
KEIFLIN Cdric 2- Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
4
C*'tomi3i&) the me&* 0etti&) the '*bme&* tb'
2.2) $i& the submenu hei#ht
To .et a nice ta" e%%ect we will need to set a %i'ed hei.ht %or the su"menu= "ecause
!a'imenu CK is not yet a"le to calculate the correct hei.ht as the su"(su"menus are not
really placed inside *they are placed with a"solute position+.
This will %orce the su"menu o% demo ta(s to "e /48p' hei.ht.
KEIFLIN Cdric 2/ Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the '*bme&* tb'
2.3) 'esi#nin# the tabs
In each ta" link *ta" 0 = ta" /= ta"5+ we will add a hover color and remove the shadow
%or the su"(su"menu to make as i% it was on the same level.
tep 1 ( colors
Edit the link ta( 1 and .o in the Maximenu CK t6les ! ;o,er tate ta"= .ive it a
"ack.round color o% I%4%4%4.
Then .o in the Maximenu CK t6les ! u(menu ta"= %orce the shadow to 8 *use shadow
H ?E)= and width H 8+
&ust .ive it a little "order to make a separation "etween the parent item and the
su"menu. Also .ive it the same "ack.round color as the hover state o% the parent
I%4%4%4.
KEIFLIN Cdric 22 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the '*bme&* tb'
Step 2- dimsensions
As we also want the su"(su"menu to "e the same hei.ht o% the su"menu= we need to
%orce it to /48p' too.
Then move it /Bp' up */Bp' is the rendered hei.ht o% the parent item ta( 1+ to stick it
at the top o% its parent.
e't step= .ive a width to the su"menu= here we will set it at B4 K= then it will take B4K
o% the whole menu container. As we do that we can de%ine the hori@ontal .ap %or this
su"menu o% /5=7 K*should "e /4 K n theory= "ut I %ound that the "est value is /5=7 K
here+.
KEIFLIN Cdric 30 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
1
3
2
4
C*'tomi3i&) the me&* 0etti&) the '*bme&* tb'
This is what you should o"tain at this step #
?ou must now repeat the step 1 ! $olors and the step 2 ! dimensions %or each ta" link
*ta" / and ta" 5+. The only di%%erence will "e the Top .ap %or su"level which will
increase.
;ori'ontal gap :or su(le,el %or the item ta( 2 # (4Bp'
;ori'ontal gap :or su(le,el %or the item ta( 3 # (90p'
KEIFLIN Cdric 31 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the '*bme&* tb'
Step 3 Creating the tab items width
As you can see on the previous screenshot there is an unwanted space "ewteen the ta(
1 item and the su"menu. ,e need to .ive a width to the column that contain the 5 ta"
items.
Edit the link ta( 18 set the option Make a $olumn on <. and .ive the width o% /4 K.
ow you have some nice ta"s into your su"menu. ?ou can test it= it should work.
KEIFLIN Cdric 32 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* Lodi&) mod*le
3. !oading a module
In the ta"/ item we will add some columns. For
each column we will load a module with te't to
show how it %ills the whole are in the su"menu.
Create this structure under the ta" / item= with 4
link= as )eparator Item Type.
3.1) Create the module
;o in the Module Manager << 3e% << Custom ;TM* module.
KEIFLIN Cdric 33 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* Lodi&) mod*le
;ive it a title= a te't and pu"lish it. o need to .ive it a position as we donNt want it into
the template.
)ave the module and repeat the operation to have 4 modules *to "e loaded "y our 4
menu items+. In your !odule !ana.er you should have somethin. like this #
KEIFLIN Cdric 3$ Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* Lodi&) mod*le
3.2) et up the lin)
ow .o in the Menu Manager to edit the *ink 1 item under ta( 2= .o in the !a'imenu
CK Farams options. Choose to *oad a Module H <.= and select the M6 Text 1 module
previously created.
Then a,e 0 Close the menu item. ?ou must repeat this step to load a module %or *ink 1
! ) under ta( 2.
?ou should have the 4 modules loaded into the menu= "ut as we donNt have created the
columns %or now= they all have 098p' width.
KEIFLIN Cdric 3% Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
2
3
1
C*'tomi3i&) the me&* 0etti&) the col*m&'
". Setting the columns
For each link we will need to create a column= and .ive it width. The easiest way is to
set the column width in percent.
In the Menu Manager to edit the *ink 1 item under ta( 2= .o in the !a'imenu CK
Farams options. Choose to Make a Column H <. and .ive it 2) = width.
For the Link / do the same with /4 K width.
For the Link 5 do the same with /4 K width.
For the Link 2 do the same with /4 K width.
For the Link 4 do the same with 088 K width.
And your su"menu should look like this #
KEIFLIN Cdric 3( Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
1
2
3
C*'tomi3i&) the me&* 0etti&) the col*m&'
KEIFLIN Cdric 3- Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 4ddi&) video
5. Adding a video
;o in the Module Manager << 3e% << Custom ;TM* module *see step "e%ore where it is
e'plained+. To add your own video code you must Toggle the .ditor.
Then you will have a simple empty te't area.
;o on ?outu"e *or whatever hostin. video system you want+ to retrieve the code to
insert. ?ou must %ind the code to inte.rate your video in a ET!L code. Copy this code *5+
and paste it into your editor *2+. Then .ive it a title and a,e 0 Close.
KEIFLIN Cdric 3/ Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
1
C*'tomi3i&) the me&* 4ddi&) video
Eere to have the "est ratio %or my video= I chan.ed the width to 088 K and the hei.ht
to //8p'. Eere the %inal i%rame code
<iframe width="100%" height="220" src="//www.youtube.com/embed/5N4lr!1h4g"
frameborder="0" allowfullscree"#</iframe#
KEIFLIN Cdric 32 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
2
3
4
5
C*'tomi3i&) the me&* 4ddi&) video
;o in the Menu Manager to edit the *ink 1 item under ta( 3= .o in the !a'imenu CK
Farams options. Choose to *oad a module H <. and select the M6 ,ideo module.
,e need also to set the width o% the su"menu link= then Make a ne% Column and .ive it
the %idth o: 1-- =.
KEIFLIN Cdric $0 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
5
6
7
8
9
C*'tomi3i&) the me&* 4ddi&) video
CTE # to add the i%rame code into the tiny!CE editor you must allow it %irst. ;o in
the Flu.in !ana.er << Editor Flu.ins << Editor 3 Tiny !CE and remove i%rame %rom the
prohi"ited elements.
An now you should have a nice video into your su"menu #
KEIFLIN Cdric $1 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the +e&* hedi&)'
6. Setting the Menu headings
,hen doin. a nice me.amenu you pro"a"ly want to put some headin.s to hi.hli.ht your
para.raphs= split your data= or just .ive a look to the menu. ,e will see the most easier
way to do that.
Create a new Menu Item T6pe as Text eparator under the link ;eadings.
?ou can also use the !enu Eeadin. type= "u this does not e'ists in &oomla /.4. The
only di%%erence will "e the ET!L ta.s used= "ut %inally you can .et the same result.
KEIFLIN Cdric $2 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the +e&* hedi&)'
In the item options you must set the title= the parent item and pu"lish it.
Then a,e 0 Close= and repeat this step to create all the items under the ;eadings item
%ollowin. the structure #
KEIFLIN Cdric $3 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the +e&* hedi&)'
ow you should have a %lat su"menu list in the menu %rontend like this #
KEIFLIN Cdric $$ Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the +e&* hedi&)'
ow o. in the Module Manager and edit the Maximenu CK module= in the t6les
Customi'ation Cptions. Cli$k on the .dit the st6les > ;eading.
KEIFLIN Cdric $% Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the +e&* hedi&)'
In the popup that appears= choose the T6pe o: ;eading as separator *this is the !enu
Item Type used %or the links created previously+.
Then you can apply the styles you want to the headin.s.
KEIFLIN Cdric $( Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 0etti&) the +e&* hedi&)'
And you should have some nice headin.s into your su"menu.
ote that i% you want to style each headin. separately= you can edit each menu item
and de%ine some speci%ic styles in its own ma'imenu options.
KEIFLIN Cdric $- Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* creti&) ri)ht li)&ed item
7. creating a right aligned item
;o in the Menu Manager and edit the right aligned item
;o in the Maximenu CK Params options ans .ive the class align1right on the LI element
Then a,e 0 Close the item
KEIFLIN Cdric $/ Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* creti&) ri)ht li)&ed item
ThatNs it= your item and its su"menu should "e ri.ht ali.ned.
KEIFLIN Cdric $2 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com
C*'tomi3i&) the me&* 4ddi&) ico&' o& the root item'
#. $dding icons on the root items
Final step "e%ore endin. our menu= we will add some nice icons on the root items.
;o in the Menu Manager and edit the item demo ta(s. ;o in the *ink T6pe Cptions.
Then select a *ink Image= and a,e 0 Close the menu item.
1epeat this operation %or all root items and you will see them directly into the menu.
?ou can choose the position o% the ima.e in the module Advanced Cptions. ?ou can
also set it %or each item individually. For e'ample with a !iddle Le%t position #
The tutorial is endin.= I hope that you have learned a lot o% thin.s and that you can now
styles and set your menu correctly.
KEIFLIN Cdric %0 Novembre 2013
http://www.joomlc!."r http://www.templte#cretor.com