DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Megamenú en portales

Ayudar a navegar y encontrar

Bloque desplegable que permite mostrar un listado o contenido personalizado.

Mostrar código del ejemplo: includes/_pattern.megamenu.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.megamenu.njk

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
{% from "components/nav/_macro.nav.njk" import componentNav %}
{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}


{% set megamenu %}
  <div id="megamenu-mini" class="hidden -mx-base">
    <div class="py-base text-xs px-base lg:text-sm text-neutral-dark border-t border-neutral-base">
      <div class="container mx-auto">
        <div class="absolute top-0 right-0 p-sm">
          <button id="close-button" data-toggle="collapse" data-target="#megamenu-mini" aria-expanded="false" aria-controls="megamenu-mini" onClick="getElementById('megamenu-mini-button').click(); getElementById('megamenu-mini-button').focus();" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="Cerrar menú" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"></path></svg>
          </button>
        </div>
        <nav class="flex flex-col lg:flex-row flex-wrap gap-base " aria-label="Menú principal">
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Temas</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#1">
                    Administración pública y transparencia
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#2">
                    Agricultura, ganadería y medio rural
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#3">
                    Ciencia y tecnología
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#4">
                    Comercio y consumo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#5">
                    Cultura, turismo, deportes y ocio
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#6">
                    Educación y formación
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Empleo, empresa y otras entidades
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Impuestos y tasas
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Industria, energía y minería
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Medio ambiente
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Salud
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Seguridad y justicia
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Servicios sociales
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Transporte, territorio e infraestructuras
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Vivienda y urbanismo
                  </a>
                </li>
              </ul>
          </div>
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Momentos vitales</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Independizarse o mudarse por primera vez
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Buscar o mejorar el empleo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Ser mayor de edad
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Emprender un negocio y trabajo autónomo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Formalizar una relación
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Tener un bebé
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Acompañar en la primera infancia
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Jubilarse
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Cuidar de una persona en situación de dependencia y/o discapacidad
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Final de la vida
                  </a>
                </li>
              </ul>
          </div>
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Sede electrónica - Trámites</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#1">
                    Inicio Sede electrónica - Trámites
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#2">
                    Trámites por tema
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#3">
                    Trámites por tipo
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#4">
                    Servicios de la Sede electrónica
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#5">
                    Información y ayuda
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#6">
                    Accede a MiA, tu espacio digital<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#7">
                    Sistema Interno de Información
                  </a>
                </li>
              </ul>
          </div>
          <div class=" flex-1 mb-sm">
            <h3 class="c-h4 mb-base text-black">Institución</h3>
              <ul class="relative space-y-base lg:columns-1 gap-base">
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#1">
                    Gobierno de Aragón
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#2">
                    Estatuto de Aragón
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#3">
                    Organismos
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#4">
                    Municipios
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#5">
                    Identidad comunicación corporativa
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#6">
                    Presupuestos
                  </a>
                </li>
                <li class="mb-xs">
                  <a class="c-link font-semibold" href="#">
                    Cooperación transfronteriza. Acción exterior
                  </a>
                </li>
              </ul>
          </div>
        </nav>
      </div>
    </div>
  </div>

{% endset %}

{% set customNavigation %}
  <div class="flex flex-1 justify-start items-stretch">
    <div class="flex justify-center items-center">

      {{ componentToggle({
        "id": "megamenu-mini-button",
        "classes": "c-menu-navigation__button c-menu-navigation__button--header -mx-sm collapsed ",
        "offState": {
          "classes": "",
          "html": '<span class="inline-flex">Menú<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path></g></svg></span>'
        },
        "onState": {
          "classes": "",
          "html": '<span class="inline-flex">Menú<svg class="inline-block -mr-2  align-middle -my-px pointer-events-none rotate-180" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"></path></g></svg></span>'
        },
        "attributes": {
          "aria-controls": "megamenu-mini",
          "aria-expanded": "false",
          "role": "button",
          "onClick": "getElementById('megamenu-mini').classList.toggle('hidden');getElementById('close-button').focus();"
        }
      }) }}
    </div>
  </div>
{% endset %}


{{ componentHeaderAdvanced({
  "title": {
    "homepageUrl": "/",
    "text": "Titulo del portal"
  },
  "customNavigationHtml": customNavigation | safe,
  "sub": {
    "customNavigationHtml": megamenu | safe,
    "classes": "h-full bg-neutral-lighter border-b border-neutral-base -mt-px"
  }
}) }}

Cuándo lo utilizamos

  • En el menú de navegación de la cabecera avanzada, cuando la arquitectura de contenido del sitio es muy compleja.

Qué componentes utilizamos

Qué debes tener en cuenta

  • Utiliza el parámetro customNavigationHtml de la cabecera avanzada para colocar un interruptor que muestre y oculte el megamenú.
  • Utiliza el parámetro sub.customNavigationHtml de la cabecera avanzada para colocar el listado de enlaces del megamenú.
  • El desplegable empuja al contenido, no lo superpone.
  • En anchuras pequeñas las columnas se apilan. Intenta no usar más de 4.

Accesibilidad

  • Al accionar el botón, el foco salta al botón X.
  • El megamenú se puede ocultar pulsando el botón X o volviendo a pulsar el botón Menú. En cualquier caso, el foco debe volver al botón Menú.
  • El botón Menú y el botón X necesitan los atributos aria-expanded y aria-controls.