KEIFLIN Cédric - Décembre 2012

Transcription

1 1

2 2

3 Remerciements Je tiens à remercier tous ceux qui m'ont aidé et soutenu dans ce projet. Merci à tous! Cédric KEIFLIN 3

4 Mes sites web Portail Joomlack avec démos et téléchargement des extensions développées par moi, ainsi que les news Joomlack. Annuaire et démos d'extensions pour Joomla! Site dédié à Joomla! avec des tutoriels et une documentation sur la création de templates Joomla! Composant Joomla qui permet de créer son propre template A qui s'adresse cette documentation Cette documentation est une aide pour tous ceux qui veulent se perfectionner dans la gestion et la modification des styles du module Maximenu CK. Vous serez guidé pour trouver les éléments à modifier et comprendre la structure du menu. Attention, ce document n'est pas un tutoriel sur les CSS, il considère que vous avez déjà les connaissances nécessaires dans le domaine HTML / CSS. 4

5 TABLE DES MATIERES I.Installation du module 8 1.Installation du module 2.Mise à jour du module 3.Publication du module 4.Création du menu 4.1)Création des premiers items 4.2)Création des sous-menus II.Structure du module 16 III.Modification des CSS 26 1.Différences entre Version 7 et versions antérieures Structure des fichiers 18 3.Layouts 21 Dans les options avancées du module vous pouvez choisir plusieurs fichiers de mise en page (layout) : 21 4.default 21 C'est la mise en page principale du menu qui permet d'afficher un menu déroulant à partir d'une structure de menu avec des liens parent-enfant )dropselect 22 Ce layout transforme simplement le menu en une liste déroulante classique : )flatlist 22 Cette mise en page ne doit pas être utilisée comme layout principal mais en complément pour charger un deuxième Maximenu à l'intérieur du Maximenu principal. On l'utilise par exemple pour créer un megamenu pour votre ecommerce )nativejoomla 22 Ce layout affiche un menu exactement de la même manière que le menu natif de Joomla. Vous pouvez l'utiliser par exemple pour charger un deuxième menu standard mais sans avoir les paramètres affichés dans les titres des liens Structure HTML )Structure principale )Structure d'un lien de menu )Structure de sous-menus 25 1.Comment changer les styles 2.Structure HTML/CSS 3.Liens actifs 4.Identification unique d'un élément 5.Liens parents enfants 6.Position et dimensions des sous-menus 7.Styler les éléments par niveau 8.Effet fancy Curseur animé 9.Classes first last (premier - dernier)

6 10.Utilisation d'un thème graphique 11.Créer son propre thème 12.Compatibilité RTL (Right To Left) 13.Adaptation Responsive Design 14.Feuille de style pour IE7 15.Classes spécifique au thème css3megamenu 15.1)Ombre pour les images 15.2)Black box 15.3)Grey box IV.Paramétrage du module 46 1.Plugin Maximenu params : gestion simplifiée des paramètres 2.Titre et description 2.1)Sans plugin 2.2)Avec le plugin maximenu params 3.Insertion de module 3.1)Sans le plugin 3.2)Avec le plugin maximenu params 4.Gestion des colonnes 4.1)Sans le plugin 4.2)Avec le plugin maximenu params 5.Création d'une nouvelle rangée 5.1)Avec le plugin maximenu params 6.Gestion des images 6.1)Ajouter une image à un lien 6.2)Changement d'image au survol 7.Gestion des attributs V.Paramètres d'administration du module 1.Options de base Menu à utiliser Module ID(doit être unique pour chaque module) Niveau de début Niveau de fin Sous-menus dépendants du parent actif 2.Options avancées Niveau d'empilement z-index Type de mise en page Suffixe de classe CSS Mise en cache Durée du cache Suffixe des images survolées Suffixe pour l'image active Utiliser uniquement l'image Position de l'image 3.Options des effets Stopper le déroulement au niveau Fixer le menu en haut de page 4.Options de styles

7 5.Options pour le logo 6.Personnalisation des styles 7.Options pour mobiles 8.Options des extensions tierces VI.Suppléments 1.Changer les couleur 1.1)Changer la couleur des titres de tous les liens 1.2)Changer la couleur des titres du niveau 0 (premier niveau) survolés 1.3)Changer la couleur du titre du niveau 1 actif 1.4)Changer la couleur de fond d'un conteneur 1.5)Changer la couleur des titres d'items enfants du parent ID )Changer la couleur des titres d'items enfants survolés du parent ID )Changer la couleur de fond du menu 1.8)Changer la couleur de fond du curseur flottant (fancy) 2.Centrer horizontalement le menu dans la page 2.1)Méthode 1 2.2)Méthode 2 3.Bug dans Safari avec Flash 4.Utilisation de la vue flatlist 5.Aligner les sous-menus 6.Créer un mégamenu multicolonnes 6.1)Nouvelle méthode

8 Installation du module Installation du module I. Installation du module Voyons comment installer le module Maximenu CK. 8

9 Installation du module Installation du module 1. Installation du module Allez dans le menu d'administration : Extensions >> Installer une extension Ensuite il suffit de chercher le fichier à installer après l'avoir téléchargé sur et cliquer sur Installer

10 Installation du module Mise à jour du module 2. Mise à jour du module Pour chaque nouvelle version du module vous recevrez un message dans Joomla qui vous informe de sa disponibilité. Allez dans le Gestionnaire d'extensions >> Mises à jour Attention vous ne pourrez pas installer les mises à jour des extensions Joomlack directement, une fois que vous savez qu'une mise à jour est disponible il faut aller sur et télécharger la dernière version du module. 10

11 Installation du module Publication du module 3. Publication du module Allez dans le menu Extensions >> Gestion des modules Vous devez avoir dans la liste un module Maximenu CK Si le module n'est pas listé vous pouvez en créer un nouveau en cliquant sur le bouton Nouveau dans le gestionnaire de modules, et sélectionnez Maximenu CK dans la liste 11

12 Installation du module Publication du module Cliquez sur le titre du module pour l'éditer. Choisissez une position de publication (position-1 correspond au menu horizontal dans les templates par defaut), publiez le module et activez le sur toutes les pages : N'oubliez pas d'assigner le module à toutes les pages (ou juste celles que vous voulez) Vous pouvez changer ces options si vous le désirez en fonction de vos besoins. Pour chaque module que vous publiez vous DEVEZ donner un ID unique. Vous devez donner un nom au menu qui sera utilisé dans le code HTML de la page. Ne donnez pas de nombre ni de caractères spéciaux et n'utilisez pas d'espaces. 12

13 Installation du module Création du menu 4. Création du menu 4.1) Création des premiers items Dans cette partie on va créer une structure de menu déroulant. Pour l'instant le menu contient 2 liens : Pour l'instant le menu n'a pas de sous-menus, il faut les créer. 4.2) Création des sous-menus On va créer un nouveau lien dans lequel on dit qu'il doit être un enfant d'un lien existant. Donnez lui un nom et le type que vous voulez. Le plus important est le champ Lien parent. 13

