Neste tutorial, veremos como criar um menu off-canvas com o Framework360, ou seja, um menu que se abre da esquerda para a direita ou da direita para a esquerda. Dentro do menu off-canvas, podemos inserir qualquer tipo de conteúdo, como por exemplo um menu de navegação ou um carrinho para o nosso site web e-commerce.
Passo 1: Vamos acessar a tela “Pop-up”
Primeiro, precisamos acessar a opção "Sitio Web" na barra lateral esquerda e em seguida selecionar a opção "Pop-up".
Passo 2: Vamos criar o menu off-canvas
Uma vez dentro da tela "Pop-up", devemos clicar no botão "Adicionar" no canto superior direito e depois construir nosso pop-up off-canvas.
Neste tutorial, veremos como criar um pop-up off-canvas dentro do qual estará presente o menu de navegação. A tela de criação do pop-up off-canvas está dividida em várias abas, vamos agora ver o que podemos fazer com cada uma delas.
Aba “Conteúdo”
Dentro da aba "Conteúdo", a primeira coisa a fazer é inserir o título do nosso menu off-canvas no campo apropriado "Título". Ao lado do campo "Título", o Framework360 através da opção "Mostrar automaticamente" nos permite decidir se o pop-up deve ser exibido automaticamente ou não quando determinadas condições que definiremos posteriormente nas abas "Condições" e "Comportamento" forem atendidas.
Atenção: As abas "Condições" e “Comportamento” estarão visíveis e editáveis apenas na hipótese de decidirmos ativar a opção “Mostrar automaticamente”. Neste tutorial, para completar, iremos ver o que podemos fazer dentro dessas duas abas, mas no nosso caso, tratando-se da criação de um pop-up off-canvas dentro do qual está presente o menu de navegação, não devemos ativar a opção “Mostrar automaticamente”, pois deverá ser o usuário a clicar nele na hipótese de querer navegar dentro das páginas do site.
Continuando a rolar dentro da aba, encontraremos a opção "Conteúdo" que nos darà a possibilidade de adicionar nosso menù de navegação ao pop-up off-canvas que estamos criando. Para fazer isso, teremos que clicar em "Adicionar" para abrir o Visual Builder, dentro do qual adicionaremos o conteúdo Navbar. Depois de procurar o conteúdo Navbar na tela de pesquisa de conteúdos à esquerda do nosso Visual Builder, teremos que arrastá-lo para a seção da direita para torná-lo visível dentro do nosso pop-up, como mostrado na figura seguinte. 
A este ponto, a tela de personalização da nossa Navbar será aberta, onde poderemos decidir qual menu inserir dentro dela, nós iremos selecionar o menu principal.
Uma vez selecionado o menu principal, teremos a possibilidade de definir todas as configurações que este último deverá ter, como por exemplo se deverá ser exibido na vertical ou horizontal, nós o configuraremos na vertical. Para configurar o menu na vertical, dirijamo-nos à seção esquerda do Visual Builder na opção “Aparência” como mostrado na figura seguinte:
Guia “Condições”
A este ponto, podemos nos mover para dentro da guia “Condições”, especificamos novamente que esta guia aparecerá somente se, dentro da guia “Conteúdo”, decidimos mostrar automaticamente o pop-up que estamos criando.
Uma vez dentro da guia “Condições”, vamos decidir quem verá automaticamente o pop-up.
Guia “Comportamento”
Também a guia “Comportamento”, como vimos para a guia “Condições”, aparecerá apenas no caso em que dentro da guia “Conteúdo” decidimos mostrar automaticamente o pop-up.
Guia “Aparência”
Dentro da guia “Aparência”, como o nome sugere, vamos definir a aparência que nosso pop-up off-canvas deve ter.
Dentro da voz “Tipologia” vamos definir se o pop-up deverá abrir da esquerda para a direita ou da direita para a esquerda, selecionando respectivamente a opção “Offcanvas – Esquerda” ou “Offcanvas – Direita”.
Além disso, dentro da aba em análise poderemos definir todas as outras características estéticas do nosso pop-up, como a largura máxima ou a cor de fundo.
Passo 3: Vamos criar o menu burger
Se queremos criar um pop-up off-canvas dentro do qual estará presente o nosso menu de navegação, devemos eliminar os itens do menu no cabeçalho do site e inserir em seu lugar o ícone clássico do menu burger. Este ícone, se clicado, abrirá nosso pop-up off-canvas com o menu principal dentro. Para fazer isso, devemos ir à voz “Blocos Globais” presente dentro da sidebar. Uma vez lá dentro, clique em “ Header” para poder modificá-lo.
A este ponto, o Framework360 nos abrirá a tela do Visual Builder para a edição do cabeçalho. Aqui, eliminaremos o menu e adicionaremos o bloco "Ícone", arrastando-o para a linha no canto superior direito, como mostrado na figura seguinte.
Em seguida, na opção "Selecionar ícone", presente na tela à esquerda do Visual Builder dentro da aba "Geral", selecionamos o ícone da Navbar.
Depois disso, dirijamo-nos à opção “Evento ao clicar”, também presente na tela à esquerda do Visual Builder dentro da aba “Geral”, e selecionamos “Abrir popup”, como mostrado na figura:
Framework360, uma vez definido como evento ao clicar a abertura do pop-up, nos perguntará qual pop-up queremos abrir, nós vamos selecionar o nosso menu off-canvas que realizamos na etapa anterior.
Dessa forma, após recarregar a página do site, veremos que o nosso menu se transformará em um menu burger que, se clicado, abrirá um menu off-canvas com nossos conteúdos.
