> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# (MEDIANTE CÓDIGO) Como crear un MENÚ HAMBURGUESA en GreatPages

||| Disponible solo para la versión móvil

1. Accede al editor de páginas;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/botao-editar-design_x4rrg8.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/clicar-engrenagem_t794yf.png =313xauto)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/achar-js_1m6oex3.png =650xauto)

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

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/adicionar-codigo_1xq97wd.png)

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;

```html
<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>
```

||| Importante: El menú no funcionará si se inserta en un bloque fijo de la página, es decir, un bloque que baja junto con el scroll. \*\*

### CONFIGURACIONES INDISPENSABLES

**Cambiar el Título del Menú**

Para cambiar el título de cada menú, en el **código sustituye** las palabras: ${color}[#ff0000](**"Subtítulo1", "Subtítulo2" y "Subtítulo3"**) por los nombres que desees. 🙂

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/image_f48x93.png)

**Cambiar los Redireccionamientos del Menú**

Para cambiar hacia dónde debe llevar cada enlace, en el código **busca la palabra "href"**. Ahí puedes ${color}[#ff0000](cambiar el enlace que está dentro de los paréntesis por la URL que quieras.)  **No elimines las comillas.**

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/image_eyefwz.png)

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

|| <a href= "https://URL\_DA\_PÁGINA/">... a  <a href="https://www.greatpages.com.br/">...

**(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:

```html
<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:

```html
<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Ú

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/screenshot-2024-04-03-113024_10pro5t.png)

||| IMPORTANTE: Todos los colores deben ingresarse en formato hexadecimal. Aquí tienes un enlace de ejemplo: https://celke.com.br/artigo/tabela-de-cores-html-nome-hexadecimal-rgb

**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:

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/screenshot-2024-04-02-142410_p675t3.png)

**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. <3