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 Site dedicated to tutorials (in french) for Joomla! with some documentaiton about how to make your own Joomla template Component Joomla that allows you to create your own template Who is this documentation for? This documentation is a help for those who wish to improve the management and customizing styles for the Maximenu CK module. You will be guided to find the elements to modify and understand the menu structure. Warning, this document is not a tutorial on CSS, it assumes you already have the necessary knowledge in HTML / CSS. KEIFLIN Cédric 4 Janvier

5 CONTENTS TABLE I.Module installation 7 1.Module installation 8 2.Module publication 9 3.Creating the menu )Creating the first items )Creating the sub-menus 11 II.Module structure 13 1.Difference between version 6 and older 14 2.File structure 15 3.HTML structure 17 III.CSS customization 18 1.How to change the styles 19 2.HTML/CSS architecture 20 3.Active links 21 4.Identification unique of a single element 22 5.Parent child relation 23 6.Levels 1 to n 24 7.Fancy effect 25 8.Rounded style 26 9.Generic Classes Classes first last Using a graphic theme for your menu RTL compatibility (Right To Left) Add the responsive design to your menu IE7 specific stylesheet 33 IV.Setting the module 34 1.Plugin for easy parameters management 35 2.Title and description 39 3.Module insertion 40 4.Columns management 41 5.Création d'une nouvelle rangée 43 6.Image management )Adding an image to a link )Image changing on rollover 48 7.Attributes management 49 V.Module settings 50 1.Basic options 51 2.Advanced options 52 KEIFLIN Cédric 5 Janvier

6 3.Effect options 54 4.Styles options 57 5.Third party extensions Options 58 VI.Addons 60 1.Changing the items color )Changing the color of all item titles )Changing the color of all hovered level0 item titles (first level) )Changing the color of the active level0 item title )Changing the background color of a child container )Changing child items title color for parent ID )Changing hovered child items title color for parent ID )Changing the main background color )Changing the floating cursor background (fancy) 64 2.How to center the menu horizontally in the page 65 3.Bug in Safari with Flash 67 4.Using the view flatlist 68 5.Align the submenus 70 KEIFLIN Cédric 6 Janvier

7 Module installation Module installation I. Module installation Let's see how to install the Maximenu CK module. KEIFLIN Cédric 7 Janvier

8 Module installation Module installation 1. Module installation Go in the administration : Extensions >> Extension Manager Then search the file that you have downloaded on and click on Upload and Install. KEIFLIN Cédric 8 Janvier

9 Module installation Module publication 2. Module publication Go in the menu Extensions >> Module Manager You should see in your list a module Maximenu CK Click on the title to edit it. Choose a position (position-1 is where is placed the horizontal menu in the template Beez20), publish the module and activate it on all pages : You can change all these options if want regarding your needs. Pour chaque module que vous publiez vous devez veiller à donner un ID unique. KEIFLIN Cédric 9 Janvier

10 Module installation Creating the menu 3. Creating the menu 3.1) Creating the first items In this part we will see how to create a dropdown menu. For now the menu has the following structure (4 links to articles): And on the website it looks like that (with the template Beez2 and the default theme): KEIFLIN Cédric 10 Janvier

11 Module installation Creating the menu 3.2) Creating 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 11 Janvier

12 Module installation Creating the menu We will now 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 12 Janvier

13 Module installation Creating the menu II. Module structure Initially we will examine how the module is made to better understand its strcuture. KEIFLIN Cédric 13 Janvier

14 Module structure Difference between version 6 and older 1. Difference between version 6 and older Renaming of classes in lowercase all classes have been rewritten in lowercase, example titreck become titreck Levels modification now the first level is 1 according to standard of joomla 2.5 (before it was 0) Cache management Native ACL management Code improvement avoid some errors, like when there is no item to load Arrangement in columns and rows you can now make some rows in submenus thanks to the plugin maximenu params Compatibility Virtuemart 2.0 (with the patch) is now compatible with the new version of Virtuemart with some new options to select the root category and depth to show Administration in the module improvement Added options for image management You can now place the image where you want around the text (top, bottom, left, right, etc...) New column management with the param [col=xxx] no more needed to create a specific item to create a column and you can give it the width you want Added view files (flatlist and nativejoomla) these views allows you to render the menu like you want, especially when calling another maximenu inside a maximenu to create a megamenu for Virtuemart KEIFLIN Cédric 14 Janvier

