Cómo crear un menú HAMBURGUESA en GreatPages

1. Accede al editor de páginas;

2. Haz clic en el ícono de engranaje que está en la esquina superior derecha de la pantalla;

3. Luego, haz clic en "Javascript & CSS";

4. Haz clic para "Adicionar" un nuevo código;

5. Elige un nombre para tu código, selecciona la opción "Funcionamento", elimina el código de ejemplo y agrega en el campo de texto todo el código de abajo;

<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: #000000; /* 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: 17px; /* Tamanho do ícone do menu */
   }

   /* 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; top: 12px; left: 12px; z-index: 9000;cursor: pointer; }
   .custom-menu-button { height:38px;pointer-events:none;color: var(--color-icon); background-color: transparent; padding: 10px; font-size: var(--menu-icon-size); text-transform: uppercase; 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>

   <!-- Personalize o redirecionamento (ALTERE AQUI)-->
<div class="custom-menu left" onclick="toggleMenu()">
  <button class="custom-menu-button"><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="URL_DA_PÁGINA/">Subtítulo1</a>
      <a href="URL_DA_PÁGINA/">Subtítulo2</a>
      <a href="URL_DA_PÁGINA/">Subtítulo2</a>
    </div>
  </div>
</div>

<!--Configurações gerais para o menu (NÃO ALTERAR)-->
<script>
function toggleMenu() {
     var menuContent = document.querySelector('.custom-menu-content');
     menuContent.style.display = menuContent.style.display === 'block' ? '' : 'block';
     event.stopPropagation();
   };
   window.toggleMenu = toggleMenu;
   document.addEventListener('click', function(event) {
    var menuContent = document.querySelector('.custom-menu-content');
    var menuButton = document.querySelector('.custom-menu-button');
    if (!menuContent.contains(event.target) && !menuButton.contains(event.target)) {
      menuContent.style.display = '';
    }
  });
 </script>

CONFIGURACIONES INDISPENSABLES

Cambiar el Título del Menú

Para cambiar el título de cada menú, en el código sustituye las palabras: "Subtítulo1", "Subtítulo2" y "Subtítulo3" por los nombres que desees. 🙂

Cambiar los Redireccionamientos del Menú

Para cambiar hacia dónde debe llevar cada enlace, en el código busca la palabra "href". Ahí puedes cambiar el enlace que está dentro de los paréntesis por la URL que quieras. No elimines las comillas.

Ejemplo: Si quieres que los elementos del menú lleven a nuestra página principal, tendrías que cambiar los enlaces de la siguiente manera:

(Opcional) Agregar Nuevos Temas en el Menú

Si quieres poner más temas en el menú, es fácil. ¡Todo lo que necesitas hacer es copiar y pegar un fragmento de código, y listo! Vamos allá:

Copia este código:

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

Pega el código que copiaste justo debajo de los enlaces que ya existen en el menú. Después de agregar esa línea, el final de tu código debe quedar parecido a esto:

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

CONFIGURAR LA APARIENCIA DE TU MENÚ

Cambiar el color del Ícono del Menú: Para modificar el color del ícono del menú, puedes cambiar la propiedad " --color-icon: ".

Cambiar el color de fondo del ícono del Menú: Para modificar el color de fondo del ícono, puedes cambiar la propiedad " --color-background-icon: ".

Nota: Si quieres un fondo transparente, solo tienes que ingresar: "var(transparente);" después de --color-icon: . Ejemplo:

Colores de los Textos: Para modificar el color de los textos del menú, puedes cambiar la propiedad " ---text-color: ".

Colores Internos del Menú: Para modificar el color de fondo interno del menú, puedes cambiar la propiedad " --text-background-color: ".

Color al Pasar el Mouse: Para definir el color que aparece cuando pasas el mouse o haces clic sobre los elementos del menú, puedes cambiar la propiedad " --hover-color: ".

Cambiar el tamaño del ícono del Menú: Para modificar el tamaño del ícono, puedes cambiar la propiedad " --menu-icon-size: ".

¡Completamos el tutorial y ahora tu menú está listo para usarse! Con todas las personalizaciones y ajustes realizados, transformaste tu menú para atender las necesidades de tu sitio. 🎉

¡Esperamos haberte ayudado! Ante cualquier duda, habla con nuestro soporte. Siempre estamos a tu disposición.

Actualizado el: 29/07/2026