KEIFLIN Cdric

Janvier 2011

KEIFLIN Cdric

Janvier 2011

Thanks
I want to thank everyone who helped and supported me in this project. Thank you all ! Cdric KEIFLI

KEIFLIN Cdric

Janvier 2011

!y we"sites http#$$www.joomlack.%r &ortail 'oomlack with dmos and download o% e(tensions that are developped "y me) and news %rom 'oomlack. http#$$www.joomlack.%r.n% *ite dedicated to 'oomla! e(tensions with demos and tutorials %or 'oomla! +., http#$$e(tensions.joomlack.%r Listin- and demos o% 'oomla! e(tensions http#$$www.ck.we".creation.alsace.com &ro%essional we"site to present my work with 'oomla!

/ho is this documentation %or 0 This documentation will -uide you step "y step throu-h the use o% the availa"le settin-s in the plu-in. For each parameter there is a concrete e(ample with illustration.

1elease otes This documentation is version +.2 It is "ased on the structure o% the module mod3ma(imenu3CK version 4.5 %or 'oomla! +., and version ,.+ %or 'oomla! +.6.

KEIFLIN Cdric

Janvier 2011

CONTENTS TABLE
I.Installation and implementation 6

1.Installation of the module Maximenu_CK 2.Installation of the plugin Maximenu_CK params 3.Creating the menu 7.+8Creatin- the %irst items 7.98Ceratin- the su".menus .!etting the theme 1."dding a des$ription 2.%oading a module 3.Creating $olumns .'ffset of su(menus &.Image onl) lin* 6.%in* attri(utes 7.!t)les

7 8 9 5 +2 12

II."d#an$ed parameters

13

1 1& 16 18 19 21 22

KEIFLIN Cdric

Janvier 2011

Insta ati!n and i"# e"entati!n

Insta ati!n and i"# e"entati!n

I. Installation and implementation

To use the plu-in and !a(imenu3CK we must %irst install them. Then we:ll create a simple structure as a "asis %or the application o% the parameters. ;ll links that are created are %ictional and are completely random names "ased on the sample data provided with 'oomla!.

KEIFLIN Cdric

Janvier 2011

Insta ati!n and i"# e"entati!n

Insta ati!n !% t&e "!d' e (a)i"en'*CK

1. Installation of the module Maximenu_CK

To use the plu-in you must o"tain the correct version o% the module # &our 'oomla! +., # %rom version 4.5 &our 'oomla! +.6 # %rom version ,.+ <ependin- on your version o% 'oomla!) choose the version o% the module to install and pu"lish it in a position o% the template. =nce the !a(imenu3CK is visi"le on your site you can skip to the ne(t step.

KEIFLIN Cdric

Janvier 2011

Insta ati!n and i"# e"entati!n

Insta ati!n !% t&e # ',in (a)i"en'*CK #ara"s

2. Installation of the plugin Maximenu_CK params

;%ter installin- the menu module) install the plu-in and pu"lish it. >o to the menu mana-er and edit a menu item) you will see a new ta" named ?!a(imenu3CK params?.

KEIFLIN Cdric

Janvier 2011

Insta ati!n and i"# e"entati!n

Creatin, t&e "en'

3. Creating the menu

3.1) Creating the first items
In this part we will use all the %eatures o% the plu-in parameters step "y step. For now the menu has the %ollowin- structure @4 links to articles8#

;nd on the we"site it looks like that @with the template AeeB98#

KEIFLIN Cdric

Janvier 2011

Insta ati!n and i"# e"entati!n

Creatin, t&e "en'

3.2) Cerating the sub-menus

To e(pand the menu we create 7 links under a parent that is one o% the items previously created. /e create children under the link :Composant contenu:#

;nd here is the structure o"tained #

This has the e%%ect o% makin- a drop down into our menu#

KEIFLIN Cdric

10

Janvier 2011

Insta ati!n and i"# e"entati!n

Creatin, t&e "en'

To illustrate the %uture e(planations and illustrate the possi"ility o% usin- parameters) we will still create two su"menus in the same principle as "e%ore# + under :L =ran-eraie: # :Les pastCDues: + under :La communaut: # :Chat marsupial:

Eere we just %inished the "asic menu) you -et su"menus to a level 9.

KEIFLIN Cdric

11

Janvier 2011

Insta ati!n and i"# e"entati!n

Settin, t&e t&e"e

4. Setting the theme

To %ully use the possi"ilities o%%ered "y the parameters o% the plu-in you must use the new theme :de%ault9: which comes with the module. Edit the module and choose the theme :de%ault9: in the administration and save.

KEIFLIN Cdric

12

Janvier 2011

Insta ati!n and i"# e"entati!n

Settin, t&e t&e"e

II.

;dvanced parameters

/e will attack the most interestin-) ie the use o% the availa"le settin-s in the plu-in.

KEIFLIN Cdric

13

Janvier 2011

Advanced #ara"eters

Addin, a descri#ti!n

1. Adding a description
This %eature is very simple) just %ill in the te(t in the %ield o% the parameter on the link concerned. For e(ample i% you want to add a description :!a description ici: on the :Composant contact: link) %ollow the procedure # Edit the link and then click the ta" :!a(imenu3CK params: and enter the te(t in the description %ield#

It remains only to save. ;nd the result#

KEIFLIN Cdric

14

Janvier 2011

Advanced #ara"eters

L!adin, a "!d' e

2.

oading a module

This %unction is dissected in 9 easy steps # Ena"le module insertion Choose the module to insert /e will act on the item :Koala: and replace the te(t with a lo-in module. C"+,I'-. ,o (e listed the module must (e pu(lished /in an) position0. *o in two clicks a%ter editin- the link see what to do and save#

;nd the result #

NOTE: In the template Beez20 the bottom of the header cuts the dropdown menu. To solve the problem we have to remove the attribute overflow: hidden! at line "# in the file position.css

KEIFLIN Cdric

15

Janvier 2011

Advanced #ara"eters

Creatin, c! '"ns

3. Creating columns
To create columns we must create %or each one an element that marks the "e-innin- o% it and we can then -ive it a width and a title. To mark a column we create an item type separator and activate the plu-in parameter. For e(ample here we create a column @:Colonne +:8 %or the module and another @:colonne 9 :8 %or the other two items. It needs a column separator "e%ore the module and another a%ter the module.

I% you activate the columns without -ivin- width property) they will not appear ne(t to one another as the parent container is too small. we must there%ore -ive a width in p( to each column created @we de%ine the parameters in the items :colonne + : and :colonne :8.

/e o"tain easily our two columns #

KEIFLIN Cdric

1$

Janvier 2011

Advanced #ara"eters

Creatin, c! '"ns

=ne can also choose to display the title o% the column that is the title o% the link de%ined in the separator item. I% you activate the parameter %or column + we o"tain the %ollowin- result #

The column headin-s are created in ta-s Fh9G to optimiBe the re%erencin- @*E=8.

KEIFLIN Cdric

1+

Janvier 2011

Advanced #ara"eters

O%%set !% s'/"en's

4. !ffset of su"menus
/hen the su".menus are displayed they are placed with a mar-in de%ined in the C** # .72p( up and +H2p( le%t. Thanks to the plu-in we can now set these values manually %or each su".menu. Eere:s the current view #

/e edit the link :L:=ran-eraie: @the parent link8 and de%ine the mar-ins o% the su".menu @.42p( to ali-n horiBontally) and +,2p( %or the le%t "ack8.

1esult with ima-e #

KEIFLIN Cdric

1-

Janvier 2011

Advanced #ara"eters

I"a,e !n 0 in1

#. Image onl$ lin%

/ith the plu-in you can simply choose to display an ima-e as link without the title te(t. /e create a link @no matter what type) i% a separator ima-e will "e simply the ima-e) i% it is a link to an article) the ima-e will "e clicka"le and point to the selected link8 called :Lien ima-e: %or e(ample.

1oomla2 1.6 The ima-e is de%ined in the :Link type options: in the :Link ima-e:. The administration o% the link we select the desired ima-e #

1oomla2 1.& In 'oomla! +., we choose the link in the :&arameters @sytem8: #

Then simply activate the settin- in the link. ;nd we -et a clicka"le ima-e without te(t #

KEIFLIN Cdric

1.

Janvier 2011

Advanced #ara"eters

I"a,e !n 0 in1

It is important to know that the title o% the link @here :Lien ima-e:8 is used to in%orm the ima-e ;LT ta- in ET!L code. It is there%ore very important %or *E= to %ill in the title o% the link with this option.

KEIFLIN Cdric

20

Janvier 2011

Advanced #ara"eters

Lin1 attri/'tes

&.

in% attri"utes

The three parameters o% attri"utes that we can add all work the same way. *imply %ill in the %ields and they are automatically added to the link. For e(ample a link without attri"ute have the %ollowin- ET!L structure#
<a class="maximenuCK " href="/monsite/index.php/debutants" title=""><span class="titreCK">Dbutants</span></a>

I% we add the three parameters as shown "elow) here is the ET!L result #
<a class="maximenuCK cedclasse" href="/monsite/index.php/debutants" title="Le titre des dbutants" rel="lightbox"><span class="titreCK">Dbutants</span></a>

The 1EL attri"ute is o%ten used to create links that open in a li-ht"o( as in a nice popup. For e(ample we can use the plu-in !edia"o(3CK to achieve this e%%ect with !a(imenu3CK. The TITLE attri"ute adds a little "u""le when hoverin- the link) "ut is also o%ten used to improve the *E= o% the site. The C** class can point to the link anchor in order to apply styles) %or e(ample with #
a.cedclasse ! mes st"les ! #

KEIFLIN Cdric

21

Janvier 2011

Advanced #ara"eters

St0 es

'. St$les
For each menu item you can apply some styles # title color in 7 states # normal) acti% et survol description color in 7 states # normal) acti% et survol "ack-round color in 9 states # normal et survol Column "ack-round color For each item you can -ive the color in he(adecimal %ormat) as e(ample #

The column "ack-round color apply to the container o% su"menus %rom the current item.

KEIFLIN Cdric

22

Janvier 2011