15 Module structure File structure 2. File structure It is important to understand the organization of folders and files of the module to learn how to use and modify it. In the folder of your site '[sitejoomla]/modules/mod_maximenuck' you find all files that constitute the module. Here the organization : Folders : Folder assets This folder contains various scripts mootools and javascript which ensure the functioning and effects, and a CSS file Folder themes it contains the themes available for the menu. Each theme contains the CSS files and images that give the appearance. You can select the theme to use in the administration module Folder tmpl it contains the view files which generates the HTML rendering of the menu. The main file is default.php Dossier language Contient une copie des fichiers de langue (ne vous sert à rien) Dossier elements Contient des champs de paramètres (ne vous sert à rien) Files : index.html All these files are used to protect folders against bad guys. fancymenuck.js It is a mootools script that ensures the fancy effect (floating cursor) that can be activated in the module's administration KEIFLIN Cédric 15 Janvier

16 Module structure File structure maximenuck.css It manages the display of submenus when mootools effects are disabled. moomaximenuck.js It is a mootools script that creates the effect for sub-menus rollover. maximenuhck.php + maximenuvck.php These two files are very important, they will define the formatting styles of the menu. Although these are PHP files, they contain only CSS with a call for dynamic ID in PHP. One is used for the horizontal menu (H) and one vertical (V). moo_maximenuhck.css + moo_maximenuvck.css These two files provide the proper functioning of the menu in horizontal mode (H) or vertical (V). It should not contain any style formatting, only CSS for positioning and good working condition of the menu. default.php According to the compliance of MVC in Joomla!, this file contains the menu HTML architecture. It provides the rendering. Warning, to change the html structure of the menu it is preferable to use the techniques of override in the template rather than changing this file directly. flatlist.php View file that render the menu as flat list without parent-child relation nativejoomla.php View file that render the menu as the native joomla menu with the functionnalities of maximenu helper.php It is the core of the module, where all functions are created. It should not be necessary to modify this file. mod_maximenuck.php It is the controller of the module, it should not be changed. mod_maximenuck.xml XML file that allows the installation and configuration of the module. KEIFLIN Cédric 16 Janvier

17 Module structure HTML structure 3. HTML structure Changing CSS styles and appearance of the module is directly linked to good knowledge of HTML structure and classes used to identify the elements. Example of structure with a horizontal menu : levelx : corresponds to the element level, where X is 0 (zero) for the first level, X takes the value 1 for the first level of sub-menus (second level), X takes the value 2 for the second level submenus, etc.... colsx : DEPRECATED : no more used in the version 6 of Maximenu KEIFLIN Cédric 17 Janvier

18 Module structure HTML structure III. CSS customization After seeing the overall structure of the menu, we will study the modification of CSS. KEIFLIN Cédric 18 Janvier

19 CSS customization How to change the styles 1. How to change the styles The menu styles (if you have the option Use css of the module on YES) can be found in the file [site]/modules/mod_maximenuck/themes/[nameoftheme]/css/maximenuhck.php pour un affichage horizontal, et pour l'affichage vertical ça se trouve dans ce fichier : [site]/modules/mod_maximenuck/themes/[nameoftheme]/css/maximenuvhck.php The file is coded as PHP because it uses a dynamic ID which retrieve the ID that you have given in the module options div#<?php echo $id;?> ul.maximenuck { For example with ID maximenuck the déclaration div#<?php echo $id;?> ul.maximenuck { will be transformed in css by the browser in : div#maximenuck ul.maximenuck { Now that you know where to work, you just have to play with the CSS. KEIFLIN Cédric 19 Janvier

20 CSS customization HTML/CSS architecture 2. HTML/CSS architecture A link is composed by the following elements : <li class="maximenuck"> <a class="maximenuck"> <span class="titreck">titre du lien <span class="descck">description du lien</span> </span> </a> </li> If you want to style the entire link (title and description) you can use the CSS span.titreck {code CSS here} If you wan to style only the description, you can use the CSS span.descck {code CSS here} KEIFLIN Cédric 20 Janvier

