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

Transcription

1 KEIFLIN Cédric 1 Janvier

2 KEIFLIN Cédric 2 Janvier

3 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

4 My websites Portail Joomlack with démos and download of extensions that are developped by me, and news from Joomlack. Listing and demos of Joomla! Extensions Tutorials dedicated to Joomla Component 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. KEIFLIN Cédric 4 Janvier

5 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 KEIFLIN Cédric 5 Janvier

6 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

7 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. KEIFLIN Cédric 7 Janvier

8 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 KEIFLIN Cédric 8 Janvier

9 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): KEIFLIN Cédric 9 Janvier

10 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

11 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. Now you know how to create a menu structure. KEIFLIN Cédric 11 Janvier

12 Installation and implementation Setting the theme 4. Setting the theme Maximenu 6 is furnished by default with 2 themes : default : the black default simple design css3megamenu : 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) : KEIFLIN Cédric 12 Janvier

13 Installation and implementation Setting the theme KEIFLIN Cédric 13 Janvier

14 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 14 Janvier

15 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: KEIFLIN Cédric 15 Janvier

16 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. KEIFLIN Cédric 16 Janvier

17 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: KEIFLIN Cédric 17 Janvier

18 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. KEIFLIN Cédric 18 Janvier

19 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. Column 1 Column 2 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. KEIFLIN Cédric 19 Janvier

20 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 : Ajout de l'item 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 : KEIFLIN Cédric 20 Janvier

21 Adding an image with shadow One more time see what we get : The image has a little border and a shadow. KEIFLIN Cédric 21 Janvier

22 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 : Zone indésirable 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. KEIFLIN Cédric 22 Janvier

23 Creating a new row You must then edit the parent item Utiliser Joomla to force the submenu width : And the result! KEIFLIN Cédric 23 Janvier

24 Creating a new row Keep playing a little, add another item just under in the same column, and create a new column with two new items. Première colonne Deuxième colonne 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. KEIFLIN Cédric 24 Janvier

25 Creating a new row 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. KEIFLIN Cédric 25 Janvier

26 Creating a new row 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. KEIFLIN Cédric 26 Janvier

27 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 submenu (-40px to align horizontally, and 150px for the left back). Result with image : KEIFLIN Cédric 27 Janvier

28 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. KEIFLIN Cédric 28 Janvier

29 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 : KEIFLIN Cédric 29 Janvier