documentation plugin maximenuck params-en

KEIFLIN Cédric 1 Janvier 2011

Thanks

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

Thank you all !

Cédric KEIFLIN


My websites

http://www.joomlack.frPortail Joomlack with démos and download of extensions that are developped by me, and news from Joomlack.

http://extensions.joomlack.frListing and demos of Joomla! Extensions

http://tutoriels-joomla.joomlack.frTutorials dedicated to Joomla

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

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.


http://tutoriels-joomla.joomlack.fr/

http://www.template-creator.com/

http://extensions.joomlack.fr/

http://www.joomlack.fr/

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 14

1.Adding a description 15 2.Adding an icon image 16 3.Loading a module 17 4.Creating columns 19 5.Adding an image with shadow 20 6.Creating a new row 22 7.Offset of submenus 27 8.Link rel attribute 28 9.Styles 29


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!.


Installation and implementation Installation of the module Maximenu_CK

1. Installation of the module Maximenu_CK

First you must obtain the correct version of the module :– For Joomla! 1.5 : use Maximenu version 4.x– For Joomla! 1.6 : use Maximenu version 6.x

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.


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".

The tab appears in the menu link options, not in the maximenu module options


Installation and implementation Creating the menu

3. Creating the menu

3.1) Creating the first items

In this part we will use some 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):



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:



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.

Now you know how to create a menu structure.


Installation and implementation Setting the theme

4. Setting the theme

Maximenu 6 is furnished by default with 2 themes :default : the black default simple designcss3megamenu : a new theme same as on Joomla.org using some CSS3 techniques as rounded corners, gradients, shadows. We will use this theme because it has new features that you will use.

Hereafter the overview of what we will get :

To get all this links see at the menu structure that I used (you can create your own) :



II. Advanced parameters

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


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 'My e-commerce' on the 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:


Advanced parameters Adding an icon image

2. Adding an icon image

This option is native in Joomla 2.5 but we will see it in details. Go in the options Link type options >> Link image and click on Select to choose it.

Now what we get :

You can also choose to only display the image by setting No in the Add menu title option.


Advanced parameters Loading a module

3. Loading a module

This function is dissected in 2 easy steps :• Enable module insertion• Choose the module to insert

Note that the link title will not be used in the final render.

CAUTION: To be listed the module must be published (in any position).

First we create a module, here a custom html that we publish in a fictive position

So in two clicks after editing the link see what to do and save:


Advanced parameters Loading a module

And the result :

Now we will see how to create the columns to set the module on the right.

Note that I added the class blackbox on the item to get the black rendering with rounded corners defined in the theme css3megamenu.


Advanced parameters Creating columns

4. Creating columns

To create columns we must edit the element that marks the beginning of it and we can then give it a width and some options.

You must edit the items Utiliser les extensions and module custom 1 to set the columns. Then we give it a 180px width :

We obtain easily our two columns :

You can see that the submenus container has automatically set its own width regarding the inside columns.


Column 1

Column 2

Advanced parameters Adding an image with shadow

5. Adding an image with shadow

We have already seen how to add an image into a link, but now we will see how to add it a shadow thanks to the theme css3megamenu.

First add the link just at the end of the first column :

You can use a separator item to just show the image, or use a link to redirect the visitor by clicking on it.

Just look at the parameters :

Now we just add the class imgshadow defined in the theme :


Ajout de l'item

Advanced parameters Adding an image with shadow

One more time see what we get :

The image has a little border and a shadow.


Advanced parameters Creating a new row

6. Creating a new row

Now if you want to add a new item you have 2 choices :– put it under the other items in the last column– put it in a new column

But the plugin allows you to create a new row in which you can create some columns. In fact it creates a new columns that you force to return to the line

Hereafter the options to use for the new menu item, just create the column and force it to return to the line.

Look what you get :

It works well but you can see that you have an empty area that you don't want to have. It is just because the width is automatically calculated with all the columns width and here we have finally 3 colmuns of 180px.


Zone indésirable


You must then edit the parent item Utiliser Joomla to force the submenu width :

And the result !



Keep playing a little, add another item just under in the same column, and create a new column with two new items.

Note that I have added the class greybox on the LI elements

Then we create a new row to add it a title. First define it as a H2 tag :

Create a new column and force it returning to the line with a width of 360px to have sufficient place for the submenus.


Première colonne

Deuxième colonne


And now the title is shown taking the whole width of the submenu under the existing columns.

Keep playing with rows and columns, we create a new row with 4 columns of 90px.

Finally create a new row of 3 columns, 2 of 100px and 1 of 160px.



That is the final result that you should get, just to show you what you can do with the menu and how you can arrange it. Each row can have multiple columns that have any width you want. Just take care that the sum of all the columns in a row don't exceed the submenu container width.


Advanced parameters Offset of submenus

7. Offset of submenus

When the sub-sub-menus are displayed they are placed with a margin defined in the CSS. Thanks to the plugin we can now set these values manually for each sub-menu.

Here's the current view :

We edit the link Utiliser Joomla! (the parent link) and define the margins of the sub-menu (-40px to align horizontally, and 150px for the left back).

Result with image :


Advanced parameters Link rel attribute

8. Link rel attribute

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.

You can test by adding the value lightbox (after having installed and published the plugin) and a popup will open when you click on the link.


http://www.joomlack.fr/Extensions-Joomla/Media/mediaboxck-une-lightbox-multimedia.html

Advanced parameters Styles

9. 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.

The result :

You can also set the background of the hover item :

To have a global same color for the item and the subemnu :


documentation plugin maximenuck params-en

Documents

implementation installation

module maximenu

plugin maximenu

maximenu version

maximenu ck params

cdric keiflinkeiflin

version of joomla

menu item