21 CSS customization Active links 3. Active links When a link is clicked it becomes active when loading the page. Then we may give a particular style to identify it in the menu, but also give a style to his parents. The active link that points to the page being awarded has the class 'current': <li class="current"> If the link is a child of level n> 0, then the parents get the class 'active': <li class="active"> We finally have the following structure (example with two sub-levels): <li class="active"> <li class="active"> <li class="current"> In css you can easily identify it : Title and description of the current element div#<?php echo $id;?> ul.maximenuck li.current>a span Title of the current element mouseovered div#<?php echo $id;?> ul.maximenuck li.current>a:hover span.titreck Description of the current element mouseovered div#<?php echo $id;?> ul.maximenuck li.current>a:hover span.descck Active parent title div#<?php echo $id;?> ul.maximenuck li.active>a span.titreck Active parent title mouseovered div#<?php echo $id;?> ul.maximenuck li.active>a:hover span.titreck Active parent title level 0 div#<?php echo $id;?> ul.maximenuck li.active.level0>a span.titreck Here are some examples of use, they can be extended to obtain the desired result. KEIFLIN Cédric 21 Janvier

22 CSS customization Identification unique of a single element 4. Identification unique of a single element Each element can be uniquely identified with the ID of the menu item. In the administration menu of Joomla!, when a link is created, an ID is assigned. We find this information in the right column in the menu management. In the module maximenu_ck, each link receives a class that retrieves the ID of the item (for example with ID = 466): <li class="item466"> In the CSS we will have : Item 466 title div#<?php echo $id;?> ul.maximenuck li.item37>a span.titreck { color: red; } KEIFLIN Cédric 22 Janvier

23 CSS customization Parent child relation 5. Parent child relation Since our menu has different levels it is interesting to know when an item has some children (to add an arrow for example). Each parent of the menu gets the class 'parent' <li class="parent"> In the css it is identified by Parent level 0 (to put a vertical arrow) div#<?php echo $id;?> ul.maximenuck li.parent.level0>a Parent level 1 to n (to put a horizontal arrow) div#<?php echo $id;?> ul.maximenuck li.parent.level0 li.parent>a Each block of children is positioned relative to its parent: horizontally, Level 2 is directly vertically aligned under the parent Level 3 to n are shifted on the right, aligned horizontally This is defined by the margins. Until level 1 block positioning is by default, from level 3 we change the margins: div#<?php echo $id;?> ul.maximenuck li.maximenuck div.floatck div.floatck { margin : -30px px; } -30px : moves up the block of 30px to align horizontally with the parent 180px : shifts the block 180px on the right (column width value) When the child elements roll out of the width of the menu, they rollover to the left (they get the class 'fixright'). We must therefore define in this case the margin for the left shift: div#<?php echo $id;?> ul.maximenuck li.maximenuck div.floatck div.floatck.fixright { margin-right : 180px; } KEIFLIN Cédric 23 Janvier

24 CSS customization Levels 1 to n 6. Levels 1 to n Each menu level is identified, we can vary the style according to the level of the element. The highest level is level 1, level directly below is the level 2, etc.... To each element is assigned the class 'levelx' where X is the level value (eg with level 2, the first sub-level). <li class="level2"> In the CSS we have : Top-level element (for example to put a separator line image) div#<?php echo $id;?> ul.maximenuck li.level1 KEIFLIN Cédric 24 Janvier

25 CSS customization Fancy effect 7. Fancy effect The fancy effect applies only on level 1 elements. You can also customize it using CSS. It consists of four elements : li.maxifancybackground div.maxifancycenter div.maxifancyleft div.maxifancyright To change the appearance of these elements we find in the CSS Central element div#<?php echo $id;?>.maxifancybackground.maxifancycenter Left element (for rounded style) div#<?php echo $id;?>.maxifancybackground.maxifancyleft Right element (for rounded style) div#<?php echo $id;?>.maxifancybackground.maxifancyright To change the background of the fancy you can give a color or change the background image fancy_bg.png that is called in the CSS : div#<?php echo $id;?>.maxifancybackground.maxifancycenter { background: url('../images/fancy_bg.png') repeat-x top left; height : 34px; } KEIFLIN Cédric 25 Janvier

26 CSS customization Rounded style 8. Rounded style It is possible to create rounded styles throughout the menu. The main container is composed of three blocks: div.maxiroundedleft div.maxiroundedcenter _ contenu du menu div.maxiroundedright We can easily identify the CSS: Left element for a rounded style div#<?php echo $id;?> div.maxiroundedleft Center element for a rounded style div#<?php echo $id;?> div.maxiroundedcenter Right element for a rounded style div#<?php echo $id;?> div.maxiroundedright Inside the menu, each child block has its own rounded style with the following structure: div.maxidrop-top div.maxidrop-main _ div.maximenuck2 div.maxidrop-bottom The child elements are in container block 'maxidrop-main'. Here is the associated CSS : Top element for a rounded style div#<?php echo $id;?> div.maxidrop-top Center element for a rounded style div#<?php echo $id;?> div.maxidrop-main Bottom element for a rounded style div#<?php echo $id;?> div.maxidrop-bottom KEIFLIN Cédric 26 Janvier

27 CSS customization Generic Classes 9. Generic Classes The diagram of the structure (Chapter 2) shows that there are different blocks identified by classes which we have not yet spoken. ul.maximenuck List block that contains the links of the first level ul.maximenuck2 List block that contains lower levels links div.floatck Block container that contains all columns and list blocks div.maximenuck2 Container column that contains a list block Simplified structure : ul.maximenuck _ div.floatck _ div.maximenuck2 _ ul.maximenuck2 _ div.maximenuck2 _ ul.maximenuck2 KEIFLIN Cédric 27 Janvier

28 CSS customization Classes first last 10.Classes first last The menu items are also identified by a class 'first' for the first item of the column and 'last' for the last. In the css we can identify it like this : div#<?php echo $id;?> ul.maximenuck li.first { } div#<?php echo $id;?> ul.maximenuck li.last { } First item class first First column item class first Last column item class last KEIFLIN Cédric 28 Janvier

29 CSS customization Using a graphic theme for your menu 11. Using a graphic theme for your menu You can find some themes to customize your menu on Joomlack.fr You must first download the package, and then unzip it. Inside you will find several versions, for example for the theme Whiteol : whiteol : standard theme to be used without the plugin whiteol2 : theme to be used with the plugin maximenu params whiteol_v6 : theme to be used with the version 6.x of Maximenu (with or wihout the plugin) Copy and paste the entire folder (whiteol_v6 for example) in the following folder : [site]/modules/mod_maximenuck/themes/ Then you will see the theme in the Styles options in the module administration, and you can select it. KEIFLIN Cédric 29 Janvier

30 CSS customization RTL compatibility (Right To Left) 12. RTL compatibility (Right To Left) You can use Maximenu CK in a multilingual website and load some specific styles for a RTL language (arabic language for example). To use this feature you must create your own css stylesheet with the suffix "_rtl" : Horizontal menu : [site]/modules/mod_maximenuck/themes/[theme]/css/maximenuhck_rtl.php Menu vertical : [site]/modules/mod_maximenuck/themes/[theme]/css/maximenuhck_rtl.php If you don't create this stylesheet, then the module will load the default stylesheet, but if it exists and the website is RTL then it will be loaded. You can put your own css to convert the menu to a right alignment. KEIFLIN Cédric 30 Janvier

