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.
