Compatibilité Joomla!

Si vous cherchez à ajouter un menu accordéon à votre site Joomla! alors vous êtes au bon endroit. Je vais vous présenter mon module Menu Accordeon CK qui permet de créer un accordéon avec un menu sur une infinité de sous menus. On peut y ajouter une description sur chaque lien et une image (avec ou sans texte dans le lien), mais on peut aussi y charger n'importe quel module dans un sous menu.

On cherche souvent à faire de beaux menus sur son site, et il existe des tas de modules qui vous rendent de super services, tout comme mon module Maximenu_CK.

Cependant parfois on cherche à faire un truc vraiment particulier et là rien de tel que d'investir un peu de temps et d'énergie dans la construction de styles CSS. C'est ce que nous allons faire ici en combinant un menu image avec un menu dropline.

Tout d'abord il faut paramétrer le module de menu et les liens de menu et ensuite appliquer les styles CSS pour arriver à l'effet voulu.

Démo du menu Image Dropline

Paramétrage du module de menu

Il faut créer un module de menu dans lequel on autorise les sous-menus et auquel on donne un ID et un suffixe CSS.

L'identifiant et le suffixe CSS servent à appliquer des styles CSS en évitant au maximum les conflits avec les styles du template. Malgré tout en fonction du template utilisé vous aurez peut être besoin d'adapter les CSS pour obtenir un rendu correct.

Paramétrage du menu

Pour créer la structure du menu vous pouvez suivre le tutoriel de création de sous-menus.

Pour chaque lien du menu il faut choisir une image à afficher et dire à Joomla! de ne pas afficher le titre du lien. De cette manière on crée un menu image.

Les icônes qui sont utilisées pour la démo sont issues du pack suivant :

http://soundforge.deviantart.com/art/Upojenie-160055593

Création des styles CSS

La dernière étape consiste à injecter les styles CSS dans le template. Pour cela ouvrez une feuille de style de votre template, souvent 'template.css' et collez les lignes suivantes à la fin du fichier.

ul.menu_imagedropline#imagedropline img {
    border: none;
    background: none;
}

ul.menu_imagedropline#imagedropline li {
    list-style: none;
    border: none;
    background: none;
    float: left;
    padding: 0;
    margin: 5px;
}

ul.menu_imagedropline#imagedropline li li {
    list-style: none;
    border: none;
    background: none;
    float: left;
    margin: 0px;
}

ul.menu_imagedropline#imagedropline a {
    border: none;
    display: block;
}

ul.menu_imagedropline#imagedropline li.parent li a {
    border: none;
    display: block;
    line-height: 30px;
    padding: 0 10px 0 5px;
    margin: 0;
    color: #ddd;
    background: none;
    border-right: 1px solid #666;
    text-decoration: none;
}

ul.menu_imagedropline#imagedropline li.parent li a:hover {
    color: #fff;
    text-decoration: underline;
}


ul.menu_imagedropline#imagedropline li:hover,
ul.menu_imagedropline#imagedropline li a:hover {
    background: #555;
}

ul.menu_imagedropline#imagedropline {
    height: 70px;
    width: 100%;
    background: #444;
    position: relative;
}

ul.menu_imagedropline#imagedropline li.parent ul,
ul.menu_imagedropline#imagedropline li.parent li.parent ul {
    float: left;
    position: absolute;
    left: -999em;
    margin: 0;
    padding: 0;
}

ul.menu_imagedropline#imagedropline li.parent:hover ul,
ul.menu_imagedropline#imagedropline li.parent li.parent:hover ul {
    float: left;
    position: absolute;
    left: 0;
    width: 100%;
    height: 30px;
    background: #555;
    padding: 0;
    margin: 0;
}

La démo de ce menu est inspirée du menu pro_dropline8 sur CSSplay

Vous pouvez vous amuser à personnaliser le menu en ajoutant des flèches aux éléments parent afin d'indiquer qu'ils ont des sous-menus, ajouter des couleurs de fond différentes par sous-niveau, etc... à vous de jouer !

Compatibilité Joomla!

On peut chercher à créer un menu type Coverflow comme sur les Macs, fameux ordinateurs de la société Apple. Les Macs sont bien connus pour avoir des effets et des menus sympas et que l'on essaie souvent de reproduire sur son site. Maintenant c'est possible avec le module mooCoverFlow_CK pour Joomla! 1.6.

Voici deux démos du module mooCoverFlow_CK, l'un pour créer un menu image qui pointe vers les liens des pages (double cliquez sur les images pour ouvrir les liens), l'autre pour créer un album qui ouvre les images en grand dans une lightbox avec titre et description lorsque l'on double clique.

Double cliquez sur les images pour les ouvrir dans une lightbox.

Suivons les étapes pour la création du coverflow.

Création du menu images

Il faut créer un menu sur votre site Joomla!. Dans ce menu créez un item en définissant ses propriétés (titre, type de lien, lien, etc...). Le titre du menu est utilisé pour le titre de la vignette (si l'option est activée dans l'administration du module).

Le lien est utilisé si on double clique sur l'image pour rediriger la page.

Ensuite il faut définir l'image qui sera utilisée par le module. On la choisit dans les 'paramètres du type de liens' : 'Image du lien', cliiquez sur 'Sélection' puis choisissez l'image sur votre serveur et cliquez sur 'Insérer'.

Publication du module

On installe le module et on le publie dans une position du template. Les paramètres utilisés pour la première démo du menu sont les suivants :

J'ai réglé les paramètres de ratio, de zoom et de décalage vertical pour adapter à la taille des vignettes afin d'avoir le meilleur rendu. On peut jouer sur ces trois paramètres essentiellement pour les tailles voulues.

Création de la démo album

La deuxième démo utilise la puissance du système de menu Joomla! couplé à la souplesse du module mooCoverFlow_CK. On peut choisir d'utiliser l'option 'Utiliser la médiabox' pour afficher les images dans une lightbox. Pour cela vous devez avoir installé et publié le plugin système Mediabox_CK.

Pour obtenir le tutoriel complet de la démo album et pour apprendre à personnaliser les styles du module, vous pouvez télécharger la documentation du module mooCoverFlow_CK

Télécharger le module mooCoverFlow_CK pour Joomla! 1.6

Télécharger la documentation du module

Compatibilité Joomla!

Une demande qui revient souvent sur le forum joomla.fr concerne l'utilisation du module Maximenu_CK avec le template JA-Purity II. Etant donné que le template est déjà fourni avec un Mega menu en topmenu horizontal, je vais vous guider à travers ce petit tutoriel pour implémenter le Maximenu_CK dans la colonne de gauche.

Installation et paramétrage

Tout d'abord vous devez installer le template JA-Purity II et son plugin et l'assigner dans la gestion de vos templates dans l'administration de votre site Joomla!. Pensez aussi à activer le plugin Jat3.

Ensuite vous devez installer le module Maximenu_CK et le publier en position 'left'. Aperçu de l'administration du module :

Choisissez ensuite l'orientation vertical pour pour pouvoir l'utiliser correctement dans la colonne. Dans mon exemple je me base sur les CSS intégrés au thème par défaut du module Maximenu_CK.

Une fois installé et configuré, vous devez voir le menu dans la colonne de gauche, mais les sous-menus ne se déroulent pas au survol de la souris. Il faut modifier les CSS du template.

Pour créer des sous-menus suivez le tutoriel de création de sous-menus pour Joomla! 1.6.

Modification du template JA-Purity II

Dans le répertoire du template, cherchez et ouvrez le fichier

[MONSITE]/templates/ja_purity_ii/css/layout.css

allez à la ligne 22  :

.column { overflow: hidden; float: left; }

Supprimez la propriété 'overflow:hidden;'.

Répétez la même opération dans le fichier

[MONSITE]/plugins/system/jat3/jat3/base-themes/default/css/layout.css

à la ligne 17, supprimez 'overflow:hidden;'.

Ensuite cherchez et ouvrez le fichier

[MONSITE]/templates/ja_purity_ii/css/template.css

allez à la ligne 1117 à 1123  :

#ja-container ul.menu li {
 background: none;
 border-bottom: 1px dotted #ccc;
 margin: 0;
 overflow: hidden;
 padding: 0;
}

Supprimez la propriété 'overflow:hidden;'.

Et pour finir cherchez et ouvrez le fichier

[MONSITE]/plugins/system/jat3/jat3/base-themes/default/css/template.css

allez à la ligne 75 à 83  :

.ja-moduletable ul li,
.ja-module ul li,
.ja-content-main ul li {
 background: url(../images/bullet.gif) no-repeat 20px 7px;
 line-height: 160%;
 margin-bottom: 5px;
 overflow: hidden;
 padding-left: 30px;
}

Supprimez la propriété 'overflow:hidden;'.

Puis à la ligne 1025

#ja-container ul.menu li { background: none; margin: 0; overflow: hidden; padding: 0; }

Supprimez la propriété 'overflow:hidden;'.

Et voilà, le menu peut maintenant se dérouler de la gauche vers la droite lorsque l'on survole les éléments parent. Le framework JAT3 est assez complexe et les modifications CSS ne sont pas simples à effectuer, comme vous l'avez constaté il faut modifier le template et le plugin associé pour arriver au résultat.

Dans la plupart des cas lorsqu'il y a un problème de déroulement du Maximenu c'est le template qui crée des interférences, et dans environ 90% des cas c'est la propriété 'overflow:hidden;' qui en est la cause.