Ejemplo: "Con items mixtos", de código HTML, para maquetar el componente: "Menu Vertical", versión: 12.1.0, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- menu-vertical -->
<nav data-module="c-menu-vertical" aria-label="Menu vertical">
<ul class="text-base">
<li class="my-base break-inside-avoid-column">
<a id="with-mixed-items-1" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
Enlace simple
</a>
</li>
<li class="my-base break-inside-avoid-column">
<span id="with-mixed-items-2" class="block px-xs" aria-disabled="true" tabindex="-1">
Item sin href o deshabilitado
</span>
</li>
<li class="my-base break-inside-avoid-column">
<a id="with-mixed-items-3" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
Enlace simple
</a>
</li>
<li class="my-base break-inside-avoid-column">
<a id="with-sub-items-1" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
Padre con divisor
</a>
<ul aria-labelledby="with-sub-items-1">
<li class="m-base origin-top-left text-sm">
<a id="sub-with-sub-items-1-1" href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
Enlace simple
</a>
</li>
<li class="m-base origin-top-left text-sm">
<a id="sub-with-sub-items-1-2" href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" target="_blank" title="Se abre en ventana nueva">
Enlace simple
</a>
</li>
<li class="m-base origin-top-left text-sm">
<a id="sub-with-sub-items-1-3" href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
Enlace simple
</a>
</li>
<li class="m-base origin-top-left text-sm">
<a id="sub-with-sub-items-1-4" href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
Enlace simple
</a>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
<li class="m-base origin-top-left text-sm">
<a id="sub-with-sub-items-1-5" href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
Enlace simple
</a>
</li>
</ul>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
<li class="my-base break-inside-avoid-column">
<a id="with-mixed-items-5" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
Enlace simple
</a>
</li>
<li class="my-base break-inside-avoid-column">
<a id="with-mixed-items-6" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
Enlace simple
</a>
</li>
<li class="my-base break-inside-avoid-column">
<a id="with-mixed-items-7" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
Con HTML dentro
</a>
<div class="mb-base px-xs origin-top-left text-sm text-neutral-dark" id="sub-with-mixed-items-7">
<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>
<p>Este es otro párrafo.</p>
</div>
</li>
<li class="my-base break-inside-avoid-column">
<a id="with-mixed-items-8" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
Enlace simple
</a>
</li>
<li class="my-base break-inside-avoid-column">
<a id="with-mixed-items-9" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
Enlace simple
</a>
</li>
<li class="my-base break-inside-avoid-column">
<a id="with-mixed-items-10" href="#" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black hover:text-primary-base hover:underline">
Enlace simple
</a>
</li>
<li class="my-base break-inside-avoid-column">
<span id="with-sub-items-2" class="block px-xs">
Padre sin href
</span>
<ul aria-labelledby="with-sub-items-2">
<li class="m-base origin-top-left text-sm">
<a id="sub-with-sub-items-2-1" href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
Subitem
</a>
</li>
<li class="m-base origin-top-left text-sm">
<a id="sub-with-sub-items-2-2" href="#" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page">
<strong class="font-bold">Subitem activo</strong>
</a>
</li>
<li class="m-base origin-top-left text-sm">
<span id="sub-with-sub-items-2-3" class="block px-xs" aria-disabled="true" tabindex="-1">
Subitem sin href o deshabilitado
</span>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /menu-vertical -->
Ejemplo: "Con items mixtos", de código Nunjucks, para maquetar el componente: "Menu Vertical", versión: 12.1.0, del sistema de diseño DESY
Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
{{ componentMenuVertical({
"name": "with-sub-items",
"idPrefix": "with-mixed-items",
"items": [
{
"href": "#",
"text": "Enlace simple"
},
{
"text": "Item sin href o deshabilitado",
"disabled": true
},
{
"href": "#",
"text": "Enlace simple"
},
{
"href": "#",
"text": "Padre con divisor",
"divider": true,
"id": "with-sub-items-1",
"sub": {
"items": [
{
"href": "#",
"text": "Enlace simple"
},
{
"href": "#",
"text": "Enlace simple",
"target": "_blank",
"attributes": {
"title": "Se abre en ventana nueva"
}
},
{
"href": "#",
"text": "Enlace simple"
},
{
"href": "#",
"text": "Enlace simple",
"divider": true
},
{
"href": "#",
"text": "Enlace simple"
}
],
"attributes": {
"aria-labelledby": "with-sub-items-1"
}
}
},
{
"href": "#",
"text": "Enlace simple"
},
{
"href": "#",
"text": "Enlace simple"
},
{
"href": "#",
"text": "Con HTML dentro",
"sub": {
"html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>"
}
},
{
"href": "#",
"text": "Enlace simple"
},
{
"href": "#",
"text": "Enlace simple"
},
{
"href": "#",
"text": "Enlace simple"
},
{
"text": "Padre sin href",
"id": "with-sub-items-2",
"sub": {
"items": [
{
"href": "#",
"text": "Subitem"
},
{
"href": "#",
"text": "Subitem activo",
"active": true
},
{
"text": "Subitem sin href o deshabilitado",
"disabled": true
}
],
"attributes": {
"aria-labelledby": "with-sub-items-2"
}
}
}
],
"attributes": {
"aria-label": "Menu vertical"
}
}) }}