14 Installation du module Création du menu Et voici la structure obtenue : Ce qui a pour effet d'apporter un effet déroulant à notre menu : Maintenant on peut répéter l'opération pour ajouter un sous menu à Foobar Level 2. Voyons la structure du menu obtenue : 14

15 Installation du module Création du menu Maintenant vous avez un menu à 3 niveaux : NIVEAU 1 NIVEAU 2 NIVEAU 3 15

16 Installation du module II. Création du menu Structure du module Dans un premier temps on va examiner la manière dont le module est organisé pour mieux comprendre son fonctionnement. 16

17 Structure du module Différences entre Version 7 et versions antérieures Différences entre Version 7 et versions antérieures Renommage des classes en minuscules toutes les classes qui composent le menu ont été passées en minuscules, exemple titreck devient titreck Modification des niveaux de liens désormais le premier niveau de lien est le niveau 1 en accord avec la gestion des menus de joomla 2.5 (avant le premier niveau était 0) Prise en charge du cache Gestion native des ACL Optimisation du code avec la nouvelle version Joomla 3.x ajout de la prise en charge du type de lien «heading» (séparateur stylé) par exemple Possibilité d'organiser le menu en colonnes et rangées l'organisation en rangée est possible grâce au plugin maximenu params Compatibilité Virtuemart 2.0 (avec le patch) compatibilité avec la nouvelle version de VM et ajout d'options pour choisir la catégorie parente et la profondeur des catégories à afficher Amélioration de l'ergonomie dans l'administration du module Ajout d'options pour la position des images on peut maintenant positionner l'image à gauche, droite, dessus, dessous, et diverses variantes Nouvelle gestion des colonnes avec les paramètres [col=xxx], [newrow] plus besoin de créer un item de menu spécifique pour créer les colonnes, et cela permet aussi de créer des colonnes avec les largeurs que l'on veut Ajout de fichiers de vue (flatlist, nativejoomla, dropselect) ces vues permettent d'avoir le rendu voulu, surtout lors de la combinaison et imbrication de plusieurs Maximenu pour créer un megamenu avec virtuemart par exemple 17

18 Structure du module Structure des fichiers 2. Structure des fichiers Il est important de comprendre l'organisation des dossiers et fichiers du module pour savoir comment les utiliser et les modifier. Les fichiers sont stockés dans [sitejoomla]/modules/mod_maximenuck Dossiers : Dossier assets ce dossier contient les différents scripts javascript et mootools qui assurent le bon fonctionnement et les effets, ainsi qu'un fichier css Dossier elements Contient des champs de paramètres Dossier language Contient une copie des fichiers de langue Dossier templatelayers Dans ce dossier on trouve plusieurs fichiers qui peuvent être chargé depuis les options pour rendre le menu compatible avec des templates qui posent souci Dossier themes on y retrouve les themes disponibles pour le menu. Chaque thème contient les fichiers CSS et les images qui donnent l'allure au menu. On peut sélectionner le thème à utiliser dans l'administration du module Dossier tmpl il contient les fichiers de vue qui génèrent le rendu HTML du menu. Le fichier principal est default.php Fichiers : 18

19 Structure du module Structure des fichiers index.html Tous ces fichiers servent à protéger les dossiers contre les voyeurs. [assets] - fancymenuck.js C'est un script jquery qui assure l'effet fancy (curseur flottant) que l'on peut désactiver dans l'administration du module. [assets] - maximenuck.js C'est un script jquery qui crée l'effet de déroulement des sous-menus. [themes] - maximenuhck.php + maximenuvck.php Ces deux fichiers sont très importants, ce sont eux qui vont définir les styles de mise en forme du menu. Bien que ce soient des fichiers PHP, ils ne contiennent que du CSS mais avec un appel d'id dynamique en PHP. L'un est utilisé pour le menu horizontal (H) et l'autre vertical (V). [themes] - moo_maximenuhck.css + moo_maximenuvck.css Ces deux fichiers assurent le bon fonctionnement du menu, en mode horizontal (H) ou vertical (V). Il ne doivent contenir aucun style de mise en forme, uniquement des CSS pour le positionnement et le fonctionnement du menu. [tmpl] - default.php D'après le respect de l'architecture MVC dans Joomla!, ce fichier contient l'architecture HTML du menu. C'est lui qui assure le rendu. Attention, pour modifier la structure html du menu il est préférable d'utiliser les techniques de template override plutôt que de modifier ce fichier directement. [tmpl] - flatlist.php Fichier de vue qui permet d'avoir le rendu du menu à plat, c'est à dire sans relation parent-enfant. [tmpl] - nativejoomla.php Fichier de vue qui affiche la même structure que le menu natif de joomla! mais en profitant des fonctions de Maximenu (sans déroulement) [tmpl] dropselect.php Fichier de vue qui affiche une simple liste déroulante helper.php C'est l'âme du module, là où toutes les fonctions sont créées. Il ne devrait pas être nécessaire de modifier ce fichier. mod_maximenuck.php C'est le contrôleur du module, il ne devrait pas être modifié. 19

20 Structure du module Structure des fichiers mod_maximenuck.xml Fichier XML qui permet l'installation et le paramétrage du module. 20

21 Structure du module Layouts 3. Layouts Dans les options avancées du module vous pouvez choisir plusieurs fichiers de mise en page (layout) : 4. default C'est la mise en page principale du menu qui permet d'afficher un menu déroulant à partir d'une structure de menu avec des liens parent-enfant. 21

22 Structure du module 4.1) dropselect Ce layout transforme simplement le menu en une liste déroulante classique : 4.2) flatlist Cette mise en page ne doit pas être utilisée comme layout principal mais en complément pour charger un deuxième Maximenu à l'intérieur du Maximenu principal. On l'utilise par exemple pour créer un megamenu pour votre ecommerce. MISE EN PAGE FLATLIST MODULE 2 CHARGE DANS MODULE 1 MISE EN PAGE DEFAUT MODULE 1 4.3) nativejoomla Ce layout affiche un menu exactement de la même manière que le menu natif de Joomla. Vous pouvez l'utiliser par exemple pour charger un deuxième menu standard mais sans avoir les paramètres affichés dans les titres des liens. 22

23 Structure du module Structure HTML 5. Structure HTML La modification des styles CSS et de l'apparence du module est directement liée à la bonne connaissance de la structure HTML et des classes utilisées pour les éléments à identifier. 5.1) Structure principale Le conteneur principal : div.maximenuckh #MODULEID C'est le bloc (<div />) qui contient tout le menu. Il récupère l'id défini dans les options du menu (qui doit être unique). Le menu hozitontal charge la classe : maximenuckh Le menu vertical charge la classe : maximenuckv Conteneur intermédiaire pour graphistes : div.maxiroundedleft center right Ils sont ajoutés au code pour que les graphistes puissent laisser libre court à leur imagination et ajouter des images à gauche et à droite du menu. Liens de menu : li.maximenuck Chaque lien de menu est affiché dans une liste désordonnée (<ul />) en tant qu'élément de liste (<li />). Voir ci-après. 23

24 Structure du module Structure HTML 5.2) Structure d'un lien de menu Chaque menu est affiché dans la page en tant que li.maximenuck (HTML code : <li class="maximenuck">...</li>) Ancre de lien : a.maximenuck C'est l'élément qui contient le lien qui permet de rediriger les pages. Note : si vous utilisez un lien de type Séparateur, alors a.maximenuck est remplacé par span.separator Texte du lien : span.titreck Il contient le texte du lien, ce qui inclut le titre et la description du lien. Description du lien : span.descck Il contient uniquement la description du lien de menu 24

25 Structure du module Structure HTML 5.3) Structure de sous-menus Si vous avez des sous menu alors vous devez examiner un peu plus en détail leur structure html. Le sous-menu (div.floatck) est chargé dans l'élément de menu (li.maximenuck), c'est pour cette raison qu'il se positionne à la gauche de l'élément parent. Sous-menu : div.floatck C'est le conteneur principal du sous-menu. Vous pouvez lui donner une couleur de fond, des ombres, ou tout autre style nécessaire. C'est aussi à lui qu'on applique les dimensions de hauteur et largeur. Colonne de sous-menu : div.maximenuck2 Vous pouvez créer une ou plusieurs colonnes dans les sous-menus. Elles se placent dans le conteneur (div.floatck) et s'affiche en tant que nouveau bloc (div.maximenuck2). C'st sur cet élément qu'on applique la largeur de la colonne. List de sous-menu : ul.maximenuck2 C'est une liste dans laquelle on charge les items du sous-menu (li.maximenuck). 25

26 Structure du module III. Structure HTML Modification des CSS Après avoir vu la structure générale du menu, on va étudier la modification des styles CSS. 26

27 Modification des CSS Comment changer les styles 1. Comment changer les styles Pour modifier les styles CSS du menu on doit éditer le fichier maximenuhck.php (ou maximenuvck.php pour un menu vertical) Ce fichier est situé dans le dossier du thème que vous avez sélectionné dans les options du module. Le fichier est codé en PHP car il utilise un ID dynamique, c'est à dire qu'il récupère l'id que vous renseignez dans l'administration du module div#<?php echo $id;?> Par exemple avec un ID maximenuck dans le fichier PHP vous écrivez 27

28 Modification des CSS Comment changer les styles div#<?php echo $id;?> ul.maximenuck { et le navigateur lira le fichier et affichera : div#maximenuck ul.maximenuck { La variable PHP doit être utilisée pour toutes les propriétés CSS que vous voulez ajouter dans ce fichier. Regardez comment il est fait pour vous en inspirer. Maintenant que vous savez où ça se passe il vous suffit de jouer avec les CSS. 28

29 Modification des CSS Structure HTML/CSS 2. Structure HTML/CSS Un ensemble de liens de menu est composé des éléments suivants : <li class="maximenuck"> <a class="maximenuck"> <span class="titreck">titre du lien <span class="descck">description du lien</span> </span> </a> </li> Si vous voulez styler l'ensemble du lien (titre et description) vous pouvez utiliser les CSS div#<?php echo $id;?> span.titreck { color: red; } Si vous voulez styler uniquement la description, vous pouvez utiliser les CSS div#<?php echo $id;?> span.descck { color: blue; } 29

30 Modification des CSS Liens actifs 3. Liens actifs Lorsqu'un lien est cliqué il devient actif au chargement de la page. On peut donc lui donner un style particulier pour l'identifier dans le menu, mais aussi donner un style à ses parents. Le lien actif qui pointe vers la page en cours reçoit la classe 'current' et la classe 'active': <li class="current active"> Tous ses parents reçoivent la classe 'active' : <li class="active"> On a au final l'architecture suivante (exemple avec 2 sous-niveaux): <li class="active">... <li class="active">... <li class="current active"> Dans les css on peut facilement les identifier : Titre et description de l'élément courant div#<?php echo $id;?> ul.maximenuck li.current > a span.titreck { color :red; } Titre de l'élément courant survolé div#<?php echo $id;?> ul.maximenuck li.current > a:hover span.titreck { color: red; } Description de l'élément courant survolé div#<?php echo $id;?> ul.maximenuck li.current > a:hover span.descck { color: red; } Titre de l'élément actif et de ses parents div#<?php echo $id;?> ul.maximenuck li.active > a span.titreck { color :red; } Titre du parent actif de niveau 1 30

31 Modification des CSS Liens actifs div#<?php echo $id;?> ul.maximenuck li.active.level1 > a span.titreck { color: red; } Voilà quelques exemples d'utilisation, on peut les étendre pour obtenir le résultat recherché. 31

32 Modification des CSS Identification unique d'un élément 4. Identification unique d'un élément Chaque élément peut être identifié de manière unique grâce à l'id de l'item de menu. Dans l'administration du menu de Joomla!, lorsqu'un lien est créé, un ID lui est attribué. On retrouve cette information dans la colonne de droite dans la gestion du menu. Dans le module Maximenu CK, chaque lien reçoit une classe qui récupère l'id de l'item '(exemple avec ID = 435) : <li class="item435"> Dans les css on l'identifie comme cela : Dans les css on peut styler uniquement cet item de menu : div#<?php echo $id;?> ul.maximenuck li.item435 { background: red; } div#<?php echo $id;?> ul.maximenuck li.item435 > a span.titreck { color: blue; } Vous pouvez réaliser la même chose avec le plugin Maximenu params sans avoir à toucher aux CSS 32

33 Modification des CSS Liens parents enfants 5. Liens parents enfants Étant donné que notre menu a différents niveaux il est intéressant de savoir lorsqu'un élément a des enfants (pour lui ajouter une flèche par exemple). Chaque élément parent du menu reçoit la classe 'parent' <li class="parent"> FLECHE NIVEAU 1 FLECHE NIVEAU 2 Dans les css on l'identifie par Parent de niveau 1 (pour mettre une flèche verticale) div#<?php echo $id;?> ul.maximenuck li.level1.parent > a, div#<?php echo $id;?> ul.maximenuck li.level1.parent > span.separator { background:url("../images/drop.gif") no-repeat right 8px; } Parent de niveau 2 à n (pour mettre une flèche horizontale) div#<?php echo $id;?> ul.maximenuck li.level1.parent li.parent > a, div#<?php echo $id;?> ul.maximenuck li.level1.parent li.parent span.separator { background:url("../images/drop-right.gif") no-repeat right 8px; } 33 >

34 Modification des CSS Position et dimensions des sous-menus 6. Position et dimensions des sous-menus SOUS-MENU NIVEAU 2 Chaque sous-menu est positionné par rapport à son élément parent. Vous pouvez le placer où vous voulez. Pour cela vous devez définir les marges sur div.floatck (conteneur du sous-menu), ainsi qu'une largeur. div#<?php echo $id;?> ul.maximenuck li div.floatck { width : 180px; /* default width */ margin: 2px px; } Avec ces styles (ci-dessus) le sous-menu sera décalé de 2px vers le bas et de 10px vers la gauche. Vous pouvez aussi positionner le sous-menu de niveau 3 de la même manière. SOUS-MENU NIVEAU 3 div#<?php echo $id;?> ul.maximenuck li.maximenuck div.floatck div.floatck { margin : -30px px; } Ainsi le sous-menu de niveau 3 se place à 30px vers le haut à partir du bas de l'élément Foobar level 2, et 180px vers la droite. 34

