Documentation Plugin maximenu_CK params-en - UMMA ...

engineachooInternet and Web Development

Dec 4, 2013 (3 years and 11 months ago)

86 views



KEIFLIN Cédric

1

Janvier
2011


KEIFLIN Cédric

2

Janvier
2011


Thanks
I want to thank everyone who helped and supported me in this project.
Thank you all !
Cédric KEIFLIN
KEIFLIN Cédric

3

Janvier
2011


My websites
http://www.joomlack.fr
Portail Joomlack with démos and download of extensions that are developped by me,

and news from Joomlack.
http://www.joomlack.fr.nf
Site dedicated to Joomla! extensions with demos and tutorials for Joomla! 1.5
h
ttp://extensions.joomlack.fr
Listing and demos of Joomla! extensions
http://www.ck-web-creation-alsace.com
Professional website to present my work with Joomla!
Who is this documentation for ?
This documentation will guide you step by step through the use of the available settings

in the plugin. For each parameter there is a concrete example with illustration.
Release Notes
This documentation is version 1.0
It is based on the structure of the module mod_maximenu_CK version 4.9 for Joomla!

1.5 and version 5.1 for Joomla! 1.6.
KEIFLIN Cédric

4

Janvier
2011


CONTENTS TABLE

I.Installation and implementation



6

1.Installation of the module Maximenu_CK



7

2.Installation of the plugin Maximenu_CK params



8

3.Creating the menu



9

3.1)Creating the first items



9

3.2)Cerating the sub-menus



10

4.Setting the theme



12

II.Advanced parameters



13

1.Adding a description



14

2.Loading a module



15

3.Creating columns



16

4.Offset of submenus



18

5.Image only link



19

6.Link attributes



21

7.Styles



22

KEIFLIN Cédric

5

Janvier
2011
Installation and implementation

Installation and implementation

I.
Installation and implementation
To use the plugin and Maximenu_CK we must first install them. Then we'll create a

simple structure as a basis for the application of the parameters.
All links that are created are fictional and are completely random names based on the

sample data provided with Joomla!.
KEIFLIN Cédric

6

Janvier
2011
Installation and implementation

Installation of the module Maximenu_CK

1.
Installation of the module Maximenu_CK
To use the plugin you must obtain the correct version of the module :

Pour Joomla! 1.5 : from version 4.9

Pour Joomla! 1.6 : from version 5.1
Depending on your version of Joomla!, choose the version of the module to install and

publish it in a position of the template. Once the Maximenu_CK is visible on your site

you can skip to the next step.
KEIFLIN Cédric

7

Janvier
2011
Installation and implementation

Installation of the plugin Maximenu_CK params

2.
Installation of the plugin Maximenu_CK params
After installing the menu module, install the plugin and publish it. Go to the menu

manager and edit a menu item, you will see a new tab named "Maximenu_CK params".
KEIFLIN Cédric

8

Janvier
2011
Installation and implementation

Creating the menu

3.
Creating the menu
3.1)
Creating the first items
In this part we will use all the features of the plugin parameters step by step. For now

the menu has the following structure (4 links to articles):
And on the website it looks like that (with the template Beez2):
KEIFLIN Cédric

9

Janvier
2011
Installation and implementation

Creating the menu

3.2)
Cerating the sub-menus
To expand the menu we create 3 links under a parent that is one of the items previously

created. We create children under the link 'Composant contenu':
And here is the structure obtained :
This has the effect of making a drop down into our menu:
KEIFLIN Cédric

10

Janvier
2011
Installation and implementation

Creating the menu

To illustrate the future explanations and illustrate the possibility of using parameters,

we will still create two submenus in the same principle as before:

1 under 'L Orangeraie' : 'Les pastèques'

1 under 'La communauté' : 'Chat marsupial'
Here we just finished the basic menu, you get submenus to a level 2.
KEIFLIN Cédric

11

Janvier
2011
Installation and implementation

Setting the theme

4.
Setting the theme
To fully use the possibilities offered by the parameters of the plugin you must use the

new theme 'default2' which comes with the module.
Edit the module and choose the theme 'default2' in the administration and save.
KEIFLIN Cédric

12

Janvier
2011
Installation and implementation

Setting the theme

II.
Advanced parameters
We will attack the most interesting, ie the use of the available settings in the plugin.

KEIFLIN Cédric

13

Janvier
2011
Advanced parameters

Adding a description

