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

Transcription

1 KEIFLIN Cédric 1 Janvier

2 KEIFLIN Cédric 2 Janvier

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

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. Site de tutoriels dédiés à Joomla Annuaire et démos d'extensions pour Joomla! Composant Joomla qui permet de créer son propre template A qui s'adresse cette documentation Cette documentation vous permettra de suivre pas à pas l'utilisation des paramètres disponibles avec le plugin. Pour chaque paramètre il y a un exemple concret avec illustration. KEIFLIN Cédric 4 Janvier

5 TABLE DES MATIERES I.Installation et mise en place 6 1.Installation du module Maximenu_CK 7 2.Installation du plugin Maximenu_CK params 8 3.Création du menu 9 3.1)Création des premiers items 9 3.2)Création des sous-menus 10 4.Définition du thème 12 II.Paramètres avancés 14 1.Ajout d'une description 15 2.Ajout d'une image d'icône 16 3.Insertion d'un module 17 4.Création des colonnes 19 5.Ajout d'une image avec ombre 20 6.Création d'une nouvelle rangée 22 7.Décalage des sous-menus 27 8.Attribut rel du lien 28 9.Styles 29 KEIFLIN Cédric 5 Janvier

6 Installation et mise en place Installation et mise en place I. Installation et mise en place Pour pouvoir utiliser le Maximenu_CK et son plugin il faut tout d'abord les installer. Ensuite on va créer une structure simple qui servira de base à l'application des paramètres. Tous les liens qui sont créés sont fictifs et portent des noms totalement aléatoires basés sur les données d'exemple fournies avec Joomla!. KEIFLIN Cédric 6 Janvier

7 Installation et mise en place Installation du module Maximenu_CK 1. Installation du module Maximenu_CK Tout d'abord il faut se procurer la bonne version du module : Pour Joomla! 1.5 : utiliser Maximenu version 4.x Pour Joomla! 2.5 : utiliser Maximenu version 6.x En fonction de votre version de Joomla!, choisissez la version du module à installer et publiez-le dans une position du template. Une fois que le Maximenu CK est visible sur votre site vous pouvez passer à l'étape suivante. KEIFLIN Cédric 7 Janvier

8 Installation et mise en place Installation du plugin Maximenu_CK params 2. Installation du plugin Maximenu_CK params Après avoir installé le module du menu, installez le plugin et publiez-le. Allez dans la gestion des menus et éditez un item du menu, vous verrez un nouvel onglet nommé "Maximenu CK params". L'onglet n'apparait pas dans les options du module mais dans les options d'un lien de menu KEIFLIN Cédric 8 Janvier

9 Installation et mise en place Création du menu 3. Création du menu 3.1) Création des premiers items Dans cette partie on va utiliser des fonctions du plugin et des paramètres pas à pas. Pour l'instant le menu a la structure suivante (4 liens pointant vers des articles) : Et sur le site ça donne ça (avec le template Beez2) : KEIFLIN Cédric 9 Janvier

10 Installation et mise en place Création du menu 3.2) Création des sous-menus Pour étoffer un peu le menu on crée 3 liens ayant pour parent un des items précédemment créés. On crée les enfants sous le lien 'Composant contenu' : Et voici la structure obtenue : Ce qui a pour effet d'apporter un effet déroulant à notre menu : KEIFLIN Cédric 10 Janvier

11 Installation et mise en place Création du menu Afin d'étoffer les futures explications et illustrer la possibilité d'utilisation des paramètres, on va encore créer 2 sous-menus dans le même principe qu'avant : 1 sous 'L Orangeraie' : 'Les pastèques' 1 sous 'La communauté' : 'Chat marsupial' Voilà on vient de finir la base du menu, on obtient des sous-menus jusqu'à un niveau 2. Maintenant vous savez créer une architecture de menu. KEIFLIN Cédric 11 Janvier