35 Modification des CSS Styler les éléments par niveau 7. Styler les éléments par niveau Chaque niveau du menu est identifié par niveau, on peut donc faire varier les styles en fonction du niveau de l'élément. Le niveau le plus haut est le niveau 1, le niveau directement en dessous est le niveau 2, etc... NIVEAU 1 NIVEAU 2 NIVEAU 3 Chaque élément se voit attribuer la classe 'levelx' où X prend la valeur du niveau (exemple avec niveau 2, premier sous-niveau). <li class="level2"> Dans les CSS on trouve : Élément de premier niveau div#<?php echo $id;?> ul.maximenuck li.level1 { background: red; } Tous les autres éléments après le niveau 1 div#<?php echo $id;?> ul.maximenuck li.level1 li.maximenuck { background: blue; } 35

36 Modification des CSS Effet fancy Curseur animé 8. Effet fancy Curseur animé L'effet fancy ne s'applique qu'aux éléments du niveau 1 sur le menu horizontal. Son code HTML est construit de la manière suivante : <li class="maxifancybackground"> <li class="maxifancycenter"> <li class="maxifancyleft"> <li class="maxifancyright"> </li> </li> </li> </li> On peut se demander pourquoi il y a tellement d'éléments HTML, c'est juste pour donner la possibilité aux graphistes d'intégrer des éléments de design évolués. Au final vous n'avez besoin de jouer que sur l'élément cental div#<?php echo $id;?>.maxifancybackground.maxifancycenter { border-top: 1px solid #fff; } Vous pouvez aussi lui appliquer une hauteur et une image de fond div#<?php echo $id;?>.maxifancybackground.maxifancycenter { background: url('../images/fancy_bg.png') repeat-x top left; height : 34px; } 36

37 Modification des CSS Classes first last (premier - dernier) 9. Classes first last (premier - dernier) Les élements du menu sont également identifiés par des classe 'first' pour le premier, et 'last' pour le dernier. Dans les css on les pilote comme cela : div#<?php echo $id;?> ul.maximenuck li.first { color: red; } div#<?php echo $id;?> ul.maximenuck li.last { color :blue; } PREMIER ITEM DU MENU PREMIER ITEM DE LA COLONNE PREMIERE COLONNE 37

38 Modification des CSS Utilisation d'un thème graphique 10. Utilisation d'un thème graphique On peut trouver des thèmes graphiques pour personnaliser votre menu sur Joomlack. Il faut télécharger le pack, et le dézipper. A l'intérieur on trouve plusieurs versions, par exemple avec le thème Whiteol : whiteol : thème standard à utiliser sans le plugin maximenu params pour Maximenu v4 ou v5 whiteol2 : thème à utiliser avec le plugin maximenu params pour Maximenu v4 ou v5 whiteol_v6 : thème à utiliser avec la version 6.x ou 7.x de Maximenu (avec ou sans le plugin) Copiez et collez le dossier entier (whiteol_v6 par exemple) dans le répertoire suivant : [site]/modules/mod_maximenuck/themes/ Ensuite vous devez voir le thème listé dans la gestion des styles de l'administration du module. Vous pouvez le sélectionner pour l'utiliser. 38

39 Modification des CSS Créer son propre thème 11. Créer son propre thème Ne vous inquiétez pas c'est très simple de créer votre propre thème. Il suffit de copier et coller le thème existant dans un nouveau dossier [site]/modules/mod_maximenuck/themes/ Vous pouvez ensuite le sélectionner dans les options de Styles du module. Je vous recommande de vous créer votre propre thème au cas où vous voulez y faire des modifications. De cette manière vos modifications ne seront pas écrasées lors d'une prochaine mise à jour. 39

40 Modification des CSS Compatibilité RTL (Right To Left) 12. Compatibilité RTL (Right To Left) Vous pouvez utiliser Maximenu CK dans un environnement multilingue et gérer des styles spécifiques pour les langues RTL (langues arabe par exemple). Pour cela il suffit de créer sa propre feuille de styles avec le suffixe "_rtl" : Menu horizontal : [site]/modules/mod_maximenuck/themes/[theme]/css/maximenuhck_rtl.php Menu vertical : [site]/modules/mod_maximenuck/themes/[theme]/css/maximenuhck_rtl.php Si vous ne créez pas cette feuille, le module utilise celle par défaut, si elle existe et que le site passe en mode RTL alors elle est chargée. Vous pouvez donc y mettre vos propres css pour convertir le menu en alignement à droite. 40