31 CSS customization Add the responsive design to your menu 13.Add the responsive design to your menu The preinstalled themes in Maximenu CK are already responsive, so they can react in accordance with the window resolution. Standard size : Mobile version : You can add this behavior into your own theme. You just need to edit the file moo_maximenuhck.css and paste the following lines /* Responsive design behavior --- screen and (max-width: 524px) { div.maximenuckh { height: auto!important; } div.maximenuckh ul { height: auto!important; padding-left: 0!important; } KEIFLIN Cédric 31 Janvier

32 CSS customization Add the responsive design to your menu div.maximenuckh li { float :none!important; width: 100%!important; padding-right: 0!important; margin-right: 0!important; } div.maximenuckh div.floatck { width: 100%!important; } div.maximenuckh div.floatck div.maximenuck2 { width: 100%!important; } } div.maximenuckh div.floatck div.floatck { width: 100%!important; margin: 20px 0 0 0!important; } you can play with the value of max-width to select when the menu will react to push the items one under each other. KEIFLIN Cédric 32 Janvier

33 CSS customization IE7 specific stylesheet 14. IE7 specific stylesheet To use some of the css properties you need to adapt the code for IE7. That's why I decided to implement a new stylesheet ie7.css that will only be loaded for IE7 with the conditionnal comments. In your theme you just have to put this file and the module will automatically load it if it exists. KEIFLIN Cédric 33 Janvier

34 CSS customization IE7 specific stylesheet IV. Setting the module In this chapter we will follow the instructions to configure the module. KEIFLIN Cédric 34 Janvier

35 Setting the module Plugin for easy parameters management 1. Plugin for easy parameters management The parameters are managed by adding some special characters in the link title. It's not so diffcult but is not the best solution to do it. To avoid playing with these characters, you can use the plugin Maximenu_CK Params that manage parameters in the administration of each menu link. It manages all standard params but come also with some special features that are only available with the plugin : Better column management, you can organise your menu by columns and rows Adding of HTML tag for each menu link (H2, H3, etc ) Adding a CSS class on the HTML defined before Margin can be defined to place submenus without action on CSS Adding a CSS class on the list html tag <li> of the link No compatibility issue with third party extensions (breadcrumbs, xmap, etc...) Setting a speficic color for each item and for each submenu Setting a specific width for each submenu container Loading of module with a list of all published modules More than 200 options to style the menu without any css knowledge Download the plugin Maximenu_CK Params Preview of the parameters in the menu link administration : KEIFLIN Cédric 35 Janvier

36 Setting the module Plugin for easy parameters management Preview in the module options : KEIFLIN Cédric 36 Janvier

37 Setting the module Plugin for easy parameters management Preview of options in the menu item edition : KEIFLIN Cédric 37 Janvier

38 Setting the module Plugin for easy parameters management Example of what you can do with the plugin (theme css3megamenu) : Class imgshadow on the <li> New row with the H2 tag Class blackbox added to the <li> with loading of module Class greybox added to the <li> with a new row New row with 4 columns New row with 3 columns that have different width This arrangement can only be obtained with the Maximenu params plugin that you must download separately. KEIFLIN Cédric 38 Janvier

39 Setting the module Title and description 2. Title and description To add a description, just put a splitter with two vertical bars " ". You can add a description to any link in the menu. Word 'Accueil' is the title in span.titreck <span class="titreck">accueil</span> Word 'de Joomlack' is the description in span.descck <span class="descck">de Joomlack</span> KEIFLIN Cédric 39 Janvier

40 Setting the module Module insertion 3. Module insertion The menu allows you to insert modules directly into the sub-menus. The simplest solution is to create a link of type 'separator'. NOTE: To insert a module at the top, you must first create a parent at level 1 and then create the menu item for the module under the parent. To insert a module, it must be put in brackets the term 'modid =' followed by the ID of the module. [modid=idofmodule] To find the ID of the module, you must go to the Modules manager of your site, all modules are listed. In the last column 'id', we find the ID number. Example with module poll No. 108: ID module in the module management of the site: 108 Parameter to include in the title of the menu item: [modid = 108] TIP : You can insert the module into a virtual position (which does not exist in the template) by typing a name of position (example 'maximenuck') in the 'position' field. KEIFLIN Cédric 40 Janvier

41 Setting the module Columns management 4. Columns management By default a column has a width of 180px as defined in the CSS of the theme used. Item used to set the column width You can set your own width by adding a parameter in the first item link title of the column (here Utiliser les extensions). You must set it with the param as [col=250] 180 px where 250 is the column width in px, so we will have a column of 250 px. Then we get the specific column 250 px KEIFLIN Cédric 41 Janvier

42 Setting the module Columns management You can also add some other columns that will place on the same line. Just add 3 items called Dummy item, and add the parameter on the first one [col=150] to create a second column of 150px Hereafter the complete submenu structure : 1st column 2 nd column And the final result, where you can see that the submenu container take care of the columns inside it : 250 px 150 px KEIFLIN Cédric 42 Janvier

43 Setting the module Création d'une nouvelle rangée 5. Création d'une nouvelle rangée To offer you a full power in tuning the link arrangement, Maximenu allows you to create a new row of columns with several widths. To create a new row (return to the line) just add this parameter [newrow] on the column that should return to the line For our example we create a 3 rd column which will by default take place aligned on the right : Now to put it in a new row we just have to add the parameter [newrow] : And then the result looks like : KEIFLIN Cédric 43 Janvier

44 Setting the module Création d'une nouvelle rangée Oh, look! The width of the submenu is too big as if it was made with the 3 columns aligned. We must now set it to take the width we want with a new parameter : [subwidth=400] this will give a 400px width. This param must be added on the parent link, here "Utiliser Joomla! (2)" And the final result : We get our 3 rd colmun in the new row that allows us to set any arrangement we want without restriction. KEIFLIN Cédric 44 Janvier

45 Setting the module Création d'une nouvelle rangée To finish just have a look at the final menu structure with all parameters : KEIFLIN Cédric 45 Janvier

46 Setting the module Image management 6. Image management In the administration module you can choose to enable the option to only display the images. This option removes all titles links to display the images. Images that are used are those defined in the system settings of menu link. If you want to display the image only on some links, you can use the specific parameter by writing the term [img] in the title of the link. If the link goes to a page, the image is clickable, if the link is of type separator then image will not be clickable. 6.1) Adding an image to a link Go in the menu manager and edit a link. You will have on the right a tab Link type options where you can select the image you want to use : Option to not show the link text (only the image) KEIFLIN Cédric 46 Janvier

47 Setting the module Image management In the module options you have some options to play with the images in the tab Advanced options : Suffix for image rollover : option to use show another image when the mouse is over (see after) Suffix for image active : option to use show another image for the active link (same use as the image rollover) Utiliser uniquement l'image : you can use this option to only show images without text, then you don't need to do it for each menu link Position de l'image : you can choose where you want the image to place, the render can change depending on your css and the image size KEIFLIN Cédric 47 Janvier

48 Setting the module Image management 6.2) Image changing on rollover This is an interesting option that allows you to have a reacting image menu. When you set an image you use the media manager : Image path Here we use the image images/powered_by.png that will be shown in the menu. To create the mouseover image you just have to place another image in the same folder but with the same name and the suffix given in the options. Here we use the suffix _hover So just place the image images/powered_by_hover.png in the folder and the menu will automatically use it on mouseover. KEIFLIN Cédric 48 Janvier

49 Setting the module Attributes management 7. Attributes management You can add an attribute to the generated link in the menu. This can be useful for example to create a link with 'rel = nofollow' or 'rel = lightbox' to create a popup. Just give the parameter in the link title, example: Titre[rel=lightbox] Then the generated link will have the following structure : <a class="maximenuck" href="/joomladev/images/stories/slideshow/photo1.jpg" rel="lightbox"><span class="titreck">test rel</span></a> To link to an image that opens in popup (requires a plugin lightbox, it is possible to use my plugin Mediabox_CK in complement), we must create a link as type external and give the relative link to the image: KEIFLIN Cédric 49 Janvier

50 Setting the module Attributes management V. Module settings Here are the settings found in the module's administration. KEIFLIN Cédric 50 Janvier

51 Module settings Basic options 1. Basic options Menu to render We must choose which menu you want to display the site in module Module ID(must be unique for each module) To use the module multiple times on the same page you must assign a unique identifier for each use Start level Determines the first level of items to display (first level = 1) End level Determines the final level of menu items to display Sub items dependant Can show the submenus (Start level > 2) even if the current item of the page is not one of the parent (YES = native Joomla! behavior) KEIFLIN Cédric 51 Janvier

52 Module settings Advanced options 2. Advanced options Z-index level Place the menu over other elements depending on the value. For example if you have two menus on the page, the first must have a higher value. Alternative layout You can choose which layout you want to use to render the menu default : dropdown megamenu flatlist : all items are listed in the same way without hierarchy natviejoomla : items are rendered as for the standard joomla menu Module class suffix Class suffix added to the menu on the <ul> tag Caching Choose if you want to put the menu in cache Cache time Duration of the cache KEIFLIN Cédric 52 Janvier

53 Module settings Advanced options Suffix for image rollover Choose a suffix to use for image that would appear on mouse over Suffix for image active Choose a suffix to use for image that would appear if the item is active (current) Only use image You can choose to only display images without the text in the link Image position Image position relative to the text KEIFLIN Cédric 53 Janvier

54 Module settings Effect options 3. Effect options KEIFLIN Cédric 54 Janvier

55 Module settings Effect options Use mootools effects Choose whether you want the effect of rollover, opacity and other mootools effects. If no, no script will be added in the page Loading type domready : the menu is running before the complete page is loaded load : wait until the page is completely loaded to run the menu (warning : in Chrome and Safari you can have an issue if the image used are higher than the text, then the submenu will not have the sufficient height. In this case use the option load) Menu behavior Moomenu is the default style, the menu opens and close on mouseover The close on click option opens the menu on mouseover but close it when clicking on the button 'close'. On click behavior allows to open and close the submenus by clicking Open type The menu will change its height or slide Effect duration Duration in ms of the mootools effect when open the submenu Submenu Transition Type of transition for the opening of the sub-menu Mouseout duration Duration in ms during which the menu stays open after the mouse is out of the parent link Use opacity effect Choose whether you want the menu opacity changes when opening and closing it Overflow detection Calculates the width of the menu and check if the element runs right over the area, then the item will rollover to the left Direction You can open the submenu in the inverse direction (to the top for horizontal mode, to the right in vertical mode) Offset for inverse direction - 1 Horizontal offset for the submenu level1 if direction is set to inverse Offset for inverse direction - 2 Horizontal offset for the submenu level2 if direction is set to inverse KEIFLIN Cédric 55 Janvier

56 Module settings Effect options Show the active submenus Displays the submenu which contains the active item when the page loads Use fancy effect Enable or not the floating cursor on elements Level 0 Duration of fancy effect Duration of floatnig cursor movement Fancy transition Type of transition for the floating cursor Fancy transition ease Type of transition ease for the floating cursor KEIFLIN Cédric 56 Janvier

57 Module settings Styles options 4. Styles options Theme to load Graphic theme to use, the themes are listed under 'modules/mod_maximenuck/themes' Use css of the theme Choose to load (or not) the CSS file maximenuhck.php (maximenuvck.php for the vertical mode) Menu orientation Horizontal or vertical display Template compatibility layer CSS layer that allows Maximenu to work correctly in any template position that is listed (possibility to add some specific layer for your needs on request using the Joomlack contact page) KEIFLIN Cédric 57 Janvier

58 Module settings Third party extensions Options 5. Third party extensions Options Third party extension Choose which extension you want to use the menu for Virtuemart 2 You can display the categories of your ecommerce, add it some specific icons, select the parent category to show and the depth of subcategories. To use Maximenu with Virtuemart you must dowload the patch Options for Virtuemart 2 : Hikashop KEIFLIN Cédric 58 Janvier

59 Module settings Third party extensions Options You can display the categories of your ecommerce, add it some specific icons, select the parent category to show and the depth of subcategories. To use Maximenu with Hikashop you must dowload the patch Options for Hikashop : KEIFLIN Cédric 59 Janvier

60 Module settings Third party extensions Options VI. Addons Some more explanations to answer the most frequently asked questions. KEIFLIN Cédric 60 Janvier

61 Addons Changing the items color 1. Changing the items color Each CSS line has to be added in the file maximenuhck (for horizontal orientation, or maximenuvck in vertical). Reminder : div#<?php echo $id;?> is the code that retrieve the ID of the module 1.1) Changing the color of all item titles div#<?php echo $id;?> ul.maximenuck li>a:hover span.titreck { color : blue; } 1.2) Changing the color of all hovered level0 item titles (first level) div#<?php echo $id;?> ul.maximenuck li.level0>a:hover span.titreck { color : red; } 1.3) Changing the color of the active level0 item title div#<?php echo $id;?> ul.maximenuck li.level0.active>a span.titreck { color : orange; } KEIFLIN Cédric 61 Janvier

62 Addons Changing the items color 1.4) Changing the background color of a child container For each parent item you can change the color of the container background. You must search for the ID of the parent item, in the menu manager see the last column (here ID = 238): div#<?php echo $id;?> ul.maximenuck li.item238 div.floatck, div#<?php echo $id;?> ul.maximenuck li.item238 ul.maximenuck2 { background : #ccc; } 1.5) Changing child items title color for parent ID 238 div#<?php echo $id;?> ul.maximenuck li.item238 ul.maximenuck2 a span.titreck{ color : yellow; } KEIFLIN Cédric 62 Janvier

63 Addons Changing the items color 1.6) Changing hovered child items title color for parent ID 238 div#<?php echo $id;?> ul.maximenuck li.item238 ul.maximenuck2 a:hover span.titreck{ color : green; } 1.7) Changing the main background color Menu background color In fact this is not a color but an image that is loaded with the CSS : /* container style */ div#<?php echo $id;?> ul.maximenuck { background : url(../images/fond_bg.png) top left repeat-x; height : 34px; padding : 0; margin : 0; overflow: visible!important; display: block!important; float: none!important; visibility: visible!important; } So you just have to change the image fond_bg.png in the theme folder KEIFLIN Cédric 63 Janvier

