{"id":19461,"date":"2026-07-03T06:46:00","date_gmt":"2026-07-03T04:46:00","guid":{"rendered":"https:\/\/martagonzalez.dev\/wp\/blog\/\/"},"modified":"2026-06-11T15:11:55","modified_gmt":"2026-06-11T13:11:55","slug":"como-animar-un-menu-movil-con-css","status":"publish","type":"post","link":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/","title":{"rendered":"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS"},"content":{"rendered":"
<\/div>
<\/div><\/div>\n
\"\"<\/figure>\n\n\n\n

Los men\u00fas de navegaci\u00f3n para dispositivos m\u00f3viles se han convertido en un componente imprescindible en la mayor\u00eda de los sitios web. Cuando el espacio disponible en pantalla es reducido, la navegaci\u00f3n principal suele ocultarse detr\u00e1s de un bot\u00f3n reconocible, generalmente representado mediante tres l\u00edneas horizontales. Al pulsarlo, el men\u00fa aparece con una transici\u00f3n que ayuda al usuario a comprender qu\u00e9 est\u00e1 ocurriendo en la interfaz.<\/p>\n\n\n\n

Sin embargo, a\u00f1adir movimiento a un men\u00fa no consiste \u00fanicamente en aplicar una propiedad transition<\/code>. Una animaci\u00f3n mal planteada puede generar saltos visuales, problemas de rendimiento o dificultades de accesibilidad. Por el contrario, un men\u00fa m\u00f3vil CSS animado<\/strong> correctamente implementado puede mejorar la orientaci\u00f3n, reforzar la jerarqu\u00eda visual y hacer que la navegaci\u00f3n resulte m\u00e1s natural.<\/p>\n\n\n\n

En esta gu\u00eda veremos c\u00f3mo animar un men\u00fa m\u00f3vil con CSS<\/strong>, qu\u00e9 estructura HTML conviene utilizar, c\u00f3mo controlar su apertura, qu\u00e9 propiedades ofrecen mejor rendimiento y c\u00f3mo respetar las preferencias de movimiento de cada persona.<\/p>\n\n\n\n

\u00bfQu\u00e9 es un men\u00fa m\u00f3vil animado?<\/h2>\n\n\n\n

Un men\u00fa m\u00f3vil animado es un sistema de navegaci\u00f3n dise\u00f1ado para pantallas peque\u00f1as que permanece oculto hasta que el usuario activa un bot\u00f3n. Al abrirse o cerrarse, el panel cambia de estado mediante una transici\u00f3n o una animaci\u00f3n.<\/p>\n\n\n\n

El patr\u00f3n m\u00e1s habitual es el denominado men\u00fa hamburguesa CSS<\/strong>, aunque tambi\u00e9n pueden utilizarse otros iconos, como una flecha, varios puntos o una etiqueta de texto que indique claramente \u201cMen\u00fa\u201d.<\/p>\n\n\n\n

La animaci\u00f3n puede aplicarse de diferentes maneras:<\/p>\n\n\n\n

    \n
  • Desplazando el panel desde uno de los laterales.<\/li>\n\n\n\n
  • Mostr\u00e1ndolo desde la parte superior.<\/li>\n\n\n\n
  • Aplicando una aparici\u00f3n gradual.<\/li>\n\n\n\n
  • Escalando el contenido desde un punto concreto.<\/li>\n\n\n\n
  • Ocupando toda la pantalla con una capa de navegaci\u00f3n.<\/li>\n\n\n\n
  • Animando cada enlace con un peque\u00f1o retraso.<\/li>\n<\/ul>\n\n\n\n

    El objetivo no deber\u00eda ser llamar la atenci\u00f3n mediante efectos complejos. La animaci\u00f3n tiene que explicar el cambio de estado<\/strong>, no dificultarlo.<\/p>\n\n\n\n

    Cuando el men\u00fa se desplaza desde el lateral derecho, por ejemplo, el usuario percibe que existe un panel fuera del \u00e1rea visible. Cuando se desvanece, entiende que el elemento estaba oculto y acaba de aparecer. El movimiento aporta contexto espacial a la interacci\u00f3n.<\/p>\n\n\n\n

    Estructura b\u00e1sica de un men\u00fa hamburguesa accesible<\/h2>\n\n\n\n

    Antes de comenzar con la animaci\u00f3n, necesitamos una estructura HTML clara y sem\u00e1ntica.<\/p>\n\n\n\n

    Aunque es posible abrir y cerrar un men\u00fa utilizando exclusivamente CSS mediante un checkbox<\/code>, en un proyecto real suele ser preferible emplear un bot\u00f3n y una peque\u00f1a cantidad de JavaScript. Esto facilita la gesti\u00f3n de atributos de accesibilidad como aria-expanded<\/code>.<\/p>\n\n\n\n

    <header class=\"site-header\">\n  <a class=\"site-logo\" href=\"\/\">\n    Marta Gonz\u00e1lez\n  <\/a>\n\n  <button\n    class=\"menu-toggle\"\n    type=\"button\"\n    aria-expanded=\"false\"\n    aria-controls=\"mobile-menu\"\n    aria-label=\"Abrir men\u00fa\"\n  >\n    <span class=\"menu-toggle__line\"><\/span>\n    <span class=\"menu-toggle__line\"><\/span>\n    <span class=\"menu-toggle__line\"><\/span>\n  <\/button>\n\n  <nav\n    class=\"mobile-menu\"\n    id=\"mobile-menu\"\n    aria-label=\"Navegaci\u00f3n principal\"\n  >\n    <ul class=\"mobile-menu__list\">\n      <li><a href=\"\/\">Inicio<\/a><\/li>\n      <li><a href=\"\/servicios\/\">Servicios<\/a><\/li>\n      <li><a href=\"\/proyectos\/\">Proyectos<\/a><\/li>\n      <li><a href=\"\/blog\/\">Blog<\/a><\/li>\n      <li><a href=\"\/contacto\/\">Contacto<\/a><\/li>\n    <\/ul>\n  <\/nav>\n<\/header>\n<\/code><\/pre>\n\n\n\n
    El bot\u00f3n utiliza aria-controls<\/code> para indicar qu\u00e9 elemento controla. El atributo aria-expanded<\/code> comunica si el men\u00fa est\u00e1 abierto o cerrado.<\/p>\n\n\n\n
    Estos detalles no modifican la apariencia, pero s\u00ed ayudan a quienes navegan mediante lectores de pantalla u otras tecnolog\u00edas de asistencia.<\/p>\n\n\n\n
    \u00bfPor qu\u00e9 conviene utilizar un bot\u00f3n?<\/h3>\n\n\n\n
    Un error habitual consiste en crear el activador mediante un <div><\/code> o un <span><\/code>. Aunque estos elementos pueden recibir eventos de clic, no ofrecen de forma predeterminada el comportamiento de un bot\u00f3n.<\/p>\n\n\n\n
    Un elemento <button><\/code>:<\/p>\n\n\n\n
      \n
    • Puede recibir el foco mediante teclado.<\/li>\n\n\n\n
    • Se activa con las teclas adecuadas.<\/li>\n\n\n\n
    • Tiene una sem\u00e1ntica reconocible.<\/li>\n\n\n\n
    • Permite utilizar atributos aria<\/code>.<\/li>\n\n\n\n
    • No requiere recrear manualmente comportamientos nativos.<\/li>\n<\/ul>\n\n\n\n
      Siempre que un elemento ejecute una acci\u00f3n, el bot\u00f3n suele ser la opci\u00f3n correcta<\/strong>.<\/p>\n\n\n\n
      C\u00f3mo crear la apariencia inicial del men\u00fa<\/h2>\n\n\n\n
      Empecemos definiendo algunas variables y los estilos generales del encabezado.<\/p>\n\n\n\n
      :root {\n  --header-height: 4.5rem;\n  --menu-background: #ffffff;\n  --menu-text: #020101;\n  --menu-accent: #cc2b5e;\n  --menu-duration: 350ms;\n  --menu-easing: cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  color: var(--menu-text);\n  font-family: system-ui, sans-serif;\n}\n\n.site-header {\n  position: relative;\n  z-index: 20;\n  display: flex;\n  min-height: var(--header-height);\n  align-items: center;\n  justify-content: space-between;\n  padding-inline: 1.25rem;\n  background: #ffffff;\n}\n\n.site-logo {\n  position: relative;\n  z-index: 30;\n  color: inherit;\n  font-weight: 700;\n  text-decoration: none;\n}\n<\/code><\/pre>\n\n\n\n
      El z-index<\/code> del encabezado ser\u00e1 importante cuando coloquemos el men\u00fa en una capa independiente.<\/p>\n\n\n\n
      Estilos del bot\u00f3n hamburguesa<\/h3>\n\n\n\n
      El bot\u00f3n tendr\u00e1 tres l\u00edneas que despu\u00e9s transformaremos en una cruz.<\/p>\n\n\n\n
      .menu-toggle {\n  position: relative;\n  z-index: 30;\n  display: grid;\n  width: 3rem;\n  height: 3rem;\n  padding: 0.65rem;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n}\n\n.menu-toggle__line {\n  display: block;\n  width: 100%;\n  height: 2px;\n  margin: auto;\n  border-radius: 999px;\n  background: currentColor;\n  transform-origin: center;\n  transition:\n    transform var(--menu-duration) var(--menu-easing),\n    opacity 200ms ease;\n}\n\n.menu-toggle:focus-visible {\n  outline: 3px solid var(--menu-accent);\n  outline-offset: 3px;\n}\n<\/code><\/pre>\n\n\n\n
      El estilo :focus-visible<\/code> permite mostrar un indicador claro cuando el control recibe el foco mediante teclado.<\/p>\n\n\n\n
      No conviene eliminar el contorno con outline: none<\/code> sin proporcionar una alternativa. El foco visible es esencial para saber qu\u00e9 elemento est\u00e1 activo.<\/p>\n\n\n\n
      C\u00f3mo animar un men\u00fa m\u00f3vil con CSS mediante transform<\/h2>\n\n\n\n
      Una de las soluciones m\u00e1s eficaces consiste en colocar el men\u00fa fuera de la pantalla y desplazarlo cuando se activa.<\/p>\n\n\n\n
      .mobile-menu {\n  position: fixed;\n  inset: 0 0 0 auto;\n  z-index: 10;\n  display: grid;\n  width: min(85vw, 25rem);\n  min-height: 100dvh;\n  padding:\n    calc(var(--header-height) + 2rem)\n    2rem\n    2rem;\n  background: var(--menu-background);\n  box-shadow: -1rem 0 3rem rgb(0 0 0 \/ 15%);\n  transform: translateX(100%);\n  visibility: hidden;\n  transition:\n    transform var(--menu-duration) var(--menu-easing),\n    visibility 0s linear var(--menu-duration);\n}\n\n.mobile-menu.is-open {\n  transform: translateX(0);\n  visibility: visible;\n  transition:\n    transform var(--menu-duration) var(--menu-easing),\n    visibility 0s linear 0s;\n}\n<\/code><\/pre>\n\n\n\n
      El panel empieza con translateX(100%)<\/code>, por lo que queda desplazado hacia la derecha. Al a\u00f1adir la clase .is-open<\/code>, vuelve a su posici\u00f3n original.<\/p>\n\n\n\n
      La propiedad visibility<\/code> evita que los enlaces ocultos puedan recibir el foco. Su transici\u00f3n se retrasa durante el cierre para que el panel no desaparezca antes de completar el movimiento.<\/p>\n\n\n\n
      \u00bfPor qu\u00e9 utilizar transform en lugar de left o right?<\/h3>\n\n\n\n
      Tambi\u00e9n podr\u00edamos animar la propiedad right<\/code>:<\/p>\n\n\n\n
      .mobile-menu {\n  right: -100%;\n}\n\n.mobile-menu.is-open {\n  right: 0;\n}\n<\/code><\/pre>\n\n\n\n
      Visualmente podr\u00eda ofrecer un resultado parecido, pero animar propiedades relacionadas con la posici\u00f3n y la geometr\u00eda puede obligar al navegador a recalcular la distribuci\u00f3n de la p\u00e1gina.<\/p>\n\n\n\n
      En cambio, transform<\/code> suele ser una opci\u00f3n m\u00e1s adecuada para el movimiento. Por este motivo, al plantear una mobile menu animation CSS<\/strong>, normalmente conviene priorizar:<\/p>\n\n\n\n
        \n
      • transform<\/code><\/li>\n\n\n\n
      • opacity<\/code><\/li>\n<\/ul>\n\n\n\n
        Estas propiedades permiten crear animaciones fluidas sin modificar continuamente las dimensiones o la posici\u00f3n calculada del documento.<\/p>\n\n\n\n
        Controlar la apertura del men\u00fa con JavaScript<\/h2>\n\n\n\n
        CSS se ocupar\u00e1 de la animaci\u00f3n, mientras que JavaScript cambiar\u00e1 el estado del componente.<\/p>\n\n\n\n
        const menuButton = document.querySelector(\".menu-toggle\");\nconst mobileMenu = document.querySelector(\".mobile-menu\");\n\nfunction setMenuState(isOpen) {\n  mobileMenu.classList.toggle(\"is-open\", isOpen);\n  menuButton.classList.toggle(\"is-active\", isOpen);\n\n  menuButton.setAttribute(\"aria-expanded\", String(isOpen));\n  menuButton.setAttribute(\n    \"aria-label\",\n    isOpen ? \"Cerrar men\u00fa\" : \"Abrir men\u00fa\"\n  );\n\n  document.body.classList.toggle(\"menu-open\", isOpen);\n}\n\nmenuButton.addEventListener(\"click\", () => {\n  const isOpen =\n    menuButton.getAttribute(\"aria-expanded\") === \"true\";\n\n  setMenuState(!isOpen);\n});\n<\/code><\/pre>\n\n\n\n
        La funci\u00f3n centraliza todos los cambios relacionados con el estado:<\/p>\n\n\n\n
          \n
        • A\u00f1ade o elimina la clase del panel.<\/li>\n\n\n\n
        • Actualiza el bot\u00f3n.<\/li>\n\n\n\n
        • Modifica aria-expanded<\/code>.<\/li>\n\n\n\n
        • Cambia la etiqueta accesible.<\/li>\n\n\n\n
        • A\u00f1ade una clase al body<\/code>.<\/li>\n<\/ul>\n\n\n\n
          Esta \u00faltima clase permite impedir que la p\u00e1gina contin\u00fae desplaz\u00e1ndose mientras el men\u00fa ocupa la pantalla.<\/p>\n\n\n\n
          body.menu-open {\n  overflow: hidden;\n}\n<\/code><\/pre>\n\n\n\n
          Centralizar el comportamiento evita inconsistencias. Si en el futuro a\u00f1adimos nuevas formas de cerrar el men\u00fa, todas podr\u00e1n llamar a la misma funci\u00f3n.<\/p>\n\n\n\n
          C\u00f3mo transformar el icono hamburguesa en una cruz<\/h2>\n\n\n\n
          Las l\u00edneas del bot\u00f3n tambi\u00e9n pueden animarse para indicar que el men\u00fa se encuentra abierto.<\/p>\n\n\n\n
          .menu-toggle.is-active .menu-toggle__line:nth-child(1) {\n  transform: translateY(0.56rem) rotate(45deg);\n}\n\n.menu-toggle.is-active .menu-toggle__line:nth-child(2) {\n  opacity: 0;\n  transform: scaleX(0);\n}\n\n.menu-toggle.is-active .menu-toggle__line:nth-child(3) {\n  transform: translateY(-0.56rem) rotate(-45deg);\n}\n<\/code><\/pre>\n\n\n\n
          La primera y la tercera l\u00ednea se desplazan hacia el centro y rotan. La l\u00ednea central desaparece mediante opacity<\/code> y scaleX<\/code>.<\/p>\n\n\n\n
          El resultado es una transici\u00f3n reconocible entre el icono de men\u00fa y el icono de cierre.<\/p>\n\n\n\n
          Ajustar la transformaci\u00f3n sin valores fr\u00e1giles<\/h3>\n\n\n\n
          El desplazamiento de las l\u00edneas depende del tama\u00f1o del bot\u00f3n, del espacio disponible y de la distribuci\u00f3n interna. Por ello, no conviene copiar valores de otro proyecto sin revisarlos.<\/p>\n\n\n\n
          Una alternativa m\u00e1s controlable consiste en posicionar las l\u00edneas de forma absoluta:<\/p>\n\n\n\n
          .menu-toggle {\n  position: relative;\n}\n\n.menu-toggle__line {\n  position: absolute;\n  left: 25%;\n  width: 50%;\n}\n\n.menu-toggle__line:nth-child(1) {\n  top: 32%;\n}\n\n.menu-toggle__line:nth-child(2) {\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.menu-toggle__line:nth-child(3) {\n  bottom: 32%;\n}\n\n.menu-toggle.is-active .menu-toggle__line:nth-child(1) {\n  top: 50%;\n  transform: translateY(-50%) rotate(45deg);\n}\n\n.menu-toggle.is-active .menu-toggle__line:nth-child(2) {\n  opacity: 0;\n  transform: translateY(-50%) scaleX(0);\n}\n\n.menu-toggle.is-active .menu-toggle__line:nth-child(3) {\n  bottom: 50%;\n  transform: translateY(50%) rotate(-45deg);\n}\n<\/code><\/pre>\n\n\n\n
          Esta soluci\u00f3n ofrece un mayor control sobre el punto en el que las l\u00edneas se cruzan.<\/p>\n\n\n\n
          Animar los enlaces del men\u00fa de forma escalonada<\/h2>\n\n\n\n
          Adem\u00e1s del panel, podemos animar cada enlace con un peque\u00f1o retraso. Este recurso se conoce habitualmente como animaci\u00f3n escalonada o staggered animation<\/em>.<\/p>\n\n\n\n
          .mobile-menu__list {\n  display: grid;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.mobile-menu__list li {\n  opacity: 0;\n  transform: translateX(1.25rem);\n  transition:\n    transform 300ms var(--menu-easing),\n    opacity 300ms ease;\n}\n\n.mobile-menu.is-open .mobile-menu__list li {\n  opacity: 1;\n  transform: translateX(0);\n}\n<\/code><\/pre>\n\n\n\n
          Despu\u00e9s podemos aplicar diferentes retrasos:<\/p>\n\n\n\n
          .mobile-menu.is-open .mobile-menu__list li:nth-child(1) {\n  transition-delay: 80ms;\n}\n\n.mobile-menu.is-open .mobile-menu__list li:nth-child(2) {\n  transition-delay: 120ms;\n}\n\n.mobile-menu.is-open .mobile-menu__list li:nth-child(3) {\n  transition-delay: 160ms;\n}\n\n.mobile-menu.is-open .mobile-menu__list li:nth-child(4) {\n  transition-delay: 200ms;\n}\n\n.mobile-menu.is-open .mobile-menu__list li:nth-child(5) {\n  transition-delay: 240ms;\n}\n<\/code><\/pre>\n\n\n\n
          El desfase debe ser breve. Si cada elemento tarda demasiado en aparecer, el usuario tendr\u00e1 que esperar para encontrar el enlace que necesita.<\/p>\n\n\n\n
          Una animaci\u00f3n escalonada funciona mejor cuando:<\/p>\n\n\n\n
            \n
          • Hay pocos elementos.<\/li>\n\n\n\n
          • Los retrasos son reducidos.<\/li>\n\n\n\n
          • El movimiento conserva una misma direcci\u00f3n.<\/li>\n\n\n\n
          • El contenido contin\u00faa siendo usable con rapidez.<\/li>\n<\/ul>\n\n\n\n
            Utilizar una variable CSS para controlar el retraso<\/h4>\n\n\n\n
            Podemos evitar varios selectores nth-child<\/code> utilizando una variable personalizada:<\/p>\n\n\n\n
            <li style=\"--item-index: 0\"><a href=\"\/\">Inicio<\/a><\/li>\n<li style=\"--item-index: 1\"><a href=\"\/servicios\/\">Servicios<\/a><\/li>\n<li style=\"--item-index: 2\"><a href=\"\/proyectos\/\">Proyectos<\/a><\/li>\n<li style=\"--item-index: 3\"><a href=\"\/blog\/\">Blog<\/a><\/li>\n<li style=\"--item-index: 4\"><a href=\"\/contacto\/\">Contacto<\/a><\/li>\n<\/code><\/pre>\n\n\n\n
            .mobile-menu.is-open .mobile-menu__list li {\n  transition-delay: calc(70ms + var(--item-index) * 40ms);\n}\n<\/code><\/pre>\n\n\n\n
            As\u00ed, la duraci\u00f3n puede ajustarse desde un \u00fanico lugar.<\/p>\n\n\n\n
            A\u00f1adir una capa oscura detr\u00e1s del men\u00fa<\/h2>\n\n\n\n
            Cuando el men\u00fa aparece como un panel lateral, resulta \u00fatil oscurecer el contenido situado detr\u00e1s. Esta capa dirige la atenci\u00f3n y comunica que la p\u00e1gina principal se encuentra temporalmente inactiva.<\/p>\n\n\n\n
            Podemos crearla mediante un pseudoelemento:<\/p>\n\n\n\n
            .site-header::before {\n  content: \"\";\n  position: fixed;\n  inset: 0;\n  z-index: 5;\n  background: rgb(0 0 0 \/ 45%);\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity var(--menu-duration) ease,\n    visibility 0s linear var(--menu-duration);\n}\n\n.site-header:has(.mobile-menu.is-open)::before {\n  opacity: 1;\n  visibility: visible;\n  transition:\n    opacity var(--menu-duration) ease,\n    visibility 0s linear 0s;\n}\n<\/code><\/pre>\n\n\n\n
            La pseudoclase :has()<\/code> permite modificar el encabezado cuando contiene un men\u00fa abierto.<\/p>\n\n\n\n
            Tambi\u00e9n podemos crear una capa independiente en el HTML. Esta alternativa resulta pr\u00e1ctica cuando queremos cerrar el men\u00fa al pulsar fuera del panel.<\/p>\n\n\n\n
            <div class=\"menu-overlay\" aria-hidden=\"true\"><\/div>\n<\/code><\/pre>\n\n\n\n
            .menu-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 5;\n  background: rgb(0 0 0 \/ 45%);\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity var(--menu-duration) ease,\n    visibility 0s linear var(--menu-duration);\n}\n\n.menu-overlay.is-visible {\n  opacity: 1;\n  visibility: visible;\n  transition-delay: 0s;\n}\n<\/code><\/pre>\n\n\n\n
            Y actualizamos JavaScript:<\/p>\n\n\n\n
            const menuOverlay = document.querySelector(\".menu-overlay\");\n\nfunction setMenuState(isOpen) {\n  mobileMenu.classList.toggle(\"is-open\", isOpen);\n  menuButton.classList.toggle(\"is-active\", isOpen);\n  menuOverlay.classList.toggle(\"is-visible\", isOpen);\n\n  menuButton.setAttribute(\"aria-expanded\", String(isOpen));\n  menuButton.setAttribute(\n    \"aria-label\",\n    isOpen ? \"Cerrar men\u00fa\" : \"Abrir men\u00fa\"\n  );\n\n  document.body.classList.toggle(\"menu-open\", isOpen);\n}\n\nmenuOverlay.addEventListener(\"click\", () => {\n  setMenuState(false);\n});\n<\/code><\/pre>\n\n\n\n
            Cerrar el men\u00fa con la tecla Escape<\/h2>\n\n\n\n
            Un men\u00fa accesible deber\u00eda poder cerrarse mediante la tecla Escape<\/code>.<\/p>\n\n\n\n
            document.addEventListener(\"keydown\", (event) => {\n  if (event.key !== \"Escape\") {\n    return;\n  }\n\n  const isOpen =\n    menuButton.getAttribute(\"aria-expanded\") === \"true\";\n\n  if (isOpen) {\n    setMenuState(false);\n    menuButton.focus();\n  }\n});\n<\/code><\/pre>\n\n\n\n
            Al cerrar el panel, devolvemos el foco al bot\u00f3n que lo abri\u00f3. De esta forma, quien navega mediante teclado no pierde su posici\u00f3n en la interfaz.<\/p>\n\n\n\n
            Tambi\u00e9n puede ser conveniente cerrar el men\u00fa despu\u00e9s de seleccionar un enlace:<\/p>\n\n\n\n
            mobileMenu.addEventListener(\"click\", (event) => {\n  const clickedLink = event.target.closest(\"a\");\n\n  if (clickedLink) {\n    setMenuState(false);\n  }\n});\n<\/code><\/pre>\n\n\n\n
            Esta medida resulta especialmente \u00fatil en p\u00e1ginas de una sola secci\u00f3n, donde los enlaces llevan a distintos puntos del mismo documento.<\/p>\n\n\n\n
            Animaciones alternativas para un men\u00fa m\u00f3vil<\/h2>\n\n\n\n
            El desplazamiento lateral es una soluci\u00f3n frecuente, pero no es la \u00fanica forma de animar un men\u00fa CSS<\/strong>.<\/p>\n\n\n\n
            Men\u00fa desplegable desde la parte superior<\/h3>\n\n\n\n
            Podemos hacer que el men\u00fa aparezca debajo del encabezado.<\/p>\n\n\n\n
            .mobile-menu {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  left: 0;\n  min-height: auto;\n  transform: translateY(-1rem);\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    transform 250ms ease,\n    opacity 250ms ease,\n    visibility 0s linear 250ms;\n}\n\n.mobile-menu.is-open {\n  transform: translateY(0);\n  opacity: 1;\n  visibility: visible;\n  transition-delay: 0s;\n}\n<\/code><\/pre>\n\n\n\n
            Esta variante funciona bien en men\u00fas cortos que no necesitan ocupar toda la pantalla.<\/p>\n\n\n\n
            Men\u00fa a pantalla completa<\/h3>\n\n\n\n
            Un men\u00fa superpuesto puede ocupar todo el viewport:<\/p>\n\n\n\n
            .mobile-menu {\n  position: fixed;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  min-height: 100dvh;\n  padding: 5rem 2rem 2rem;\n  background: var(--menu-background);\n  opacity: 0;\n  transform: scale(1.03);\n  visibility: hidden;\n  transition:\n    opacity 300ms ease,\n    transform 400ms var(--menu-easing),\n    visibility 0s linear 400ms;\n}\n\n.mobile-menu.is-open {\n  opacity: 1;\n  transform: scale(1);\n  visibility: visible;\n  transition-delay: 0s;\n}\n<\/code><\/pre>\n\n\n\n
            El cambio de escala debe ser sutil. Una ampliaci\u00f3n excesiva puede resultar agresiva o generar una sensaci\u00f3n de movimiento innecesaria.<\/p>\n\n\n\n
            Aparici\u00f3n mediante clip-path<\/h3>\n\n\n\n
            Otra opci\u00f3n visual consiste en revelar el men\u00fa progresivamente con clip-path<\/code>.<\/p>\n\n\n\n
            .mobile-menu {\n  position: fixed;\n  inset: 0;\n  clip-path: circle(0 at calc(100% - 2.5rem) 2.5rem);\n  visibility: hidden;\n  transition:\n    clip-path 500ms var(--menu-easing),\n    visibility 0s linear 500ms;\n}\n\n.mobile-menu.is-open {\n  clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem);\n  visibility: visible;\n  transition-delay: 0s;\n}\n<\/code><\/pre>\n\n\n\n
            Este efecto puede resultar atractivo, pero deber\u00eda comprobarse en los navegadores y dispositivos incluidos en los requisitos del proyecto.<\/p>\n\n\n\n
            La soluci\u00f3n m\u00e1s llamativa no siempre es la m\u00e1s adecuada. Para la mayor\u00eda de las interfaces, una transici\u00f3n sencilla con transform<\/code> y opacity<\/code> ser\u00e1 m\u00e1s f\u00e1cil de mantener.<\/p>\n\n\n\n
            C\u00f3mo respetar prefers-reduced-motion<\/h2>\n\n\n\n
            Algunas personas reducen las animaciones en el sistema operativo porque el movimiento puede provocar molestias, mareos o dificultades de concentraci\u00f3n.<\/p>\n\n\n\n
            La media query prefers-reduced-motion<\/code> permite adaptar la experiencia.<\/p>\n\n\n\n
            @media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    scroll-behavior: auto !important;\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    transition-delay: 0ms !important;\n  }\n}\n<\/code><\/pre>\n\n\n\n
            Tambi\u00e9n podemos aplicar una versi\u00f3n m\u00e1s espec\u00edfica:<\/p>\n\n\n\n
            @media (prefers-reduced-motion: reduce) {\n  .mobile-menu,\n  .mobile-menu__list li,\n  .menu-toggle__line,\n  .menu-overlay {\n    transition: none;\n  }\n}\n<\/code><\/pre>\n\n\n\n
            La segunda opci\u00f3n evita modificar todas las animaciones del proyecto y se limita al componente.<\/p>\n\n\n\n
            Respetar esta preferencia no significa eliminar funcionalidad. El men\u00fa debe continuar abri\u00e9ndose y cerr\u00e1ndose, pero sin una transici\u00f3n prolongada.<\/p>\n\n\n\n
            Adaptar el men\u00fa a escritorio<\/h2>\n\n\n\n
            Un men\u00fa m\u00f3vil no deber\u00eda continuar oculto detr\u00e1s de un bot\u00f3n cuando existe espacio suficiente para mostrar la navegaci\u00f3n completa.<\/p>\n\n\n\n
            @media (min-width: 48rem) {\n  .menu-toggle,\n  .menu-overlay {\n    display: none;\n  }\n\n  .mobile-menu {\n    position: static;\n    display: block;\n    width: auto;\n    min-height: auto;\n    padding: 0;\n    background: transparent;\n    box-shadow: none;\n    transform: none;\n    visibility: visible;\n  }\n\n  .mobile-menu__list {\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n  }\n\n  .mobile-menu__list li {\n    opacity: 1;\n    transform: none;\n    transition: none;\n  }\n\n  body.menu-open {\n    overflow: auto;\n  }\n}\n<\/code><\/pre>\n\n\n\n
            El punto de ruptura no deber\u00eda elegirse \u00fanicamente por un dispositivo concreto. Conviene observar el momento en el que los enlaces dejan de caber c\u00f3modamente en una l\u00ednea.<\/p>\n\n\n\n
            Un men\u00fa puede necesitar transformarse en m\u00f3vil a 768 p\u00edxeles, 900 p\u00edxeles o cualquier otra anchura, dependiendo de:<\/p>\n\n\n\n
              \n
            • La cantidad de enlaces.<\/li>\n\n\n\n
            • La longitud de las etiquetas.<\/li>\n\n\n\n
            • El tama\u00f1o del logotipo.<\/li>\n\n\n\n
            • El espacio entre elementos.<\/li>\n\n\n\n
            • El idioma del sitio.<\/li>\n\n\n\n
            • El dise\u00f1o general del encabezado.<\/li>\n<\/ul>\n\n\n\n
              Errores frecuentes al animar un men\u00fa m\u00f3vil<\/h2>\n\n\n\n
              Animar display: none<\/h3>\n\n\n\n
              La propiedad display<\/code> no puede interpolarse como opacity<\/code> o transform<\/code>.<\/p>\n\n\n\n
              Este c\u00f3digo no producir\u00e1 una transici\u00f3n gradual:<\/p>\n\n\n\n
              .mobile-menu {\n  display: none;\n  opacity: 0;\n}\n\n.mobile-menu.is-open {\n  display: block;\n  opacity: 1;\n}\n<\/code><\/pre>\n\n\n\n
              Cuando el elemento pasa de display: none<\/code> a display: block<\/code>, aparece directamente. Despu\u00e9s puede aplicarse la opacidad, pero el proceso no siempre ofrece el resultado esperado.<\/p>\n\n\n\n
              Para controlar la interacci\u00f3n y la visibilidad durante una transici\u00f3n, podemos combinar:<\/p>\n\n\n\n
                \n
              • opacity<\/code><\/li>\n\n\n\n
              • transform<\/code><\/li>\n\n\n\n
              • visibility<\/code><\/li>\n\n\n\n
              • pointer-events<\/code><\/li>\n<\/ul>\n\n\n\n
                Ocultar el men\u00fa solo con opacity<\/h3>\n\n\n\n
                Un elemento con opacity: 0<\/code> contin\u00faa ocupando espacio y puede seguir recibiendo clics o foco.<\/p>\n\n\n\n
                Por ello, este c\u00f3digo es insuficiente:<\/p>\n\n\n\n
                .mobile-menu {\n  opacity: 0;\n}\n<\/code><\/pre>\n\n\n\n
                Podemos reforzarlo as\u00ed:<\/p>\n\n\n\n
                .mobile-menu {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.mobile-menu.is-open {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n<\/code><\/pre>\n\n\n\n
                Utilizar duraciones demasiado largas<\/h3>\n\n\n\n
                Un men\u00fa es una herramienta funcional. El usuario quiere acceder r\u00e1pidamente a otra secci\u00f3n.<\/p>\n\n\n\n
                Las transiciones de entre aproximadamente 200 y 400 milisegundos suelen ofrecer una sensaci\u00f3n fluida sin introducir una espera evidente. No obstante, la duraci\u00f3n adecuada depender\u00e1 del tama\u00f1o del panel y de la distancia recorrida.<\/p>\n\n\n\n
                Un panel que atraviesa toda la pantalla puede necesitar algo m\u00e1s de tiempo que un peque\u00f1o cambio de opacidad, pero rara vez requiere una animaci\u00f3n de un segundo completo.<\/p>\n\n\n\n
                Sobrecargar el componente con efectos<\/h3>\n\n\n\n
                Mover el panel, escalarlo, rotarlo, difuminarlo y animar simult\u00e1neamente todos sus enlaces puede dificultar la lectura.<\/p>\n\n\n\n
                Una buena regla pr\u00e1ctica consiste en elegir:<\/p>\n\n\n\n
                  \n
                1. Una animaci\u00f3n principal para el contenedor.<\/li>\n\n\n\n
                2. Una transformaci\u00f3n clara para el bot\u00f3n.<\/li>\n\n\n\n
                3. Una animaci\u00f3n secundaria opcional para los enlaces.<\/li>\n<\/ol>\n\n\n\n
                  M\u00e1s efectos no implican una mejor experiencia.<\/p>\n\n\n\n
                  No comprobar la navegaci\u00f3n mediante teclado<\/h3>\n\n\n\n
                  El men\u00fa puede parecer correcto con el rat\u00f3n y presentar problemas al utilizar la tecla Tab<\/code>.<\/p>\n\n\n\n
                  Antes de darlo por terminado, conviene comprobar que:<\/p>\n\n\n\n
                    \n
                  • El bot\u00f3n recibe el foco.<\/li>\n\n\n\n
                  • El estado del foco es visible.<\/li>\n\n\n\n
                  • Los enlaces ocultos no pueden enfocarse.<\/li>\n\n\n\n
                  • El men\u00fa puede cerrarse con Escape<\/code>.<\/li>\n\n\n\n
                  • El foco vuelve al bot\u00f3n al cerrar.<\/li>\n\n\n\n
                  • El orden de navegaci\u00f3n es l\u00f3gico.<\/li>\n<\/ul>\n\n\n\n
                    Prestar atenci\u00f3n al control del foco<\/h4>\n\n\n\n
                    En un men\u00fa que ocupa toda la pantalla, puede ser recomendable mantener temporalmente el foco dentro del panel mientras permanece abierto. Esto se conoce como focus trapping<\/em>.<\/p>\n\n\n\n
                    No todos los men\u00fas desplegables necesitan comportarse como un di\u00e1logo modal. Sin embargo, cuando la navegaci\u00f3n bloquea completamente el resto de la interfaz, conviene estudiar si el foco deber\u00eda quedar limitado a sus controles.<\/p>\n\n\n\n
                    Consejos para conseguir una animaci\u00f3n m\u00e1s profesional<\/h2>\n\n\n\n
                    Mant\u00e9n una direcci\u00f3n coherente<\/h3>\n\n\n\n
                    Si el panel entra desde la derecha, los enlaces pueden aparecer desplaz\u00e1ndose ligeramente desde esa misma direcci\u00f3n. Esta coherencia ayuda a que el movimiento resulte predecible.<\/p>\n\n\n\n
                    Utiliza una curva de aceleraci\u00f3n adecuada<\/h3>\n\n\n\n
                    La funci\u00f3n ease<\/code> puede ser suficiente, pero una curva personalizada permite controlar mejor la sensaci\u00f3n de movimiento.<\/p>\n\n\n\n
                    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);\n<\/code><\/pre>\n\n\n\n
                    Esta curva genera una entrada r\u00e1pida que se suaviza al llegar al destino. El men\u00fa se percibe \u00e1gil sin detenerse de forma brusca.<\/p>\n\n\n\n
                    Evita utilizar will-change permanentemente<\/h3>\n\n\n\n
                    La propiedad will-change<\/code> puede avisar al navegador de que un elemento cambiar\u00e1 pr\u00f3ximamente:<\/p>\n\n\n\n
                    .mobile-menu {\n  will-change: transform;\n}\n<\/code><\/pre>\n\n\n\n
                    Sin embargo, no deber\u00eda aplicarse indiscriminadamente a muchos componentes. Mantener capas optimizadas de forma permanente puede aumentar el consumo de recursos.<\/p>\n\n\n\n
                    En un men\u00fa peque\u00f1o quiz\u00e1 no sea necesaria. Conviene utilizarla \u00fanicamente cuando las pruebas de rendimiento muestren una mejora real.<\/p>\n\n\n\n
                    Prueba en dispositivos reales<\/h3>\n\n\n\n
                    Las herramientas del navegador permiten simular diferentes anchuras, pero no reproducen por completo:<\/p>\n\n\n\n
                      \n
                    • El rendimiento de un tel\u00e9fono de gama media o baja.<\/li>\n\n\n\n
                    • La interacci\u00f3n t\u00e1ctil.<\/li>\n\n\n\n
                    • La barra din\u00e1mica del navegador.<\/li>\n\n\n\n
                    • Los cambios de orientaci\u00f3n.<\/li>\n\n\n\n
                    • El comportamiento del teclado virtual.<\/li>\n\n\n\n
                    • Las \u00e1reas seguras de algunos dispositivos.<\/li>\n<\/ul>\n\n\n\n
                      Para la altura del panel, 100dvh<\/code> puede adaptarse mejor a los cambios de la interfaz del navegador que el tradicional 100vh<\/code>.<\/p>\n\n\n\n
                      Lista de comprobaci\u00f3n antes de publicar<\/h2>\n\n\n\n
                      Antes de dar por finalizado el men\u00fa hamburguesa CSS<\/strong>, revisa los siguientes puntos:<\/p>\n\n\n\n
                        \n
                      • El bot\u00f3n es un elemento <button><\/code>.<\/li>\n\n\n\n
                      • Incluye aria-controls<\/code> y aria-expanded<\/code>.<\/li>\n\n\n\n
                      • El texto accesible cambia entre abrir y cerrar.<\/li>\n\n\n\n
                      • El men\u00fa oculto no puede recibir el foco.<\/li>\n\n\n\n
                      • La animaci\u00f3n utiliza preferentemente transform<\/code> y opacity<\/code>.<\/li>\n\n\n\n
                      • El contenido no se desplaza accidentalmente al abrir el panel.<\/li>\n\n\n\n
                      • Existe una forma clara de cerrar el men\u00fa.<\/li>\n\n\n\n
                      • La tecla Escape<\/code> funciona.<\/li>\n\n\n\n
                      • El foco es visible.<\/li>\n\n\n\n
                      • Se respeta prefers-reduced-motion<\/code>.<\/li>\n\n\n\n
                      • El men\u00fa se adapta correctamente a escritorio.<\/li>\n\n\n\n
                      • Los enlaces tienen un \u00e1rea t\u00e1ctil suficiente.<\/li>\n\n\n\n
                      • La duraci\u00f3n de la transici\u00f3n no retrasa la navegaci\u00f3n.<\/li>\n\n\n\n
                      • El comportamiento se ha probado con teclado y pantalla t\u00e1ctil.<\/li>\n<\/ul>\n\n\n\n
                        Esta revisi\u00f3n permite detectar problemas que pueden pasar desapercibidos cuando solo se eval\u00faa la apariencia visual.<\/p>\n\n\n\n
                        Preguntas frecuentes sobre c\u00f3mo animar un men\u00fa m\u00f3vil con CSS<\/h2>\n\n\n\n
                        \u00bfEs posible crear un men\u00fa m\u00f3vil animado solo con CSS?<\/h3>\n\n\n\n
                        S\u00ed. Puede utilizarse un checkbox<\/code> oculto junto con un <label><\/code> y selectores como :checked<\/code> para modificar el estado del men\u00fa.<\/p>\n\n\n\n
                        No obstante, esta soluci\u00f3n puede complicar la sem\u00e1ntica y la actualizaci\u00f3n de atributos accesibles. En proyectos reales suele resultar m\u00e1s mantenible utilizar CSS para la presentaci\u00f3n y una peque\u00f1a cantidad de JavaScript para gestionar el estado.<\/p>\n\n\n\n
                        \u00bfQu\u00e9 propiedades CSS conviene utilizar para animar un men\u00fa?<\/h3>\n\n\n\n
                        Las propiedades m\u00e1s recomendables son transform<\/code> y opacity<\/code>. Permiten desplazar, escalar o desvanecer el men\u00fa sin depender continuamente de cambios en su geometr\u00eda.<\/p>\n\n\n\n
                        Propiedades como width<\/code>, height<\/code>, left<\/code>, right<\/code> o margin<\/code> pueden utilizarse, pero suelen requerir m\u00e1s trabajo del navegador durante la animaci\u00f3n. Siempre conviene comprobar el resultado con las herramientas de rendimiento.<\/p>\n\n\n\n
                        \u00bfCu\u00e1nto deber\u00eda durar la animaci\u00f3n de un men\u00fa hamburguesa?<\/h3>\n\n\n\n
                        La duraci\u00f3n debe ser suficiente para que el cambio de estado se entienda, pero no tan larga como para retrasar el acceso a los enlaces.<\/p>\n\n\n\n
                        Como referencia inicial, pueden probarse valores entre 200 y 400 milisegundos. Los efectos secundarios, como la aparici\u00f3n escalonada de los enlaces, deber\u00edan utilizar retrasos peque\u00f1os para evitar que la navegaci\u00f3n se sienta lenta.<\/p>\n\n\n\n
                        El movimiento debe acompa\u00f1ar a la navegaci\u00f3n, no competir con ella<\/h2>\n\n\n\n
                        Aprender c\u00f3mo animar un men\u00fa m\u00f3vil con CSS<\/strong> implica algo m\u00e1s que elegir un efecto llamativo. El componente debe ser comprensible, r\u00e1pido, accesible y f\u00e1cil de mantener.<\/p>\n\n\n\n
                        Una animaci\u00f3n lateral mediante transform<\/code>, acompa\u00f1ada de una capa de fondo y una transformaci\u00f3n sencilla del bot\u00f3n, suele ser suficiente para crear una experiencia clara. A partir de esa base pueden a\u00f1adirse detalles como la entrada escalonada de los enlaces, siempre que no retrasen la interacci\u00f3n.<\/p>\n\n\n\n
                        Tambi\u00e9n es importante recordar que el men\u00fa es una de las principales v\u00edas de acceso al contenido. Si su apertura resulta confusa, si los enlaces ocultos reciben el foco o si el movimiento genera molestias, la animaci\u00f3n deja de cumplir su funci\u00f3n.<\/p>\n\n\n\n
                        La mejor animaci\u00f3n no es necesariamente la m\u00e1s compleja. Es aquella que hace visible el cambio de estado sin obligar al usuario a pensar en el propio efecto<\/strong>. Cuando el movimiento acompa\u00f1a de forma natural a la navegaci\u00f3n, el dise\u00f1o se percibe m\u00e1s cuidado y la interfaz resulta m\u00e1s f\u00e1cil de utilizar.<\/p>\n\n\n\n
                        <\/p>\n","protected":false},"excerpt":{"rendered":"
                        Aprende c\u00f3mo animar un men\u00fa m\u00f3vil con CSS paso a paso. Crea un men\u00fa hamburguesa fluido, responsive y accesible usando transform, opacity, transition y buenas pr\u00e1cticas de navegaci\u00f3n.<\/p>\n","protected":false},"author":1,"featured_media":19476,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"mg_rating_sum":0,"mg_rating_count":0,"mg_rating_average":0,"footnotes":""},"categories":[82,338],"tags":[380,202,4,11,10,381,379,382],"class_list":["post-19461","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css","tag-accesibilidad-web","tag-animaciones-css","tag-css","tag-desarrollo-web","tag-frontend","tag-menu-hamburguesa","tag-menu-movil","tag-responsive-design"],"acf":[],"yoast_head":"\nC\u00f3mo animar un men\u00fa m\u00f3vil con CSS paso a paso<\/title>\n<meta name=\"description\" content=\"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS creando un men\u00fa hamburguesa accesible, responsive y fluido con transform, opacity, transition y JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS\" \/>\n<meta property=\"og:description\" content=\"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS creando un men\u00fa hamburguesa accesible, responsive y fluido con transform, opacity, transition y JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Marta Gonz\u00e1lez - Desarrollo Front-end\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-03T04:46:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/como-animar-un-menu-movil-con-css.avif\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"marta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"marta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/\"},\"author\":{\"name\":\"marta\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"headline\":\"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS\",\"datePublished\":\"2026-07-03T04:46:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/\"},\"wordCount\":2872,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/como-animar-un-menu-movil-con-css.avif\",\"keywords\":[\"Accesibilidad web\",\"animaciones css\",\"css\",\"Desarrollo Web\",\"Frontend\",\"Men\u00fa hamburguesa\",\"Men\u00fa m\u00f3vil\",\"Responsive design\"],\"articleSection\":[\"Blog\",\"CSS\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/\",\"name\":\"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS paso a paso\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/como-animar-un-menu-movil-con-css.avif\",\"datePublished\":\"2026-07-03T04:46:00+00:00\",\"description\":\"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS creando un men\u00fa hamburguesa accesible, responsive y fluido con transform, opacity, transition y JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/como-animar-un-menu-movil-con-css.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/como-animar-un-menu-movil-con-css.avif\",\"width\":1536,\"height\":1024,\"caption\":\"Gu\u00eda visual para crear un men\u00fa hamburguesa animado con CSS, usando transiciones suaves, transformaciones y buenas pr\u00e1cticas de accesibilidad.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-un-menu-movil-con-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\",\"name\":\"Marta Gonz\u00e1lez\",\"description\":\"Desarrollo Front-end\",\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"alternateName\":\"Marta Gonz\u00e1lez Desarrollo Frontend\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\",\"name\":\"marta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"width\":575,\"height\":575,\"caption\":\"marta\"},\"logo\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\"},\"description\":\"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.\",\"sameAs\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\",\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=100031998110346\",\"https:\\\/\\\/www.instagram.com\\\/mcgweb\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/martacg\\\/\",\"marta\"],\"birthDate\":\"1986-01-07\",\"gender\":\"mujer\",\"knowsAbout\":[\"HTML5\",\"CSS3\",\"Javascript\"],\"jobTitle\":\"Desarrollo Frontend\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/author\\\/marta\\\/\",\"publishingPrinciples\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/politica-de-privacidad\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS paso a paso","description":"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS creando un men\u00fa hamburguesa accesible, responsive y fluido con transform, opacity, transition y JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS","og_description":"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS creando un men\u00fa hamburguesa accesible, responsive y fluido con transform, opacity, transition y JavaScript.","og_url":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/","og_site_name":"Marta Gonz\u00e1lez - Desarrollo Front-end","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_author":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_published_time":"2026-07-03T04:46:00+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/como-animar-un-menu-movil-con-css.avif","type":"image\/jpeg"}],"author":"marta","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"marta","Tiempo de lectura":"13 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/#article","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/"},"author":{"name":"marta","@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"headline":"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS","datePublished":"2026-07-03T04:46:00+00:00","mainEntityOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/"},"wordCount":2872,"commentCount":0,"publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/como-animar-un-menu-movil-con-css.avif","keywords":["Accesibilidad web","animaciones css","css","Desarrollo Web","Frontend","Men\u00fa hamburguesa","Men\u00fa m\u00f3vil","Responsive design"],"articleSection":["Blog","CSS"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/","url":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/","name":"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS paso a paso","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/#primaryimage"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/como-animar-un-menu-movil-con-css.avif","datePublished":"2026-07-03T04:46:00+00:00","description":"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS creando un men\u00fa hamburguesa accesible, responsive y fluido con transform, opacity, transition y JavaScript.","breadcrumb":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/#primaryimage","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/como-animar-un-menu-movil-con-css.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/07\/como-animar-un-menu-movil-con-css.avif","width":1536,"height":1024,"caption":"Gu\u00eda visual para crear un men\u00fa hamburguesa animado con CSS, usando transiciones suaves, transformaciones y buenas pr\u00e1cticas de accesibilidad."},{"@type":"BreadcrumbList","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-un-menu-movil-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martagonzalez.dev\/wp\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo animar un men\u00fa m\u00f3vil con CSS"}]},{"@type":"WebSite","@id":"https:\/\/martagonzalez.dev\/wp\/#website","url":"https:\/\/martagonzalez.dev\/wp\/","name":"Marta Gonz\u00e1lez","description":"Desarrollo Front-end","publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"alternateName":"Marta Gonz\u00e1lez Desarrollo Frontend","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/martagonzalez.dev\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738","name":"marta","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","width":575,"height":575,"caption":"marta"},"logo":{"@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif"},"description":"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.","sameAs":["https:\/\/martagonzalez.dev\/wp","https:\/\/www.facebook.com\/profile.php?id=100031998110346","https:\/\/www.instagram.com\/mcgweb","https:\/\/www.linkedin.com\/in\/martacg\/","marta"],"birthDate":"1986-01-07","gender":"mujer","knowsAbout":["HTML5","CSS3","Javascript"],"jobTitle":"Desarrollo Frontend","url":"https:\/\/martagonzalez.dev\/wp\/author\/marta\/","publishingPrinciples":"https:\/\/martagonzalez.dev\/wp\/politica-de-privacidad\/"}]}},"_links":{"self":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19461","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/comments?post=19461"}],"version-history":[{"count":2,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19461\/revisions"}],"predecessor-version":[{"id":19480,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19461\/revisions\/19480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media\/19476"}],"wp:attachment":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media?parent=19461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/categories?post=19461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/tags?post=19461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}