Système de menu

Système de Menu pris en charge par purity III:

Purity III prend en charge 3 systèmes de menu incluant Megamenu, la barre latérale Off-canvas et le menu par défaut Bootstrap sur petit écran comme les mobiles.

 Megamenu

Off-canvas sidebar

Default Bootstrap menu

La Configuration du menu dans Purity III est assez simple. Vous pouvez activer ou désactiver ces systèmes de menu sur votre site.

Dans les sections suivantes, nous allons vous guider pour avoir la meilleure façon de travailler avec le menu Purity III.

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...

Configuration de la Barre latérale Off-canvas

L'idée première de Off-canvas est un système de menu pour mobile, mais maintenant il est beaucoup plus flexible. Off-canvas est considéré comme une position de sorte que vous pouvez ajouter lui tout contenu en dehors de menu. Vous pouvez également choisir d'activer / désactiver dans des mises en page spécifiques.

Comment ajouter du contenu à la barre latérale Off-canvas?

Toutes les mises en page par défaut dans Purity III contiennent la position Off-canvas par défaut. Vous pouvez vérifier en ouvrant n'importe quelle mise en page.

Le contenu dans la barre latérale Off-canvas provient des modules affectés à la position off-canvas. Donc, si vous voulez ajouter du contenu à la barre latérale Off-canvas, Il suffit de placer le contenu dans un module puis d'assigner ce module à la position off-canvas.

Vous pouvez régler la barre latérale Off-canvas pour obtenir du contenu de n'importe quelle position. Dans le panneau de configuration de mise en page, affectez sidebar Off-canvas à la position dont vous souhaitez obtenir le contenu.

Comment utiliser Off-canvas comme menu principal sur mobile?

Off-canvas peut être utilisé en tant que menu principal sur mobile en suivant les 3 étapes ci-dessous.

Étape 1: Désactiver la barre latérale Off-canvas dans toutes les configurations responsives à l'exception de mobile.

Pour utiliser la barre latérale Off-canvas comme système de menus mobiles, il faudrait l'activer dans la mise en page mobile uniquement. Accédez au style de template, puis sélectionnez Layout >> Responsive layout >> layout Extra Small.

Étape 2: Créer le module de menu

Créer un module de menu puis l'attribuer à la position off-canvas.

Étape 3: Désactiver la navigation Bootstrap par défaut sur petits écrans

Si vous ne désactivez pas la navigation Bootstrap par défaut sur petits écrans, vous aurez 2 systèmes de menu sur la mise en page mobile.

Comment désactiver la barre latérale Off-canvas

Désactiver la sidebar Off-canvas dans n'importe quelle mise en page

La position Off canvas est incluse dans toutes les mises en page par défaut. Il y a 2 méthodes pour désactiver/supprimer celle-ci dans n'importe quelle mise en page.

#1: Dans le back-end de la mise en page

Ouvrez le style de template avec la mise en page où vous souhaitez désactiver la barre latérale Off-canvas puis l'affecter à "none".

# 2: Dans le fichier header.php.

Ouvrez le fichier header.php dans templates/purity_iii/tpls/blocks puis trouvez le code suivant:

    <!-- OFF-CANVAS -->
    	<?php if ($this->getParam('addon_offcanvas_enable')) : ?>
    		<?php $this->loadBlock ('off-canvas') ?>
    	<?php endif ?>
    	<!-- //OFF-CANVAS -->

Tout ce que vous devez faire est de supprimer cette partie:

    <?php $this->loadBlock ('off-canvas') ?>

Désactiver Off-canvas dans toutes les configurations responsive

Purity III est un template responsive qui prent en charge plusieurs mises en page responsives. Vous pouvez activer/désactiver la sidebar Off-canvas dans n'importe quelle mise en page responsive en sélectionnant celle à configurer puis en désactivant off-canvas sur la mise en page sélectionnée.

Comment déplacer la barre latérale Off-canvas à droite

Par défaut, la barre latérale Off-canvas se trouve à gauche, mais il est possible de le déplacer du côté droit.

Etape 1: Déplacez la barre latérale sur le côté droit

Ouvrez le fichier of-canvas.php dans templates/purity_iii/tpls/blocks, trouvez le code:

data-pos="left"

Changez-le:

data-pos="right"

Etape 2: Déplacer le bouton à droite

Ouvrez le fichier off-canvas.less dans templates/purity_iii/less, trouvez le style suivant :

    // Toggle Button
    // -------------------
    .off-canvas-toggle {
      border-radius: 0;
      border: 0;
      background: transparent;
      color: @navbar-default-color;
      padding: 0;
      width: @navbar-height;
      height: @navbar-height;
      line-height: @navbar-height;
      position: absolute;
      top: 0;
      left: 0;
      // States
      &:hover, &:active, &:focus {
        outline: none;
        .box-shadow(none);
        background: @navbar-default-border;
        color: @navbar-default-link-hover-color;
      }
    }

Remplacez le code :

left: 0;

par

right: 0;

Aperçu en Front-end

Le style de la barre latérale Off-canvas est également inclus dans le fichier off-canvas.less . Par conséquent, si vous souhaitez personnaliser le style, il suffit d'utiliser ce fichier.