Logotipo de Bitdoze

Cómo Añadir un Menú Flotante a un Sitio Web de Carrd

Cómo añadir un menú hamburguesa flotante a un sitio web de Carrd con HTML/CSS/JS personalizado. Incluye correcciones de accesibilidad, solución de problemas y consejos de estilo.

Dragos

Actualizado Publicado 35 min de lectura

Cómo Añadir un Menú Flotante a un Sitio Web de Carrd

Carrd.co es una plataforma sólida para sitios web de una sola página, pero cuando tu página tiene muchas secciones, los visitantes pierden la ubicación rápidamente. Un menú hamburguesa flotante lo soluciona. Le da a tu sitio de Carrd una navegación siempre visible que se ubica en la esquina inferior derecha, justo donde el pulgar descansa de forma natural en el móvil.

Los elementos nativos de Carrd no incluyen un componente de navegación flotante, así que necesitas código personalizado mediante el elemento Embed. La buena noticia: un bloque embed, un pegado y listo. El código de abajo incluye accesibilidad integrada (atributos ARIA, soporte de teclado, manejo de movimiento reducido) y no romperá el estilo existente de tu Carrd.

Si estás evaluando la plataforma, consulta primero nuestra reseña de Carrd.co.

Prueba Carrd.co

Por qué un menú hamburguesa flotante mejora tu sitio de Carrd

  • La navegación permanece accesible sin saturar el área de contenido principal, especialmente en pantallas móviles
  • El icono de hamburguesa es universalmente reconocido. Los usuarios saben que deben tocarlo para abrir un menú
  • La ubicación en la esquina inferior derecha coincide con la posición natural del pulgar para el uso móvil con una mano
  • Con position: fixed, el menú permanece visible mientras los visitantes se desplazan por toda tu página

Requisitos previos

Antes de empezar, asegúrate de tener:

  • Un plan Carrd Pro Standard ($19/año) o Pro Plus ($49/año). Los Embeds de código personalizado NO están disponibles en el plan Free ni en Pro Lite ($9/año). Esta es la razón número uno por la que el menú flotante “no funciona” para algunas personas: su plan no admite Embeds. Consulta la comparación de planes de Carrd para más detalles.
  • Un sitio de Carrd con secciones a las que quieras enlazar. Cada elemento del menú apunta a un ancla (como #about, #contact) que coincide con el nombre de un Section Break o Scroll Point. Si aún no has nombrado tus secciones, hazlo primero.
  • La posibilidad de publicar tu sitio. Los Embeds de código personalizado NO se previsualizan en el editor de Carrd. Debes publicar para ver el menú flotante en acción.

Se requiere un plan Pro

El elemento Embed requiere Carrd Pro Standard ($19/año) o superior. Los planes Free y Pro Lite ($9/año) no pueden usar embeds de código personalizado. Si estás en Pro Lite, tendrás que actualizar tu plan antes de que esto funcione.

Si ya has añadido un botón de volver arriba en Carrd, ya has usado el mismo flujo de trabajo con Embed. Para un desplazamiento suave entre secciones, consulta nuestra guía sobre desplazamiento suave y enlaces de anclaje en Carrd. Una vez que tu menú funcione, considera añadir un dominio personalizado a Carrd para una URL profesional.

Cómo añadir el menú hamburguesa flotante en Carrd

Tres pasos: añade un embed, pega el código, personaliza tus enlaces.

1. Añade un elemento Embed a tu sitio de Carrd

En el editor de Carrd, haz clic en el botón + y añade un elemento Embed en cualquier parte de la página. Configúralo así:

  • Type: Code
  • Style: Hidden, Body End

“Hidden, Body End” significa que el código se inyecta al final del <body> de la página, después de todo el contenido propio de Carrd. No aparecerá como un bloque de contenido visible en tu diseño y, como el menú es position: fixed, seguirá flotando en la esquina. No uses Head aquí: el fragmento contiene elementos HTML y un script que los busca, y eso pertenece al body. El embed es invisible en la vista previa del editor. Solo verás el menú después de publicar.

Configuración del elemento embed de Carrd mostrando Type: Code y Style: Hidden con el desplegable de ubicación

La captura muestra el desplegable de ubicación configurado en Head. Para este menú, elige Body End en ese mismo desplegable.

2. Añade el código HTML, CSS y JavaScript

Pega este código completo en el elemento Embed:

html
<style>
  :root {
    --primary-color-ha: rgba(0, 112, 15, 0.58);
    --secondary-color-ha: #fff;
    --font-size-base-ha: 16px;
    --floating-hamburger-size: 50px;
    --floating-font: inherit;
  }

  /* Scoped box-sizing: won't break Carrd's native styling */
  .floating-hamburger,
  .floating-hamburger *,
  .floating-menu,
  .floating-menu * {
    box-sizing: border-box;
  }

  .floating-hamburger {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: var(--floating-hamburger-size);
    height: var(--floating-hamburger-size);
    background-color: var(--primary-color-ha);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
  }

  .floating-hamburger:focus-visible {
    outline: 2px solid var(--secondary-color-ha);
    outline-offset: 2px;
  }

  .floating-hamburger .floating-bar {
    width: 30px;
    height: 3px;
    background-color: var(--secondary-color-ha);
    margin: 3px 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .floating-hamburger .floating-bar {
      transition: 0.4s;
    }
  }

  #floating-menu-toggle {
    display: none;
  }

  .floating-menu {
    position: fixed;
    bottom: calc(var(--floating-hamburger-size) + 30px);
    right: 20px;
    background-color: var(--primary-color-ha);
    padding: 20px;
    border-radius: 10px;
    transform: scale(0);
    transform-origin: bottom right;
    visibility: hidden;
    z-index: 999;
    font-family: var(--floating-font);
    font-size: var(--font-size-base-ha);
  }

  @media (prefers-reduced-motion: no-preference) {
    .floating-menu {
      transition: transform 0.3s ease-in-out, visibility 0.3s;
    }
  }

  #floating-menu-toggle:checked ~ .floating-menu {
    transform: scale(1);
    visibility: visible;
  }

  .floating-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .floating-menu li {
    margin: 15px 0;
  }

  .floating-menu li a {
    color: var(--secondary-color-ha);
    text-decoration: none;
    font-size: 1em;
  }

  @media (prefers-reduced-motion: no-preference) {
    .floating-menu li a {
      transition: font-size 0.3s ease;
    }
  }

  .floating-menu li a:hover {
    font-size: 1.1em;
  }

  .floating-menu a:focus-visible {
    outline: 2px solid var(--secondary-color-ha);
    outline-offset: 2px;
  }

  .floating-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--secondary-color-ha);
    font-size: 1.2em;
    cursor: pointer;
    font-family: var(--floating-font);
  }
</style>

<input type="checkbox" id="floating-menu-toggle" />
<label for="floating-menu-toggle" class="floating-hamburger"
       aria-label="Open navigation menu" tabindex="0" role="button">
  <span class="floating-bar"></span>
  <span class="floating-bar"></span>
  <span class="floating-bar"></span>
</label>
<nav class="floating-menu" role="navigation">
  <button class="floating-close-button" aria-label="Close menu">&#x2715;</button>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<script>
(function () {
  const toggle = document.getElementById("floating-menu-toggle");
  const label = document.querySelector(".floating-hamburger");

  // Toggle aria-expanded for screen readers
  toggle.addEventListener("change", function () {
    label.setAttribute("aria-expanded", this.checked);
  });
  label.setAttribute("aria-expanded", "false");

  // A label with role="button" doesn't react to Enter/Space on its own
  label.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      toggle.checked = !toggle.checked;
      label.setAttribute("aria-expanded", toggle.checked);
    }
  });

  // Close button
  document.querySelector(".floating-close-button").addEventListener("click", function () {
    toggle.checked = false;
    label.setAttribute("aria-expanded", "false");
    label.focus();
  });

  // Close on link click
  document.querySelectorAll(".floating-menu a").forEach(function (link) {
    link.addEventListener("click", function () {
      toggle.checked = false;
      label.setAttribute("aria-expanded", "false");
    });
  });

  // Escape key closes menu, returns focus to hamburger
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && toggle.checked) {
      toggle.checked = false;
      label.setAttribute("aria-expanded", "false");
      label.focus();
    }
  });
})();
</script>

Qué cambió respecto al código anterior

Dos correcciones críticas para los lectores que vuelven: (1) Se ha eliminado el reset global * { margin: 0; padding: 0; box-sizing: border-box; }. Estaba destruyendo el espaciado nativo de los elementos de Carrd. (2) Se ha eliminado la sobrescritura de body { font-size; font-family }. Estaba secuestrando todo el texto de la página. Ambos se reemplazan por selectores con ámbito que solo afectan al propio menú flotante.

Accesibilidad integrada

Este código incluye atributos ARIA (aria-label, aria-expanded, role="navigation"), contornos de foco visibles para usuarios de teclado, @media (prefers-reduced-motion: no-preference) envolviendo todas las animaciones, y soporte de la tecla Escape para cerrar el menú. Esto responde a los requisitos del European Accessibility Act (en vigor desde el 28 de junio de 2025) para elementos de interfaz interactivos.

