En este tutorial veremos cómo crear un menú off-canvas con Framework360, es decir, un menú que se abre de izquierda a derecha o de derecha a izquierda. Dentro del menú off-canvas podemos insertar cualquier tipo de contenido, como por ejemplo un menú de navegación o un carrito para nuestro sitio web de comercio electrónico.
Paso 1: Dirijámonos dentro de la pantalla “Pop-up”
Primero, debemos acceder a la opción "Sitio Web" en la barra lateral izquierda y posteriormente seleccionar la opción "Pop-up".
Paso 2: Realicemos el menú off-canvas
Una vez dentro de la pantalla "Pop-up" deberemos hacer clic en el botón "Agregar" en la parte superior derecha y luego construir nuestro pop-up off-canvas.
En este tutorial veremos cómo realizar un pop-up off-canvas dentro del cual estará presente el menú de navegación. La pantalla de creación del pop-up off-canvas está dividida en diferentes pestañas, ahora vamos a ver qué podemos hacer con cada una de ellas.
Pestaña “Contenido”
Dentro de la pestaña "Contenido", lo primero que haremos será insertar el título de nuestro menú off-canvas dentro de la correspondiente entrada "Título". Junto a la entrada "Título", Framework360 a través de la opción "Mostrar automáticamente" nos permite decidir si el pop-up deberá ser visualizado automáticamente o no al producirse determinadas condiciones que definiremos posteriormente en las pestañas "Condiciones" y "Comportamiento".
Atención: Las pestañas "Condiciones" y “Comportamiento” serán visibles y modificables solo en el caso de que decidamos activar la opción “Mostrar automáticamente”. En este tutorial, por completitud, veremos qué se puede hacer dentro de estas dos pestañas, pero en nuestro caso, tratándose de la creación de un pop-up off-canvas dentro del cual está presente el menú de navegación, no deberíamos activar la opción “Mostrar automáticamente”, ya que deberá ser el usuario quien haga clic en él si desea navegar por las páginas del sitio web.
Continuando a desplazarnos dentro de la pestaña, encontraremos la opción "Contenido" que nos dará la posibilidad de agregar nuestro menú de navegación al pop-up off-canvas que estamos realizando. Para hacer esto, deberemos hacer clic en "Agregar" para abrir el Visual Builder, dentro del cual añadiremos el contenido Navbar. Después de buscar el contenido Navbar dentro de la pantalla de búsqueda de contenidos en la parte izquierda de nuestro Visual Builder, deberemos arrastrarlo a la sección derecha para hacerlo visible dentro de nuestro pop-up, como se muestra en la figura siguiente. 
En este punto se abrirá la pantalla de personalización de nuestra Navbar donde podremos decidir qué menú insertar en su interior, nosotros seleccionaremos el menú principal.
Una vez seleccionado el menú principal tendremos la posibilidad de definir todas las configuraciones que éste deberá tener, como por ejemplo si deberá ser visualizado en vertical u horizontal, nosotros lo configuraremos en vertical. Para establecer el menú en vertical diríjase a la sección izquierda del Visual Builder en la opción “Apariencia” como se muestra en la figura siguiente:
Pestaña “Condiciones”
En este punto podemos desplazarnos dentro de la pestaña “Condiciones”, especificamos nuevamente que esta pestaña nos aparecerá solamente en caso de que dentro de la pestaña “Contenido” hayamos decidido mostrar automáticamente el pop-up que estamos realizando.
Una vez dentro de la pestaña “Condiciones” vamos a decidir a quién hacer visualizar automáticamente el pop-up.
Pestaña “Comportamiento”
También la pestaña “Comportamiento”, como hemos visto para la pestaña “Condiciones”, nos aparecerá solamente en caso de que dentro de la pestaña “Contenido” hayamos decidido mostrar automáticamente el pop-up.
Pestaña “Apariencia”
Dentro de la pestaña “Apariencia”, como sugiere el nombre, vamos a definir la apariencia que deberá tener nuestro pop-up off-canvas.
Dentro de la sección “Tipología” vamos a definir si el pop-up deberá abrirse de izquierda a derecha o de derecha a izquierda, seleccionando respectivamente la opción “Offcanvas – Izquierda” o “Offcanvas – Derecha”.
Además, dentro de la pestaña en análisis podremos definir todas las demás características estéticas de nuestro pop-up, como el ancho máximo o el color de fondo.
Paso 3: Creamos el menú burger
Si queremos crear un pop-up off-canvas dentro del cual estará presente nuestro menú de navegación, debemos eliminar las entradas del menú del encabezado del sitio e insertar en su lugar el icono clásico del menú burger. Este icono, al ser clicado, nos abrirá nuestro pop-up off-canvas con el menú principal dentro. Para hacer lo mencionado debemos ir a la sección “Bloques Globales” presente dentro de la barra lateral. Una vez dentro, hacemos clic en “
Header” para poder modificarlo.
A este punto, Framework360 nos abrirá la pantalla del Visual Builder para la modificación del header. Aquí, eliminaremos el menú y añadiremos el bloque "Icono", arrastrándolo a la fila en la parte superior derecha, como se muestra en la figura siguiente.
Posteriormente, en la opción "Seleccionar ícono", presente en la pantalla a la izquierda del Visual Builder dentro de la pestaña "General", seleccionamos el ícono de la Navbar.
Después de eso, dirijámonos a la opción “Evento al click”, también presente en la pantalla a la izquierda del Visual Builder dentro de la pestaña “General”, y seleccionemos “Abrir popup”, como se muestra en la figura:
Framework360, una vez definido como evento al clic la apertura del pop-up, nos preguntará qué pop-up queremos abrir, nosotros seleccionaremos nuestro menú off-canvas que hemos realizado en el paso anterior.
Así haciendo, después de haber recargado la página del sitio web, veremos que nuestro menú se transformará en un menú burger que, si se hace clic, abrirá un menú off-canvas con nuestros contenidos.