64 Addons Changing the items color 1.8) Changing the floating cursor background (fancy) Cursor color Here it is an image too : div#<?php echo $id;?>.maxifancybackground.maxifancycenter { background: url('../images/fancy_bg.png') repeat-x top left; height : 34px; } You need as previously for the menu background, to change the image fancy_bg.png located in the folder images in the theme. KEIFLIN Cédric 64 Janvier

65 Addons How to center the menu horizontally in the page 2. How to center the menu horizontally in the page By default the menu render aligned to the left of the page, but sometimes we need to place it on the center. Hereafter the default behavior : To center the menu you must modify the template. Edit the file templates/[my_template]/index.php search for the line that loads the menu, for example if it is loaded in the position position-1 : <div id="topmenu"> <jdoc:include type="modules" name="position-1" /> </div> Then you must replace these lines with these hereafter to integrate the menu in a table : <table cellpadding="0" cellspacing="0" class="topmenu"> <tr> <td></td> <td> <div id="topmenu"> <jdoc:include type="modules" name="position-1" /> </div> </td> <td></td> </tr> </table> Then you must add some CSS by editing the CS file in your template, for example templates/[my_template]/template.css add these lines at the end of the file : table.topmenu { margin-left: auto; margin-right: auto; padding: 0; } And then the screenshot of the result : KEIFLIN Cédric 65 Janvier