41 Modification des CSS Adaptation Responsive Design 13. Adaptation Responsive Design Les thèmes par défaut préinstallés avec Maximenu CK sont responsive. C'est à dire qu'ils s'adaptent à la largeur de l'écran. Taille standard : Version mobile : Vous pouvez ajouter cette fonctionnalité dans vos propres thèmes. Il suffit d'ouvrir le fichier moo_maximenuhck.css et d'y ajouter ces lignes : /* Responsive design behavior screen and (max-width: 524px) { div.maximenuckh { height: auto!important; } div.maximenuckh ul { height: auto!important; padding-left: 0!important; } 41

42 Modification des CSS Adaptation Responsive Design 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; } Vous pouvez adapter la valeur de max-width (524px) pour choisir à partir de quelle taille d'écran vous voulez que les items se placent les uns sous les autres. Et si vous ne voulez pas du responsive? Supprimez juste ces lignes dans le fichier moo_maximenuhck.css. 42

43 Modification des CSS Feuille de style pour IE7 14. Feuille de style pour IE7 Pour profiter pleinement des css on utilise désormais certaines propriétés comme "inline-block". Le problème est que cette propriété (et d'autres) ne sont pas correctement reconnues par IE7. C'est pourquoi j'ai choisi d'ajouter une feuille de style spécifique à ce navigateur grâce aux commentaires conditionnels. Dans votre thème il suffit d'ajouter une feuille css nommée ie7.css Le module va automatiquement vérifier si elle existe, et si il la trouve il la charge dans la page. 43

44 Modification des CSS Classes spécifique au thème css3megamenu 15. Classes spécifique au thème css3megamenu 15.1) Ombre pour les images Vous pouvez ajouter un bel effet d'ombre à vos images dans le menu. Pour appliquer cet effet il faut ajouter une classe sur l'item de menu (vous aurez besoin du plugin maximenu params). 44

45 Modification des CSS 15.2) Classes spécifique au thème css3megamenu Black box Vous pouvez créer des liens à coins arrondis avec un fond noir et un texte blanc. Comme pour la classe imgshadow, il faut ajouter la classe blackbox dans le lien de menu (avec le plugin maximenu params) 15.3) Grey box Dans le même genre on peut créer un lien avec un fond grisé pour le mettre en valeur. Ajoutez alors la classe greybox sur le lien de menu (avec le plugin maximenu params) 45

46 Modification des CSS IV. Classes spécifique au thème css3megamenu Paramétrage du module Dans ce chapitre on va suivre les instructions pour paramétrer le module. Dans cette section vous verrez comment paramétrer le menu avec ou sans le plugin maximenu params. Si vous utilisez le plugin, n'utilisez pas les paramètres à ajouter dans le titre du lien. 46

47 Paramétrage du module Plugin Maximenu params : gestion simplifiée des paramètres 1. Plugin Maximenu paramètres params : gestion simplifiée des Les paramètres se gèrent en ajoutant des caractères spécifiques au titre du lien. Ceci bien que pas très complexe une fois que l'on a compris le principe, n'est pas forcément la méthode idéale. Pour contourner ce souci, on peut utiliser le plugin Maximenu_CK Params qui permet de gérer les paramètres dans l'administration de chaque lien de menu. Il gère tous les paramètres standards mais apporte aussi des fonctionnalités avancés qui sont seulement possible avec le plugin : Meilleure gestion des colonnes, organisation en multi-colonnes et en rangées Encapsulation de n'importe quel lien dans une balise HTML (H2, H3, etc) pour donner un style différent Ajout d'une classe CSS sur la balise HTML ajoutée juste au dessus Définition des marges pour le placement des sous-menus sans action sur les CSS Ajout d'une classe CSS sur la balise de liste <li> du lien Pas de problème de compatibilité avec les extensions tierces (fil d'ariane, xmap, etc..) Définition d'une couleur spécifique pour chaque lien et pour chaque sous menu avec un color picker Gestion de la largeur du sous menu Insertion de module d'après la liste des modules publiés Près de 200 options pour styler le menu sans toucher au code CSS Télécharger le plugin Maximenu_CK Params Aperçu des paramètres dans l'administration des liens de menu : 47

48 Paramétrage du module Plugin Maximenu params : gestion simplifiée des paramètres Aperçu des options dans le module : 48

49 Paramétrage du module Plugin Maximenu params : gestion simplifiée des paramètres Aperçu des options dans l'édition d'un lien de menu : 49

50 Paramétrage du module Plugin Maximenu params : gestion simplifiée des paramètres Exemple d'utilisation avec le plugin (et theme css3megamenu) : Classe blackbox ajoutée à la balise liste avec chargement de module Classe imgshadow sur la balise liste Classe greybox ajoutée à la balise liste et retour à la ligne (nouvelle rangée) Nouvelle rangée avec tag H2 Nouvelle rangée de 4 colonnes Nouvelle rangée avec 3 colonnes de largeurs différentes Cette organisation ne peut être obtenue que grâce au plugin Maximenu params qu'il faut télécharger à part. 50

51 Paramétrage du module Titre et description 2. Titre et description 2.1) Sans plugin Pour ajouter une description, il suffit de mettre un séparateur avec deux barres verticales " ". On peut ajouter une description pour n'importe quel lien du menu. Le mot 'Accueil' est le titre contenu dans span.titreck <span class="titreck">accueil</span> Le mot 'description' est la description contenue dans span.descck <span class="descck">description</span> 2.2) Avec le plugin maximenu params Si vous avez le plugin installé, vous avez juste besoin d'ajouter la description dans les options avancées du lien de menu. 51

52 Paramétrage du module Insertion de module 3. Insertion de module 3.1) Sans le plugin Le module permet d'insérer des modules directement dans les sous-menus. La solution la plus simple consiste à créer un lien de type 'séparateur'. NOTE : pour insérer un module tout en haut, il faut d'abord créer un parent au niveau 1 et ensuite créer l'élément de menu pour le module sous ce parent. Pour insérer un module, il faut mettre entre crochets le terme 'modid=' suivi de l'id du module à insérer. [modid=iddumodule] Pour trouver l'id du module, il faut aller dans la Gestion des modules de votre site, tous les modules sont listés. Dans la dernière colonne 'id', on trouve le numéro de l'id. Exemple avec le module Flash Info ID du module dans la gestion des modules du site : 31 Paramètre à inscrire dans le titre de l'élément de menu : [modid=31] Type de lien de menu : Séparateur N'oubliez pas d'assigner le module (flash info) à toutes les pages. Ne lui donnez pas de position sinon il apparaitra dans la page car il sera chargé par le template. 52

53 Paramétrage du module Insertion de module 3.2) Avec le plugin maximenu params Aller dans les Options avancées du lien de menu, dans l'onglet Maximenu params Basculer l'option Insérer un module sur OUI et choisissez le module à afficher dans la liste déroulante. 53

54 Paramétrage du module Gestion des colonnes 4. Gestion des colonnes 4.1) Sans le plugin Par défaut une colonne a la largeur de 180 px tel que défini dans les CSS du thème utilisé. Lien utilisé pour définir la taille de la colonne 180 px On peut choisir de faire varier cette largeur en donnant le paramètre dans le titre du lien qui est tout en haut de la colonne (ici Utiliser les extensions). On donne l'info sous la forme [col=250] où 250 est la valeur de la largeur de la colonne en px, c'est à dire qu'on veut une colonne de 250 px. On obtient ainsi une colonne de la largeur voulue 54

55 Paramétrage du module Gestion des colonnes 250 px On peut ainsi créer plusieurs colonnes alignés pour avoir un menu multicolonnes. On ajoute des liens de menu et pour chaque colonne que l'on veut créer on ajoute le paramètre sur le premier lien qu'elle contient. On ajoute 3 items de menu Dummy item, et sur le premier on ajoute le paramètre [col=150] pour créer une deuxième colonne de 150px On obtient la structure complète du sous menu : 1ère colonne de of 250 px 2e colonne de of 150 px Et le résultat final, on peut voir que le conteneur prend automatiquement la largeur des colonnes qu'il contient : 55

56 Paramétrage du module Gestion des colonnes 250 px 150 px 4.2) Avec le plugin maximenu params Aller dans le gestionnaire de menu et éditer le premier lien de la colonne à créer. Premier lien de la 2e colonne Premier lien de la 1ère colonne Aller dans les Options avancées >> Maximenu CK Params pour chacun des deux items : 56

57 Paramétrage du module Gestion des colonnes Dans cet onglet basculer l option Créer une colonne sur OUI. Donnez également la largeur de colonne que vous souhaitez : Largeur de la colonne à indiquer ici 57

58 Paramétrage du module Création d'une nouvelle rangée 5. Création d'une nouvelle rangée Afin d'offrir un maximum de libertés pour l'organisation des liens, Maximenu permet de créer une nouvelle rangée dans laquelle on peut remettre des colonnes de diverses largeurs. Pour créer une nouvelle rangée (retour à la ligne des colonnes) on ajoute le paramètres [newrow] sur la colonne qui doit se placer en dessous. Pour l'exemple on crée une 3e colonne qui ira normalement se placer à droite alignée : Structure du menu 3e colonne Maintenant pour la faire revenir à la ligne et créer une nouvelle rangée on ajoute le paramètre [newrow] : On obtient bien le résultat voulu : 58

59 Paramétrage du module Création d'une nouvelle rangée La 3e colonne se place en dessous Sauf que la largeur du sous-menu est calculé avec les 3 colonnes qu'il contient. Il faut donc le régler manuellement avec un nouveau paramètre : [subwidth=400] ce qui lui donnera une largeur de 400px. Ce paramètre est à ajouter sur le lien parent, ici "Utiliser Joomla! (2)" Et le résultat final : 400px On retrouve bien notre 3e colonne dans la nouvelle rangée ce qui nous permet alors de créer nos liens de menu sans limite. 59

60 Paramétrage du module Création d'une nouvelle rangée Pour finir voici juste l'aperçu complet des liens de menu avec les paramètres : 1ère colonne de la 1ère rangée 2e colonne de la 1ère rangée 3e colonne = 1ère colonne de la 2e rangée 5.1) Avec le plugin maximenu params Dans le même esprit que sans le plugin, on va créer une nouvelle rangée. Mais au lien d utiliser le paramètre [newrow] on va simplement utiliser le paramètre disponible dans les options du lien de menu : 60

61 Paramétrage du module Gestion des images 6. Gestion des images Dans l'administration du module on peut choisir d'activer l'option pour n'afficher que les images. Cette option supprime tous les titres des liens pour n'afficher que les images. Les images qui sont utilisées sont celles définies dans les paramètres système du lien de menu. Si on ne veut afficher l'image que sur certains liens, on peut utiliser le paramètre spécifique en écrivant le terme [img] dans le titre du lien. Si le lien pointe vers une page, l'image sera cliquable, si le lien est de type séparateur l'image sera non cliquable. 6.1) Ajouter une image à un lien Allez dans le gestionnaire de menu, puis éditez un lien. Sur la droite vous avez des paramètres avec un onglet Paramètres du type de lien. Dans cet onglet on peut cliquer sur le bouton Sélectionner pour choisir l'image à utiliser. Option pour afficher le texte du lien ou pas Si on met l'option Ajouter un titre de menu à OUI, alors le texte du lien apparaît à côté de l'image, sinon l'image seule apparaît. Dans les options du module on dispose de plusieurs options pour la gestion des images dans l'onglet Options avancées : 61

62 Paramétrage du module Gestion des images Suffixe des images survolées : option qui permet de créer un menu image avec changement au survol (voir détails ci-après) Suffixe pour l'image active : option qui permet de créer un menu image avec uneimage différente pour le lien actif (même principe que pour l'image survolée) Utiliser uniquement l'image : permet de charger le menu avec les images sans afficher les textes, cette option évite de devoir cocher l'option pour chaque lien de menu Position de l'image : on choisit comment l'image se place par rapport au texte, attention toutefois le rendu peut varier en fonction des styles CSS du menu et de la taille de l'image 62

63 Paramétrage du module Gestion des images 6.2) Changement d'image au survol Une option intéressante de Maximenu qui permet de créer un menu image réactif. Lorsque vous attribuez une image vous allez la chercher avec le gestionnaire d'images : Chemin de l'image Ici on utilise l'image images/powered_by.png qui s'affichera dans le menu. Pour créer une image de survol il suffit de placer une image dans le même dossier avec le même nom contenant le suffixe défini dans les options du module. Dans nos options nous avons défini le suffixe _hover Il suffit donc de placer l'image images/powered_by_hover.png dans le dossier et le menu va automatiquement changer l'image lorsque la souris passe dessus. 63

64 Paramétrage du module Gestion des attributs 7. Gestion des attributs On peut ajouter un attribut au lien généré dans le menu. Cela peut être utile par exemple pour créer un lien avec 'rel=nofollow', ou 'rel=lightbox' pour créer un popup. Il suffit de donner le paramètre dans le titre du lien, exemple : Titre[rel=lightbox] Ainsi le lien généré aura la structure suivante : <a class="maximenuck" href="/joomladev/images/stories/slideshow/photo1.jpg" rel="lightbox"><span class="titreck">test rel</span></a> Pour créer un lien vers une image qui s'ouvre en popup (nécessite un plugin lightbox, il est possible d'utiliser mon plugin Mediabox_CK en complément), il faut créer un lien de type externe et donner le lien relatif vers l'image : 64

65 Paramétrage du module V. Gestion des attributs Paramètres d'administration du module Voici maintenant les paramètres que l'on retrouve dans la partie administration du module. 65

66 Paramètres d'administration du module Options de base 1. Options de base Menu à utiliser On doit choisir quel menu du site on veut afficher dans le module Module ID(doit être unique pour chaque module) Pour pouvoir utiliser le module plusieurs fois sur la même page on doit lui attribuer un identifiant unique pour chaque utilisation Niveau de début Détermine le premier niveau d'éléments à afficher (premier niveau = 1) Niveau de fin Détermine le dernier niveau d'affichage des éléments du menu Sous-menus dépendants du parent actif Si le niveau de début est supérieur à 1 on peut créer un menu double qui est lié à un menu principal. Cette option permet d'afficher les liens même si l'item parent n'est pas le lien actif de la page (OUI = comportement natif de Joomla!) 66

67 Paramètres d'administration du module Options avancées 2. Options avancées Niveau d'empilement z-index Permet de placer le menu au dessus des autres éléments. Par exemple si vous avez deux menus, le premier devra avoir une valeur z-index supérieure. Type de mise en page On peut choisir parmi les différents format d'affichage du menu: default : menu déroulant flatlist : rendu plat sans relation parent-enfant ni niveaux, tous les items sont les uns sous les autres 67

68 Paramètres d'administration du module Options avancées nativejoomla : affiche les items de la même manière que le menu standard de joomla! dropselect : une simple liste déroulante Suffixe de classe CSS Suffixe qui est ajouté à la classe du module sur la balise <ul> Mise en cache Choix de mettre le menu en cache pour optimiser les performances Durée du cache Durée pendant laquelle le menu reste en cache Suffixe des images survolées Définit un suffixe à utiliser pour définir une autre image qui apparaît au survol de la souris Suffixe pour l'image active Définit un suffixe à utiliser pour définir une autre image lorsque le lien est actif Utiliser uniquement l'image Choisir de n'afficher que les images (sans les textes) des liens dans tous les niveaux du menu Position de l'image Positionnement de l'image dans le lien par rapport au texte 68

69 Paramètres d'administration du module Options des effets 3. Options des effets 69

70 Paramètres d'administration du module Options des effets Stopper le déroulement au niveau Aperçu du menu sans l option : Maintenant si vous activez cette option avec le même menu et que vous arrêtez le déroulement au niveau 2 : Tous les items au delà du niveau 2 sont affichés les uns sous les autres. Vous pouvez aller plus loin et créer des colonnes, et ajouter des titres avec des styles différents pour chaque colonne. Vous pouvez voir une petite vidéo qui montre comment utiliser cette option : 70

71 Paramètres d'administration du module Options des effets Fixer le menu en haut de page Cette option vous permet d avoir toujours le menu à disposition collé en haut lorsque vous scrollez la page. Comportement du menu Au survol : le menu s'ouvre lorsque la souris survol le lien parent Au clic : le menu s'ouvre et se ferme lorsque la souris clique sur le lien parent Fermeture au clic : le menu s'ouvre au survol de la souris, mais ne se ferme que si on clique sur le bouton fermer dans le sous-menu Effet On peut choisir un sous-menu qui s'ouvre en variant sa hauteur, ou alors en glissant, ou d autres effets Durée de l'effet Temps en ms que mets le sous-menu à s'ouvrir et se fermer Transition On peut choisir une transition qui sera appliquée à l'effet Durée de relâchement Temps en ms pendant laquelle le menu reste ouvert après que la souris soit sortie du lien parent Détection de bord Calcule la largeur du menu et vérifie si l'élément qui se déroule dépasse à droite de la zone, alors l'élément se déroulera vers la gauche 71

72 Paramètres d'administration du module Options des effets Suite des options d'effet : Direction Permet de faire ouvrir le menu dans l'autre sens, vers le haut en mode horizontal, vers la gauche en mode vertical Décalage pour direction inverse - 1 Décalage en px pour le sous menu de niveau 1 si on active la direction inverse Décalage pour direction inverse - 2 Décalage en px pour le sous menu de niveau 2 si on active la direction inverse, Toujours montrer les sous-menus actifs Laisse ouvert le sous-menu qui contient l'élément actif au chargement de la page Utiliser l'effet fancy Activer ou non le curseur flottant sur les éléments de niveau 0 Durée de l'effet fancy Temps en ms que mets le curseur à se déplacer Fancy transition Type de transition pour le curseur flottant 72

73 Paramètres d'administration du module Options de styles 4. Options de styles Thème à utiliser Thème graphique à utiliser, les thèmes sont listés dans 'modules/mod_maximenuck/themes' Vous pouvez trouver des thèmes à installer sur Joomlack.fr pour personnaliser l'allure de votre menu Utiliser les styles CSS du thème Choisit de charger ou non le fichier CSS maximenuhck.php (maximenuvck.php pour le mode vertical) Orientation du menu Afficher le menu en horizontal ou en vertical Compatibilité de template Couche de CSS spécifique qui permet de rendre Maximenu avec n'importe quel position de template listé (Possibilité d'ajouter des couches de compatibilité sur demande en utilisant la page de contact de Joomlack) 73

74 Paramètres d'administration du module Options pour le logo 5. Options pour le logo Vous pouvez choisir une image à utiliser comme logo dans le menu : Vous pouvez ajouter un lien sur le logo pour rediriger vers la page de votre choix et choisir où placer le logo : à gauche ou à droite du menu.. Le texte alternatif est utilisé pour remplir l attribut «alt» de l image afin d améliorer votre référencement. 74

75 Paramètres d'administration du module Personnalisation des styles 6. Personnalisation des styles Pour activer ces options vous avez besoin du plugin Maximenu params. 75

76 Paramètres d'administration du module Personnalisation des styles En cliquant sur chacun des boutons vous pouvez styler les différentes parties du menu. Menu principal Lien de niveau 1 Etat normal Lien de niveau 1 Etat survolé Sous-menu Lien de sous-menu Etat normal Pour chaque élément vous pouvez définir les marges, couleurs, arrière plan, coins arondis, dégradé et bordures. Exemple avec la police : 76

77 Paramètres d'administration du module Personnalisation des styles 77

78 Paramètres d'administration du module Options pour mobiles 7. Options pour mobiles Vous pouvez ajouter un menu spécifique pour vos appareils mobiles qui ne se chargera que sur ceux-ci (téléphones et tablettes). Notez que par défaut le module Maximenu CK est responsive : Comportement standard de Maximenu 78

79 Paramètres d'administration du module Options pour mobiles Mais ce comportement n est pas toujours adapté sur les appareils mobiles. Pour créer un menu spécifique (ressemblant à une applicaton mobile) vous devez télécharger et instalelr le Plugin Maximenu mobile. Vous pouvez voir à quoi ressemble alors le menu mobile : Cliquer ici pour ouvrir le menu Une fois ouvert, le menu ressemble à une application mobile où vous pouvez scroller avec le doigt pour faire défiler le menu sur l écran. 79

80 Paramètres d'administration du module Options des extensions tierces 8. Options des extensions tierces Sera implémenté dans Maximenu 7 dès que possible (à venir prochainement) Extension tierce Sélectionnez l'extension avec laquelle vous voulez utiliser le menu Virtuemart 2 Vous pouvez lister les catégories de votre boutique en utilisant des icones spécifiques comme images de menu, choisir la catégorie parent à afficher et le niveau de profondeur. Pour utiliser Maximenu avec Virtuemart vous devez télécharger le patch à part. Options de Virtuemart 2 : 80

81 Paramètres d'administration du module Options des extensions tierces Hikashop Vous pouvez lister les catégories de votre boutique en utilisant des icones spécifiques comme images de menu, choisir la catégorie parent à afficher et le niveau de profondeur. Pour utiliser Maximenu avec Hikashop vous devez télécharger le patch à part. Options de Hikashop : 81

82 Paramètres d'administration du module VI. Options des extensions tierces Suppléments Quelques explications supplémentaires pour répondre aux questions fréquemment posées. 82

83 Suppléments Changer les couleur 1. Changer les couleur Cette section vous montrera comment jouer avec les css pour styler le menu. Pour chaque style vous aurez l'information si l'option équivalente existe dans le plugin maximenu params pour piloter les styles directement dans les options sans toucher aux css. Chaque ligne CSS est à ajouter dans le fichier maximenuhck (pour l'orientation horizontal, ou maximenuvck en vertical) qui se trouve dans le dossier CSS du thème utilisé dans le répertoire du module Maximenu. Rappel : div#<?php echo $id;?> est le code qui permet de récupérer l'id du module 1.1) Changer la couleur des titres de tous les liens div#<?php echo $id;?> ul.maximenuck li > a:hover span.titreck { color : blue; } Option de style disponible dans le plugin maximenu params 1.2) Changer la couleur des titres du niveau 0 (premier niveau) survolés div#<?php echo $id;?> ul.maximenuck li.level1 > a:hover span.titreck { color : red; } Option de style disponible dans le plugin maximenu params 83

84 Suppléments Changer les couleur 1.3) Changer la couleur du titre du niveau 1 actif div#<?php echo $id;?> ul.maximenuck li.level1.active > a span.titreck { color : orange; } Option de style disponible dans le plugin maximenu params 1.4) Changer la couleur de fond d'un conteneur Pour chaque item parent on peut choisir de changer la couleur de fond du conteneur des items enfants. Il faut chercher l'id de l'item parent, dans le gestionnaire de menu à la dernière colonne (ici ID = 238) : div#<?php echo $id;?> ul.maximenuck li.item238 div.floatck, div#<?php echo $id;?> ul.maximenuck li.item238 ul.maximenuck2 { background : #ccc; } Option de style disponible dans le plugin maximenu params 1.5) Changer la couleur des titres d'items enfants du parent ID 238 div#<?php echo $id;?> ul.maximenuck li.item238 ul.maximenuck2 a span.titreck{ color : yellow; } 84

85 Suppléments Changer les couleur Option de style disponible dans le plugin maximenu params 1.6) Changer la couleur des titres d'items enfants survolés du parent ID 238 div#<?php echo $id; span.titreck{ color : green; }?> ul.maximenuck li.item238 ul.maximenuck2 a:hover Option de style disponible dans le plugin maximenu params 1.7) Changer la couleur de fond du menu Couleur de fond du menu En fait ce n'est pas une couleur mais une image qui est utilisé et chargée avec ces 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; } Donc il suffit de remplacer l'image fond_bg.png dans le dossier du thème. 85

86 Suppléments Changer les couleur 1.8) Changer la couleur de fond du curseur flottant (fancy) Couleur du curseur Ici aussi c'est une image qui est utilisée : div#<?php echo $id;?>.maxifancybackground.maxifancycenter { background: url('../images/fancy_bg.png') repeat-x top left; height : 34px; } Donc de la même manière que pour le fond du menu il faut changer l'image fancy_bg.png située dans le dossier images du thème. 86

87 Suppléments Centrer horizontalement le menu dans la page 2. Centrer horizontalement le menu dans la page 2.1) Méthode 1 Vous pouvez utiliser le thème css3megamenu pour vous aider à réaliser cette opération. Il est conçu pour être plus flexible que le theme default. Alignement par défaut des liens: Liens alignés à gauche Vous devez éditer le fichier modules/mod_maximenuck/themes/css3megamenu/css/maximenuhck.php remplacer la propriété text-align:left ; par text-align:center; à la ligne 54 (définie sur l élément div#<?php echo $id;?> ul.maximenuck ): Et voilà les liens sont centrés dans le menu : 2.2) Méthode 2 Par défaut le rendu du menu est aligné à gauche, parfois on voudrait qu'il soit centré 87

88 Suppléments Centrer horizontalement le menu dans la page dans la page. Voici le rendu par défaut : Pour pouvoir centrer le menu il faut modifier le template. On édite le fichier templates/[mon_template]/index.php on cherche la ligne qui charge le menu, par exemple s'il est chargé dans la position position-1 : <div id="topmenu"> <jdoc:include type="modules" name="position-1" /> </div> Et on remplace ces lignes par celles-ci de manière à intégrer le menu dans une 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> Ensuite il faut ajouter des CSS en éditant le fichier CSS de votre template, par exemple templates/[mon_template]/template.css et ajouter ces lignes à la fin : table.topmenu { margin-left: auto; margin-right: auto; padding: 0; } Et voici le rendu que l'on obtient : 88

89 Suppléments Bug dans Safari avec Flash 3. Bug dans Safari avec Flash Dans certaines versions de Safari le moteur de rendu rencontre des bugs, notamment lorsque l'on utilise du Flash dans la page. Merci à ilanb d'avoir mis à disposition la solution sur le forum. Il faut éditer le fichier CSS de votre template et ajouter ces lignes, par exemple sur le conteneur du menu <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; } 89

90 Suppléments Utilisation de la vue flatlist 4. Utilisation de la vue flatlist Cette mise en page est spécifique pour charger un second module maximenu à l intérieur d un autre maximenu, par exemple pour afficher une liste de liens pour votre ecommerce. Dans les options avancées on a vu qu'on pouvait choisir un Type de mise en page. On choisit donc flatlist pour créer un menu plat. Voici un rendu possible (grâce au plugin maximenu params pour créer les styles blackbox des titres de colonne) : A première vue ça ne sert à rien pour un menu normal car on peut le faire en mettant tous les items au même niveau sous le lien Démarrer. Imaginez alors que vous chargez un menu Maximenu Vituemart en tant que module sour le lien Démarrer. Vous pouvez afficher toutes les catégories même si elles ont des niveaux différents et appliquer une classe spécifique sur les catégories qui servent de titre de colonne. Voici donc comment faire : Créer un lien de menu sous Démarrer dans lequel on va charger le deuxième module On choisit un item de type séparateur. 90

91 Suppléments Utilisation de la vue flatlist On créer ensuite une colonne dans cet item pour lui donner la largeur que l'on veut On peut aussi créer la colonne en utilisant le paramètre [col=360] dans le titre du lien. De cette manière on se trouve avec un sous-menu de 360px dans lequel il suffit de charger le module. On peut aussi charger le module en utilisant le paramètre [modid=xx] La dernière étape consiste à créer les colonnes dans le module que l'on vient de charger, soit dans un menu ou dans les catégories Virtuemart par exemple, mais avec la mise en page flatlist. 91

92 Suppléments Utilisation de la vue flatlist Création d'une colonne de 180px Création d'une colonne de 180px Module de menu chargé dans le lien Voir la vidéo pour savoir comment utiliser la vue flatlist pour créer son menu ecommerce : 92

93 Suppléments Aligner les sous-menus 5. Aligner les sous-menus Par défaut les sous-menus se placent directement en dessous du lien parent : Dans certains cas on a besoin de modifier leur emplacement, il faut alors jouer sur les css pour y arriver (ou utiliser le plugin maximenu params). On commence par identifier l'id de l'item parent (ici 280) : On utilise cet ID pour générer nos CSS dans le fichier du thème utilisé pour ajouter des marges : div#<?php echo $id;?> ul.maximenuck li.item280 div.floatck { margin-left: -150px; margin-top: 10px; } 93

94 Suppléments Aligner les sous-menus Et voici le résultat : 10px 150px On peut gérer le positionnement des sous-menus directement dans le plugin Maximenu Params sans avoir à éditer les css avec les options Marge gauche et Marge haute du sous menu 94

95 Suppléments Créer un mégamenu multicolonnes 6. Créer un mégamenu multicolonnes Jusqu'à maintenant pour créer des colonnes avec des liens d'en-tête ils devaient tous être sur le même niveau (les en-têtes et les liens de la colonne). Vous pouvez maintenant utiliser un menu à différents niveaux. 6.1) Nouvelle méthode On va voir comment paramétrer un menu et créer des sous menu avec multicolonnes et une en-tête personnalisée.. D abord observons la structure du menu : Lien de niveau 1 Lien de niveau 2 Lien de niveau 3 95

96 Suppléments Créer un mégamenu multicolonnes Maintenant regardons ce que ça donne quand on publie un module maximenu et qu on lui demande d afficher ce menu sans autre paramètre : Créons maintenant 3 colonnes sur les liens (2) + (3) + (4) Editer le lien et sélectionner le Type de lien comme Séparateur de texte Ensuite aller dans les Options avancées >> Maximenu Params (uniquement disponible si vous avez installé le plugin maximenu params) 96

97 Suppléments Créer un mégamenu multicolonnes Aller dans la section Gestion des colonnes et basculer l option Créer une colonne sur OUI NOTE : si vous n avez pas le plugin maximenu params, vous pouvez créer la colonne en ajoutant le paramètre [col=180] dans le titre du lien comme décrit dans la documentation Dans les options du module, aller dans l onglet Effets et sur l option Stopper le déroulement et sélectionner le niveau 2: Maintenant vous avez un menu à trois colonnes : 97

98 Suppléments Créer un mégamenu multicolonnes On peut ensuite styler les en-têtes de colonne (les liens séparateurs), aller dans les options du module >> Personnlisation des styles >> Editer le style des séparateurs 98

99 Suppléments Créer un mégamenu multicolonnes Dans cette fenêtre choisissiez la manière dont vous voulez styler les liens : Voici un aperçu de rendu avec quelques options de style : 99