12 Installation et mise en place Définition du thème 4. Définition du thème Par défaut Maximenu 6 est fourni avec 2 thèmes : default : le thème noir par défaut à affichage simple css3megamenu : nouveau thème identique à celui de Joomla.org basé sur des techniques CSS3 pour le rendu (coins arrondis, dégradés, ombres). C'est ce thème que nous allons utiliser car il dispose de nouvelle fonctionnalités. Voici le rendu final qu'on doit obtenir après paramétrage : Afin d'obtenir tous ces liens, voici un aperçu de la structure complète de menu utilisée (vous pouvez créer la votre) : KEIFLIN Cédric 12 Janvier

13 Installation et mise en place Définition du thème KEIFLIN Cédric 13 Janvier

14 Installation et mise en place Définition du thème II. Paramètres avancés On va attaquer le plus intéressant, c'est à dire l'utilisation des paramètres disponibles dans le plugin. KEIFLIN Cédric 14 Janvier

15 Ajout d'une description 1. Ajout d'une description Cette fonctionnalité est très simple, il suffit de renseigner le texte dans le champ du paramètre sur le lien concerné. Par exemple si on veut ajouter une description 'My e- commerce' sur le lien, voici la procédure : Editez le lien puis cliquez sur l'onglet 'Maximenu CK params', et inscrivez le texte dans le champ description : Il ne reste qu'à enregistrer. Et voici le résultat : KEIFLIN Cédric 15 Janvier

16 Ajout d'une image d'icône 2. Ajout d'une image d'icône Cette option est native dans Joomla 2.5 mais on va tout de même la décrire ici. Allez dans les options Paramètres du type de liens >> Image du lien et cliquez sur Sélectionner pour la choisir. Voici ce qu'on obtient : On peut aussi choisir de n'afficher que l'image en cochant NON sur l'option Ajouter un titre au menu. KEIFLIN Cédric 16 Janvier

17 Insertion d'un module 3. Insertion d'un module Cette fonction se décortique en 2 étapes simples : Activer l'insertion du module Choisir le module à insérer Notez que le titre du lien de menu ne sera pas utilisé dans le rendu final. ATENTION : pour être listé le module doit être publié (dans n'importe quelle position). Tout d'abord on crée un module, ici un html personnalisé que l'on publie dans une position fictive : Voilà donc en deux clics après avoir édité le lien ce qu'il faut faire puis enregistrer : KEIFLIN Cédric 17 Janvier

18 Insertion d'un module Et le résultat : Le module se charge sous les autres items. Maintenant on va se charger de créer des colonnes pour mettre le module à droite. Notez que pour avoir le rendu du module en fond noir avec coins arrondis j'ai ajouté la classe blackbox sur l'item pour profiter du rendu du thème css3megamenu. KEIFLIN Cédric 18 Janvier

19 Création des colonnes 4. Création des colonnes Pour créer des colonnes il faut éditer l'élément qui marque le début de celle-ci et on peut alors lui donner une largeur et des options. Colonne 1 Colonne 2 On édite les items Utiliser les extensions et module custom 1 pour leur forcer la création des colonnes. On leur donne ainsi la largeur que l'on veut, ici 180px chacune : On obtient facilement nos deux colonnes : On remarque que la largeur totale du conteneur des sous-menus s'est adapté en fonction des colonnes qu'il contient. KEIFLIN Cédric 19 Janvier

20 Ajout d'une image avec ombre 5. Ajout d'une image avec ombre Nous avons vu tout à l'heure comment créer un lien de menu avec une image et sans le texte du lien. Voyons maintenant comment lui ajouter une ombre portée grâce aux fonctionnalités du thème css3megamenu. On ajoute l'item à la fin de la première colonne : Ajout de l'item On peut utiliser un lien de type séparateur pour uniquement afficher l'image, ou un lien qui permettra de rediriger le visiteur lors du clic sur l'image. Voici les paramètres pour ajouter l'image : Et maintenant on utilise la classe imgshadow définie dans le thème KEIFLIN Cédric 20 Janvier

21 Ajout d'une image avec ombre Encore une fois on admire le résultat : L'image contient une légère bordure et une ombre portée. KEIFLIN Cédric 21 Janvier