66 Addons How to center the menu horizontally in the page KEIFLIN Cédric 66 Janvier

67 Addons Bug in Safari with Flash 3. Bug in Safari with Flash In certain version of Safari there are some rendering bugs, especially if you are using some Flash in the page. Thanks to ilanb to put this solution on the forum. You must edit the CSS file in your template to put these lines, for example if your menu is called in a container <div id="topmenu"> : #topmenu z-index:2; } #topmenu ul { z-index:3; } #topmenu ul li { z-index:4; } #topmenu ul li ul { z-index:5; } #topmenu ul li ul li { z-index:6; } #topmenu a { z-index:7; } KEIFLIN Cédric 67 Janvier

68 Addons Using the view flatlist 4. Using the view flatlist In the advanced options you can set an Alternative layout as flatlist. Hereafter an example of what you can have (thanks to the maximenu params plugin to set the style of th ecolumn title) : First it has no interest because you can do it in a normal menu. Now imagine that you load a Virtuemart menu module under the link Démarrer. You can show all categories even if they have different levels organise them by columns. How to do it : Creat a link uner Démarrer in which you load another module Choose a separator type. KEIFLIN Cédric 68 Janvier

69 Addons Using the view flatlist Then create a column in this item to give it a width You can also use the param [col=360] in the title link. Then we have a column of 360px width in which we can load the module You can also load the module using the param [modid=xx] The last step is to create the columns in the other module just loaded.this module must have the layout set on flatlist and it can be a normal menu or a Virtuemart one. Create a column of 180px Create a column of 180px Menu module loaded in the link KEIFLIN Cédric 69 Janvier

70 Addons Align the submenus 5. Align the submenus By default the submenus are directly placed under the parent link : In some cases you must change this position, then you need to edit the CSS (or use the plugin Maximenu params) First you must retrieve the parent item ID (here 280) : Then edit the CSS of the theme and add some margins : div#<?php echo $id;?> ul.maximenuck li.item280 div.floatck { margin-left: -150px; margin-top: 10px; } And the result : 150px 10px KEIFLIN Cédric 70 Janvier

71 Addons Align the submenus You can also manage this directly with the plugin Maximenu params without editing any CSS file just by setting the Horizontal gap and the Top gap for sublevel KEIFLIN Cédric 71 Janvier