Dans ce tutoriel, nous allons voir comment créer un menu off-canvas avec Framework360, c'est-à-dire un menu qui s'ouvre de gauche à droite ou de droite à gauche. À l'intérieur du menu off-canvas, nous pouvons insérer tout type de contenu, comme par exemple un menu de navigation ou un panier pour notre site web e-commerce.
Étape 1 : Rendez-vous dans l'écran “Pop-up”
Tout d'abord, nous devons accéder à la section "Site Web" dans la barre latérale gauche et ensuite sélectionner l'option "Pop-up".
Étape 2 : Réalisons le menu off-canvas
Une fois dans l'écran "Pop-up", nous devrons cliquer sur le bouton "Ajouter" en haut à droite puis construire notre pop-up off-canvas.
Dans ce tutoriel, nous allons voir comment réaliser un pop-up off-canvas à l’intérieur duquel sera présent le menu de navigation. L'écran de création du pop-up off-canvas est divisé en plusieurs onglets, voyons maintenant ce que nous pouvons faire avec chacun d'eux.
Onglet “Contenu”
À l'intérieur de l'onglet "Contenu", tout d'abord, insérons le titre de notre menu off-canvas dans la case prévue "Titre". À côté de la case "Titre", Framework360 via l'option "Afficher automatiquement" nous permet de décider si le pop-up devra être affiché automatiquement ou non lors de la survenance de certaines conditions que nous définirons par la suite dans les onglets "Conditions" et "Comportement".
Attention : Les onglets "Conditions" et “Comportement” ne seront visibles et modifiables que si nous décidons d'activer l’option “Afficher automatiquement”. Dans ce tutoriel, pour complétude, nous allons voir ce que nous pouvons faire à l’intérieur de ces deux onglets, mais dans notre cas, étant donné qu'il s'agit de la création d'un pop-up off-canvas à l'intérieur duquel se trouve le menu de navigation, nous ne devrions pas activer l’option “Afficher automatiquement”, car c’est l’utilisateur qui devra cliquer dessus s’il souhaite naviguer à l’intérieur des pages du site web.
En continuant à faire défiler l'onglet, nous trouverons l'élément "Contenu" qui nous donnera la possibilité d'ajouter notre menu de navigation au pop-up off-canvas que nous sommes en train de réaliser. Pour ce faire, nous devrons cliquer sur "Ajouter" pour ouvrir le Visual Builder, dans lequel nous ajouterons le contenu Navbar. Après avoir recherché le contenu Navbar dans l'écran de recherche de contenu situé à gauche de notre Visual Builder, nous devrons le faire glisser dans la section de droite pour le rendre visible dans notre pop-up, comme montré dans la figure suivante. 
À ce stade, l'écran de personnalisation de notre Navbar s'ouvrira où nous pourrons décider quel menu insérer à l'intérieur, nous allons sélectionner le menu principal.
Une fois le menu principal sélectionné, nous aurons la possibilité de définir tous les paramètres que ce dernier devra avoir, comme par exemple s'il devra être affiché verticalement ou horizontalement, nous le configurerons en vertical. Pour configurer le menu en vertical, rendons-nous dans la section gauche du Visual Builder à l'onglet “Apparence” comme montré dans la figure suivante :
Onglet “Conditions”
À ce stade, nous pouvons nous déplacer à l’intérieur de l’onglet “Conditions”, précisons à nouveau que cet onglet ne s’affichera que si, dans l’onglet “Contenu”, nous avons décidé d'afficher automatiquement le pop-up que nous sommes en train de réaliser.
Une fois dans l’onglet “Conditions”, nous allons décider à qui faire afficher automatiquement le pop-up.
Onglet “Comportement”
Tout comme l'onglet “Conditions”, l'onglet “Comportement” ne s'affichera que si nous avons décidé d'afficher automatiquement la fenêtre contextuelle dans l'onglet “Contenu”.
Onglet “Apparence”
Dans l'onglet “Apparence”, comme son nom l'indique, nous allons définir l'apparence que notre fenêtre contextuelle off-canvas doit avoir.
Dans la section “Typologie”, nous allons définir si le pop-up devra s’ouvrir de gauche à droite ou de droite à gauche, en sélectionnant respectivement l’option “Offcanvas – Gauche” ou “Offcanvas – Droite”.
De plus, dans l’onglet en cours d’analyse, nous pourrons définir toutes les autres caractéristiques esthétiques de notre pop-up, comme la largeur maximale ou la couleur de fond.
Étape 3 : Créons le menu burger
Si nous voulons créer un pop-up off-canvas dans lequel sera présent notre menu de navigation, nous devons supprimer les éléments du menu dans l'en-tête du site et insérer à leur place l'icône classique du menu burger. Cette icône, si elle est cliquée, ouvrira notre pop-up off-canvas contenant le menu principal. Pour ce faire, nous devons aller à la section “Blocs Globaux” présente dans la barre latérale. Une fois à l’intérieur, cliquons sur “
En-tête” pour pouvoir le modifier.
À ce stade, Framework360 nous ouvrira l'écran du Visual Builder pour la modification de l'en-tête. Ici, nous supprimerons le menu et ajouterons le bloc "Icône", en le faisant glisser dans la ligne en haut à droite, comme montré dans la figure suivante.
Ensuite, dans la section "Sélectionner une icône", présente dans l'écran à gauche du Visual Builder dans l'onglet "Général", sélectionnons l'icône de la Navbar.
Après cela, rendons-nous à la section “Événement au clic”, également présente dans l'écran à gauche du Visual Builder dans l'onglet “Général”, et sélectionnons “Ouvrir popup”, comme montré sur la figure :
Framework360, une fois défini comme événement au clic l’ouverture du pop-up, nous demandera quel pop-up nous voulons ouvrir, nous allons sélectionner notre menù off-canvas que nous avons réalisé à l’étape précédente.
Ce faisant, après avoir rechargé la page du site web, nous verrons que notre menù se transformera en un menù burger qui, si cliqué, ouvrira un menù off-canvas avec nos contenus.
