Tutoriels sur Joomla et la création de site

Configuration du Megamenu Purity III

L'image ci-dessous montre l'exemple du menu megamenu dans la démo purity III. En fait, vous pouvez faire beaucoup plus avec tout ce que le Megamenu est capable de faire.

Megamenu est une fonctionnalité principale de T3 Framework. La configuration visuelle (ce que vous configurez est ce que vous voyez en première page) du Megamenu vous aide à le configurer aisement.

Mega Menu ou Menu Joomla par défaut ?

Sur un site, vous pouvez utiliser le menu de Joomla par défaut dans un style de template et utiliser Megamenu dans les autres styles de template. Dans chaque style de template, vous pouvez configurer le système menu qu'il utilise. Si vous désactivez la fonction megamenu, le style de template utilisera alors le menu Joomla par défaut (menu déroulant).

Activer megamenu

Ouvrez le style de template où vous souhaitez activer le megamenu, allez à l'onglet navigation puis activez l'option megamenu.

Configurer le megamenu

La configuration megamenu est un paramètre général de sorte qu'elle est la même pour tous les styles de template. En haut du style de template, cliquez sur le bouton megamenu.

Sélectionnez le menu à afficher en front page

Vous pouvez sélectionner n'importe quel menu à configurer comme Megamenu. Mais ce n'est pas le menu qui s'affichera dans votre frontend. Le menu affiché dans votre frontend est le menu que vous assignez dans le paramètre de style de template, sous l'onglet Navigation.

Niveau de configuration MegaMenu

Il y a 3 niveaux de configurations dans Megamenu : lien de menu, colonne et sous-menu

Configuration de lien de menu

Le paramètre de lien de menu vous permet d'activer/désactiver son sous-menu, ajoutez une classe supplémentaire au style de l'élément de menu, ajoutez une icône et une légende pour le lien de menu.

Configuration de sous-menu

La configuration du sous-menu vous permet d'ajouter/supprimer une ligne dans le sous-menu, afficher ou masquer le sous-menu sur de petits écrans comme les mobiles, aligner le sous-menu à gauche, droite, centre ou justifier, ajouter une classe supplémentaire au style pour le sous-menu.

Configuration de colonne

Vous pouvez ajouter/supprimer une colonne, afficher ou masquer la colonne sur des petits écrans comme les mobiles, régler la largeur de la colonne, assigner un module si c'est un module de menu et ajouter une classe au style de la colonne.

5 étapes pour avoir Megamenu comme dans la démo

Commençons étape-par-étape la démarche pour faire une démo de Megamenu comme Purity III.
Ci-dessous le menu par défaut avant la configuration.

Étape 1: Activer l'option Groupe pour les menus: New layout et Classic Layout

Tout d'abord sélectionner l'élément de menu, puis activez l'option Group, qui regroupera les éléments du sous-menu d'un menu parent.

Étape 2: Modifier la taille de sous-menu

Sélectionnez le sous-menu, dont vous devez modifier la taille, puis remplissez la largeur désirée. C'est 850 pixels sur le site de démonstration.

Étape 3: Déplacer le menu "Classic Layout" dans la nouvelle colonne

Sélectionnez la mise en page classique puis la déplacer vers la colonne de droite en utilisant le bouton de position dans la barre de configuration.

Étape 4: Créer une nouvelle colonne de module

Pour créer une nouvelle colonne de module, sélectionnez la colonne "Classic layout" puis appuyez sur le bouton "+" dans la barre de configuration.

Maintenant assignez le contenu - n'importe quel module à la nouvelle colonne module créée.

Étape 5: Modifier la taille de colonne

Vous pouvez modifier la taille de la largeur de chaque colonne pour ajuster votre Megamenu en fonction du contenu affiché. Dans la démo de Purity III, la taille de chaque colonne est 3-3-6.

Style, icône et élément légende dans megamenu

Style Megamenu

Vous pouvez définir le style pour megamenu à partir du menu, sous-menu et de la colonne en ajoutant la classe de style au champ Extra Class. Sur la démo Purity III, nous n'utilisons aucune classe supplémentaire.

Ajouter une icône de lien de menu

Vous pouvez ajouter une icône pour chaque élément de menu dans votre megamenu. Cela peut être les icônes par défaut Bootstrap 3, icônes Font Awesome 3 ou celles de votre propre style. Sélectionnez l'élément de menu où vous voulez ajouter l'icône puis collez la classe icône dans le champ icon.

Ajouter une légende à l'élément de menu

PurityIII ne dispose pas de style de Légende de menu par défaut. Mais vous pouvez toujours personnaliser votre style souhaité pour Megamenu.

Configurer des effets / animations pour megamenu

Megamenu prend en charge un certain nombre de types d'animation. Pour configurer cette fonction, ouvrez un style de...