1.
Adding a description
This feature is very simple, just fill in the text in the field of the parameter on the link

concerned. For example if you want to add a description 'Ma description ici' on the

'Composant contact' link, follow the procedure :
Edit the link and then click the tab 'Maximenu_CK params' and enter the text in the

description field:
It remains only to save.
And the result:
KEIFLIN Cédric

14

Janvier
2011
Advanced parameters

Loading a module

2.
Loading a module
This function is dissected in 2 easy steps :

Enable module insertion

Choose the module to insert
We will act on the item 'Koala' and replace the text with a login module.
CAUTION: To be listed the module must be published (in any position).
So in two clicks after editing the link see what to do and save:
And 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 45 in the

file 'position.css'
KEIFLIN Cédric

15

Janvier
2011
Advanced parameters

Creating columns

3.
Creating columns
To create columns we must create for each one an element that marks the beginning of

it and we can then give it a width and a title.
To mark a column we create an item type separator and activate the plugin parameter.

For example here we create a column ('Colonne 1') for the module and another ('colonne

2 ') for the other two items. It needs a column separator before the module and another

after the module.
If you activate the columns without giving width property, they will not appear next to

one another as the parent container is too small. we must therefore give a width in px

to each column created (we define the parameters in the items 'colonne 1 ' and 'colonne

').
We obtain easily our two columns :
KEIFLIN Cédric

16

Janvier
2011
Advanced parameters

Creating columns

One can also choose to display the title of the column that is the title of the link defined

in the separator item. If you activate the parameter for column 1 we obtain the

following result :
The column headings are created in tags <h2> to optimize the referencing (SEO).
KEIFLIN Cédric

17

Janvier
2011
Advanced parameters

Offset of submenus

4.
Offset of submenus
When the sub-menus are displayed they are placed with a margin defined in the CSS :

-30px up and 180px left. Thanks to the plugin we can now set these values manually for

each sub-menu.
Here's the current view :
We edit the link 'L'Orangeraie' (the parent link) and define the margins of the sub-menu

(-40px to align horizontally, and 150px for the left back).
Result with image :
KEIFLIN Cédric

18

Janvier
2011
Advanced parameters

Image only link

5.
Image only link
With the plugin you can simply choose to display an image as link without the title text.
We create a link (no matter what type, if a separator image will be simply the image, if

it is a link to an article, the image will be clickable and point to the selected link) called

'Lien image' for example.
Joomla! 1.6
The image is defined in the 'Link type op
tions' in the 'Link image'.
The administration of

the link we select the desired image :
Joomla! 1.5
In Joomla! 1.5 we choose the link in the 'Parameter
s (sytem)' :
Then simply activate the setting in the link.
And we get a clickable image without text :
KEIFLIN Cédric

19

Janvier
2011
Advanced parameters

Image only link

It is important to know that the title of the link (here 'Lien image') is used to inform the

image ALT tag in HTML code. It is therefore very important for SEO to fill in the title of

the link with this option.
KEIFLIN Cédric

20

Janvier
2011
Advanced parameters

Link attributes

6.
Link attributes
The three parameters of attributes that we can add all work the same way. Simply fill in

the fields and they are automatically added to the link. For example a link without

attribute have the following HTML structure:
<a class="maximenuCK " href="/monsite/index.php/debutants" title=""><span

class="titreCK">Débutants</span></a>
If we add the three parameters as shown below, here is the HTML result :
<a class="maximenuCK
cedclasse
" href="/monsite/index.php/debutants" title="
Le

titre des débutants
"
rel="lightbox"
><span class="titreCK">Débutants</span></a>
The REL attribute is often used to create links that open in a lightbox as in a nice popup.

For example we can use the
plugin Mediabox_CK
to achieve this effect with

Maximenu_CK.
The TITLE attribute adds a little bubble when hovering the link, but is also often used to

improve the SEO of the site.
The CSS class can point to the link anchor in order to apply styles, for example with :
a.cedclasse { … mes styles … }
KEIFLIN Cédric

21

Janvier
2011
Advanced parameters

Styles

7.
Styles
For each menu item you can apply some styles :

title color in 3 states : normal, actif et survolé

description color in 3 states : normal, actif et survolé

background color in 2 states : normal et survolé

Column background color
For each item you can give the color in hexadecimal format, as example :
The column background color apply to the container of submenus from the current item.
KEIFLIN Cédric

22

Janvier
2011