22 Création d'une nouvelle rangée 6. Création d'une nouvelle rangée Maintenant si on veut ajouter un nouvel item dans le sous-menu on a deux choix : le mettre sous les autres items de la dernière colonne le mettre dans une nouvelle colonne Ça ce sont les possibilités par défaut, mais le plugin permet de créer une nouvelle rangée dans laquelle on peut continuer à créer des colonnes. En réalité on ne fait que créer une colonne dont on force le retour à la ligne (ce qui crée la rangée). Voilà les options à utiliser dans le nouvel item, il suffit de créer la colonne et forcer le retour à la ligne. Voici ce qu'on obtient : Zone indésirable Ca fonctionne bien, mais le souci est qu'on se retrouve avec un espace indésirable à droite. Cela est du au fait que la largeur est calculée en fonction des colonnes qui la contiennent et on vient justement de rajouter une colonne de 180px. KEIFLIN Cédric 22 Janvier

23 Création d'une nouvelle rangée Il faut alors éditer l'item parent Utiliser Joomla pour lui forcer la largeur du sous-menu. Et voilà! KEIFLIN Cédric 23 Janvier

24 Création d'une nouvelle rangée Continuons de jouer un peu avec les colonnes, on ajoute un item juste en dessous dans la même colonne, puis on crée une seconde colonne de deux items : Première colonne Deuxième colonne Notez que pour ces items j'ai ajouté la classe greybox sur les éléments de liste Ensuite on crée une nouvelle rangée pour y mettre un titre. Déjà on définit le tag HTML sur H2 pour lui donner du poids et montrer que l'on veut un titre. Ensuite on crée une nouvelle colonne et on lui force le retour à la ligne et une largeur de 360px pour qu'elle prenne toute la largeur du sous-menu. KEIFLIN Cédric 24 Janvier

25 Création d'une nouvelle rangée Et voilà notre titre qui s'affiche sur toute la largeur du sous-menu sous les colonnes existantes. On continue toujours avec les colonnes et rangées, on crée une nouvelle rangée avec 4 colonnes de 90px : Pour finir on va créer une nouvelle rangée de 3 colonnes, 2 colonnes de 100px et 1 colonne de 160px. KEIFLIN Cédric 25 Janvier

26 Création d'une nouvelle rangée Voilà le résultat final que l'on obtient, tout ça pour vous montrer les possibilités du menu et de la disposition en colonnes et rangées. Chaque rangée peut contenir autant de colonnes que l'on veut à condition de faire en sorte que la somme de leurs largeurs ne dépasse pas la largeur du sous-menu. KEIFLIN Cédric 26 Janvier

27 Décalage des sous-menus 7. Décalage des sous-menus Lorsque les sous-sous-menus s'affichent ils se placent avec une marge définie dans les CSS. Grâce au plugin on peut maintenant définir ces valeurs manuellement pour chaque sous-menu. Voici l'affichage actuel : On édite le lien Utiliser Joomla! (le lien parent) et on définit les marges du sous-menu (-40px pour l'aligner horizontalement, et 150px à gauche pour le rentrer). Résultat en image : KEIFLIN Cédric 27 Janvier

28 Attribut rel du lien 8. Attribut rel du lien L'attribut REL est souvent utilisé pour créer des liens de type lightbox qui s'ouvrent dans un joli popup. Par exemple on peut utiliser le plugin Mediabox_CK pour réaliser cet effet avec Maximenu_CK. Pour essayer il suffit d'ajouter une valeur lightbox (après avoir installé et publié le plugin) et une fenêtre s'ouvrira lorsque vous cliquerez sur le lien. KEIFLIN Cédric 28 Janvier

29 Styles 9. Styles Pour chaque item de menu on peut lui appliquer des styles : couleur de titre dans 3 états : normal, actif et survolé couleur de description dans 3 états : normal, actif et survolé couleur de fond dans 2 états : normal et survolé couleur de fond de la colonne Pour chaque champ il suffit de renseigner la couleur en valeur Hexadécimal par exemple : La couleur de fond de colonne s'applique au conteneur des sous-menus qui dépendent de l'item. Voici ce qu'on obtient : On peut aussi définir la couleur de fond de l'élément survolé. Ainsi on obtient la même couleur pour l'élément que pour les sous-menus. KEIFLIN Cédric 29 Janvier