https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Note de l'utilisateur: 0 / 5

Donnez une note !
0 sur 5 - 0 votes
Merci d'avoir noté cet article.

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.

Ajouter un Commentaire