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.

offcanvas 1

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.

offcanvas 2

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.

offcanvas 3

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.

offcanvas 4

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.

offcanvas 5

Étape 2: Créer le module de menu

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

offcanvas 6

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

offcanvas 7

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

offcanvas 8

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

offcanvas 5

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

offcanvas 9

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.

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels