Como criar um menu HAMBURGUER no GreatPages

Acesse o editor de páginas;



Clique no ícone de engrenagem que fica no canto superior direito da tela;



Em seguida, clique em "Javascript & CSS";



Clique para "Adicionar" um novo código;



Escolha um nome para seu código, selecione a opção "Funcionamento" e adicione no campo de texto todo o código abaixo;

<style>
  
    /* Personalize o seu menu (ALTERE AQUI)*/

    :root {
      --color-icon: #268DF3; /* Cor do ícone */
      --color-background-icon: #FFFFFF; /* Cor de fundo do ícone */
      --text-color: #268DF3; /* Cor do texto */
      --text-background-color: #FFFFFF; /* Cor de fundo do menu */
      --hover-color: #B0C4DE; /* Cor de fundo ao passar o mouse */
      --menu-icon-size: 15px; /* Tamanho do ícone do menu */
      --menu-position: left; /* Altere para 'right' se desejar o menu à direita, 'left' para inserir na esquerda. */
    }
  
    /* Configurações gerais para o menu (NÃO ALTERAR) */

   @media (min-width: 768px) {
  .custom-menu {
    display: none;
    }
  }

    .custom-menu { background: var(--color-background-icon);box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);border-radius: 20%; padding: 5px; position: fixed; margin-top: 110px; margin-left: 15px; top: 0; z-index: 9000; }
    .custom-menu-right { right: 20px; }
    .custom-menu:hover .custom-menu-content { display: block; }
    .custom-menu-button { color: var(--color-icon); background-color: transparent; padding: 10px; font-size: var(--menu-icon-size); text-transform: uppercase; cursor: pointer; font-weight: bold; border: none; }
    .custom-menu-content { background-color: var(--text-background-color); min-width: 170px; position: absolute; display: none; }
    .custom-menu-content a { color: var(--text-color); padding: 10px 14px; text-decoration: none; font-size: 15px; display: block; }
    .custom-menu-content a:hover { background-color: var(--hover-color); }
    .custom-menu-right .custom-menu-content { left: auto; right: 15px; }  
    .custom-menu-left .custom-menu-content { left: 15px; }

  </style>

  <div class="custom-menu custom-menu-{{menuPosition}}">

    <button class="custom-menu-button" onclick="toggleMenu()"><svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 448 512" style="width: var(--menu-icon-size); height: var(--menu-icon-size);"><path fill="currentColor" d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></button>
    
    <div class="custom-menu-content">
      <div class="menu-content-url">

        <a href="https://URL_DA_PÁGINA/">Subtítulo1</a> <!-- ALTERE AQUI -->
        <a href="https://URL_DA_PÁGINA/">Subtítulo2</a> <!-- ALTERE AQUI -->
        <a href="https://URL_DA_PÁGINA/">Subtítulo3</a> <!-- ALTERE AQUI -->
        
      </div>
    </div>

  </div>

  <!-- SCRIPT (NÃO ALTERAR) -->
  
  <script>

    function toggleMenu() {
      var menuContent = document.querySelector('.custom-menu-content');
      menuContent.style.display = menuContent.style.display === 'block' ? '' : 'block';
    }
  
    document.addEventListener('click', function (event) { if (!document.querySelector('.custom-menu').contains(event.target)) { document.querySelector('.custom-menu-content').style.display = ''; } });
  
    window.addEventListener('scroll', function () { document.querySelector('.custom-menu').style.top = 0; });
  
    var menuPosition = getComputedStyle(document.documentElement).getPropertyValue('--menu-position');

    if (menuPosition.trim() === 'right') {
      document.querySelector('.custom-menu').classList.add('custom-menu-right');
    } else { document.querySelector('.custom-menu').classList.add('custom-menu-left'); }

  </script>

Pronto! Menu instalado e funcionando. 🥳 Agora vamos para as configurações essenciais…

CONFIGURAÇÕES INDISPENSÁVEIS PARA O SEU MENU

Alterar o Título do Menu

Para alterar o título de cada menu, desça próximo ao final do código e substitua as palavras: "SubTítulo1", "SubTítulo2" e "SubTítulo3" pelos nomes desejados. 🙂





Alterar os Redirecionamentos do Menu

Para mudar para onde cada link deve levar, vá próximo ao final do código e procure pela palavra "href". Aí, você pode trocar o link que está dentro dos parênteses pela URL que você quiser. Não remova as aspas.




Exemplo:

Se você quiser fazer com que os itens do menu levem para nossa página principal, você precisaria mudar os links da seguinte maneira:

<a href= "https://URL_DA_PÁGINA/">... para <a href="https://www.greatpages.com.br/">...


(Opcional) Adicionando Novos Tópicos no Menu

Se você quiser colocar mais tópicos no menu, é fácil. Tudo que você precisa fazer é copiar e colar um pedaço de código, e prontinho! Vamos lá:

Copie este código:

<a href="https://URL_DA_PÁGINA/">Novo Menu</a>

Cole o código que você copiou logo abaixo dos links que já existem no menu. Depois de adicionar essa linha, o final do seu código deve ficar parecido com isso:

<div class="dropdown-content">
    <a href="https://URL_DA_PÁGINA/">Título1</a>
    <a href="https://URL_DA_PÁGINA/">Título2</a>
    <a href="https://URL_DA_PÁGINA/">Título3</a>
    <a href="https://URL_DA_PÁGINA/">Novo Menu</a>
  </div>
</div>

CONFIGURAR A APARÊNCIA DO SEU MENU (Localizado no início do código) 🎨

IMPORTANTE: Todas as cores devem ser inseridas em formato hexadecimal. Segue um exemplo de link: https://celke.com.br/artigo/tabela-de-cores-html-nome-hexadecimal-rgb


Alterar cor do Ícone do Menu:

Para modificar a cor do ícone do menu, você pode alterar a propriedade " --color-icon: ".


Alterar cor de fundo do ícone do Menu:

Para modificar a cor de fundo do ícone, você pode alterar a propriedade " --color-background-icon: ".

OBS: Caso queira um fundo transparente, basta inserir: "var(transparente);" depois do --color-icon: . Exemplo:




Cores dos Textos:

Para modificar a cor dos textos do menu, você pode alterar a propriedade " ---text-color: ".


Cores Internas do Menu:

Para modificar a cor de fundo interna do menu, você pode alterar a propriedade " --text-background-color: ".


Cor ao Passar o Mouse:

Para definir a cor que aparece quando você passar o mouse/clicar sobre os itens do menu, você pode alterar a propriedade " --hover-color: ".


Alterar tamanho do ícone do Menu:

Para modificar o tamando do ícone, você pode alterar a propriedade " --menu-icon-size: ".


Alterar posição do ícone do Menu:

Para ajustar a posição do menu entre a direita e a esquerda, você pode modificar a propriedade " --menu-position: ".

Por padrão, o menu está localizado à esquerda. Para movê-lo para a direita, insira " Right "; para restaurá-lo à esquerda, insira " Left ".



Completamos o tutorial e agora seu menu está pronto para ser usado! Com todas as personalizações e ajustes realizados, você transformou seu menu para atender às necessidades do seu site. 🎉

Esperamos ter ajudado! Qualquer dúvida, chame nosso suporte. Estamos sempre à disposição.

Atualizado em: 28/08/2024