Propiedades personalizadas de CSS explicadas

Estas variables al inicio del bloque <style> controlan la apariencia del menú. Cámbialas para que coincidan con el diseño de tu sitio:

  1. --primary-color-ha: Color de fondo del botón hamburguesa y del panel del menú. Usa rgba() para transparencia, así los visitantes pueden seguir viendo el contenido detrás del menú. Cambia los valores RGB y el alfa para que coincidan con tu marca. Usa https://rgbacolorpicker.com/ para elegir un color.

  2. --secondary-color-ha: Color de las barras de la hamburguesa, el texto del menú y el botón de cerrar. El valor por defecto es blanco (#fff).

  3. --font-size-base-ha: Tamaño de fuente base para los elementos del menú. El valor por defecto 16px es una buena base para la legibilidad.

  4. --floating-hamburger-size: Diámetro del botón circular de hamburguesa en píxeles. El valor por defecto 50px es cómodo de tocar en el móvil.

  5. --floating-font: Familia tipográfica para el texto del menú. El valor por defecto inherit usa la fuente de tu sitio de Carrd. Reemplázala por una pila de fuentes específica si quieres un aspecto diferente (p. ej., "Inter", sans-serif).

  6. .floating-hamburger .floating-bar width: 30px: Controla el ancho de las tres líneas de la hamburguesa. Ajústalo si quieres barras más estrechas o más anchas dentro del botón.

3. Personaliza los elementos y enlaces del menú

Los elementos del menú están en el <ul> dentro del <nav>:

html
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#testimonials">Testimonials</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

Añade, elimina o renombra elementos para que coincidan con las secciones de tu sitio de Carrd. Cada href debe usar el nombre que le diste a un Section Break o Scroll Point en el editor de Carrd (p. ej., #about enlaza al section break o scroll point llamado about). Usa #about, no #about-section, aunque Carrd renderice la sección como id="about-section". Usar href="#" hace scroll de vuelta al inicio de la página.

Para la mejor experiencia, combina este menú con el desplazamiento suave y los enlaces de anclaje en Carrd para que al hacer clic en un elemento del menú la página se desplace suavemente en lugar de saltar.

Verifica que tu menú flotante funciona

Después de publicar tu sitio de Carrd, repasa esta lista:

  1. Publica el sitio. Los embeds no funcionan en la vista previa del editor. Este es el error de “no funciona” más común.
  2. Abre la URL publicada en una ventana de incógnito/privada. Elimina cualquier estado en caché.
  3. Haz clic en el botón hamburguesa. El menú debería desplegarse escalándose desde la esquina inferior derecha.
  4. Haz clic en un enlace del menú. La página se desplaza a esa sección y el menú se cierra automáticamente.
  5. Haz clic en el botón de cerrar (✕). El menú se cierra y el foco vuelve al botón hamburguesa.
  6. Prueba en un dispositivo móvil real (o en el emulador de dispositivos de Chrome DevTools). El botón debería ser fácil de tocar con el pulgar.
  7. Prueba con teclado. Pulsa Tab hasta el botón hamburguesa, presiona Enter/Espacio para abrir, Tab por los elementos del menú, presiona Escape para cerrar. El foco debería volver a la hamburguesa.
  8. Comprueba que no haya solapamientos. El menú no debería cubrir otros elementos fijos como avisos de cookies o botones de volver arriba. Si tienes un botón de WhatsApp en Carrd u otros elementos flotantes similares, ajusta los valores de z-index para evitar conflictos de apilado.
  9. Prueba de movimiento reducido. Activa el ajuste “Reducir movimiento” de tu sistema operativo y verifica que el menú se abre y se cierra al instante, sin animación.

Los embeds no se previsualizan en el editor

DEBES publicar tu sitio de Carrd para ver el menú flotante. El editor de Carrd no renderiza los embeds de código personalizado en su vista previa. Si no puedes ver el menú, publica primero y luego revisa el sitio en vivo.

Solución de problemas comunes

El menú no aparece en absoluto

Tres cosas que comprobar en orden:

  1. Tu plan. Los embeds requieren Carrd Pro Standard ($19/año) o Pro Plus ($49/año). Los planes Free y Pro Lite ($9/año) no admiten código personalizado. Comprueba tu plan en carrd.co/docs/pro/plans.
  2. La configuración del embed. El embed debe estar configurado como Type: Code, Style: Hidden, Body End. Head es el lugar equivocado para el HTML y el script del menú, y un embed Inline colocado dentro de una sección desaparece cuando un sitio multisección cambia a otra sección.
  3. Estás mirando el editor, no el sitio publicado. Publica primero y luego abre la URL en vivo.
El menú rompe otros elementos de la página

Si estás usando un código antiguo que incluye * { margin: 0; padding: 0; box-sizing: border-box; }, ese reset global es el problema. Elimina el espaciado nativo de Carrd en cada elemento. Reemplázalo con la versión con ámbito del código de arriba: solo aplica box-sizing a los elementos propios del menú flotante.

El menú aparece detrás de otros elementos

Aumenta el z-index de .floating-hamburger (actualmente 1000) y .floating-menu (actualmente 999). El elemento con el valor de z-index más alto aparece encima. Si tienes otros elementos personalizados con valores de z-index altos, puede que necesites subir aún más. Si usas propiedades personalizadas de CSS para otras personalizaciones de Carrd como un alternador de modo oscuro, asegúrate de que los nombres de tus variables no entren en conflicto.

La hamburguesa no responde al clic

Es probable que otro elemento con posición fija esté solapando el botón hamburguesa. Haz clic derecho en el área de la hamburguesa, elige “Inspeccionar” y mira el z-index de los elementos cercanos. Un banner de cookies o un widget de chat con un z-index más alto bloqueará los clics. Ajusta los valores de z-index para que la hamburguesa quede por encima.

El JavaScript no funciona

Abre la consola de tu navegador (F12) y comprueba si hay errores. Si tienes varios embeds de Carrd con bloques <script>, pueden entrar en conflicto, especialmente si usan los mismos nombres de variables. Asegúrate de que cada embed use IDs y nombres de variables únicos. El truco del checkbox usado aquí es el mismo patrón que el de una ventana modal emergente en Carrd. Si tienes ambos, asegúrate de que cada uno use un ID de checkbox único.

El código no se guarda en el embed

Los embeds de Carrd tienen un límite de 16.384 caracteres. El código de este artículo está muy por debajo, pero si has añadido mucho CSS personalizado o elementos de menú extra, podrías alcanzarlo. Divide el código en dos embeds: pon el bloque <style> en un embed “Hidden, Head” y el HTML + <script> en un embed “Hidden, Body End”.

El menú funciona en escritorio pero no en móvil

Carrd tiene ajustes de visibilidad responsive por elemento. Comprueba que tu elemento Embed no esté oculto en los breakpoints móviles. En el editor de Carrd, selecciona el embed y busca los conmutadores de visibilidad. Asegúrate de que sea visible en todos los tamaños de dispositivo.

Métodos alternativos de navegación para Carrd

El menú hamburguesa flotante es una forma de gestionar la navegación en Carrd. Aquí tienes otros patrones según tus necesidades:

  • Header fijo (sticky). Una barra de cabecera fija con enlaces de navegación que permanece en la parte superior del viewport. Es un patrón visual distinto al de un botón flotante. Consulta nuestro tutorial de header fijo en Carrd.
  • Menú lateral. Un panel deslizante desde el borde de la pantalla, útil para sitios con muchos elementos de navegación. Nuestra guía de menú lateral para Carrd lo cubre.
  • Navbar responsive para móvil. Un menú hamburguesa que se integra en la cabecera de la página en lugar de flotar. Consulta navbar móvil responsive en Carrd para ver tres métodos diferentes.
  • Plugins de terceros. Widgets de Carrd prediseñados que gestionan la navegación por ti. Las opciones incluyen el plugin Tabs y el plugin Accordion de CarrdMe, o explora Plugin Kitchen y Jason’s Plugins para más.
¿Y qué pasa con la API nativa Popover?

El atributo HTML popover (Baseline 2025, soportado en todos los navegadores modernos) proporciona comportamiento de cierre al hacer clic fuera, renderizado en la capa superior y manejo de teclado de forma nativa, sin JavaScript. En teoría, podría simplificar el menú flotante significativamente. En la práctica, las restricciones de los embeds de Carrd pueden eliminar o interferir con los atributos popover. Todavía no lo he probado dentro de un embed de Carrd. Si lo pruebas y funciona, sería un enfoque más limpio que el truco del checkbox usado aquí.

Conclusión

Un menú hamburguesa flotante le da a tu sitio de Carrd de una página una navegación siempre accesible y orientada al móvil sin saturar el área de contenido. El código actualizado está acotado (sin resets globales de CSS que rompan el estilo de Carrd), es accesible (atributos ARIA, soporte de teclado, manejo de movimiento reducido) y personalizable mediante propiedades personalizadas de CSS.

Prueba en dispositivos reales después de publicar, ajusta los colores y el tamaño para que coincidan con tu marca, y tendrás un componente de navegación que funciona para cada visitante.

#Carrd#Floating Menu#Hamburger Menu

Artículos relacionados