Section de la barre latérale coulissante dans le thème Divi

Apprenez à créer une section de barre latérale coulissante lisse avec CSS et jQuery personnalisés!

Une section de la barre latérale est un outil formidable et utile, mais elle peut également distraire l'utilisateur du contenu principal de votre page. Surtout quand cela prend beaucoup de place sur le site Web.

C'est pourquoi dans ce tutoriel, je vais vous montrer comment utiliser Divi Builder pour créer une barre latérale coulissante qui n'apparaîtra qu'après avoir cliqué sur le bouton.

Nous allons utiliser le CSS personnalisé et du code jQuery pour y parvenir. Regardez ma vidéo étape par étape et copiez le code que nous avons utilisé ci-dessous!

Si vous êtes notre abonné, n'hésitez pas à télécharger le fichier JSON!

Télécharger cet aperçu en direct de cette mise en page

Ressources gratuites pour les amoureux de Divi

Rejoignez notre newsletter pour obtenir les bonnes choses!

Nous vous fournirons des mises à jour sur les nouveaux didacticiels, les éléments de conception Web et les offres spéciales. Obtenez des goodies Divi de qualité supérieure directement dans votre boîte de réception! Lisez notre politique de confidentialité pour savoir comment nous gérons et protégeons vos informations soumises.

Inscrivez-vous pour télécharger

Accédez à cette mise en page et à toutes les ressources gratuites conçues exclusivement pour nos abonnés!

Déjà inscrit?

Remplissez le formulaire d'inscription et si vous êtes sur la liste, il vous mènera directement à la page de téléchargement!

Étape 1. Ajoutez une section dans le Divi Builder

Dans l'onglet Avancé du paramètre de section, nous devons changer la position de la section de la barre latérale sur «Fixe». Nous devons également inclure une classe CSS personnalisée. La classe CSS utilisée dans l'exemple de démonstration est appelée dl-slide-sidebar.

La largeur maximale de la section est fixée à 300px et s'il y a beaucoup de contenu, assurez-vous de changer la valeur de débordement horizontal en «défilement» (dans l'onglet Avancé des paramètres de la section).

Étape 2. Ajoutez le bouton Fermer dans la barre latérale

Pour créer un bouton de fermeture X, nous avons utilisé le module Blurb ajouté dans la section de la barre latérale. Le module n'a pas de titre, ni de contenu. Nous avons activé l'icône et changé la largeur, la hauteur et la taille de l'icône à 50px. Pour vous assurer que la section de la barre latérale glisse lorsque vous cliquez sur le texte, nous avons ajouté une classe CSS personnalisée de dl-close afin que nous puissions cibler cet élément dans notre code JavaScript.

Étape 3. Ajoutez le déclencheur Button

Nous utilisons un Divi Button standard avec une classe CSS personnalisée de bascule dl-btn. Le texte du bouton sera modifié dynamiquement, mais lors du chargement de la page, il est défini sur «Ouvrir».

Ajoutez les styles CSS!

Voici le code CSS que nous avons utilisé pour masquer la barre latérale uniquement si ce n'est dans le Visual Builder et pour l'afficher lorsqu'il obtient une nouvelle classe CSS de est ouvert. le "TranslateX" la valeur doit correspondre à la largeur de la section. Le dernier bit ajoute un curseur de main au module Blurb:

body:not(.et-fb) .dl-slide-sidebar {
  transform:translateX(300px);
}
body:not(.et-fb) .dl-slide-sidebar.is-opened {
  transform:translateX(0);
}
.dl-slide-sidebar.has-transition {
  transition:.7s;
}
.dl-close {
  cursor:pointer;
}

Enfin, la magie jQuery!

Ceci est le code jQuery final. Pour comprendre ce qu'il fait – veuillez regarder la vidéo 😉

jQuery(document).ready(function($) {
	var dl_ButtonToggle = $('.dl-btn-toggle');
  	var dl_SlideSidebar = $('.dl-slide-sidebar');
  	
  	function dl_SidebarCheck() {
      if (dl_ButtonToggle.hasClass('is-opened')) {
        dl_ButtonToggle.text('Close');
      }
      else {
        dl_ButtonToggle.text('Open');
      }
    }
  
  
  	dl_ButtonToggle.click(function(e) {
      e.preventDefault();
      dl_ButtonToggle.toggleClass('is-opened');
      dl_SlideSidebar.toggleClass('is-opened');
      dl_SlideSidebar.addClass('has-transition');
      dl_SidebarCheck();
    })
	
  	$('.dl-close').click(function() {
      $('.is-opened').removeClass('is-opened');
      dl_SidebarCheck();
    })
});

Qu'est-ce que tu penses?

N'hésitez pas à l'utiliser sur votre site internet et n'hésitez pas à nous montrer le résultat final! Nous sommes impatients de voir les effets de votre travail!

Nous apprécions toujours vos commentaires, alors partagez votre avis avec nous dans les commentaires!

Leave a Reply 0 comments

Leave a Reply: