Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Menu Horizontal", versión: 12.0.1, 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: 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: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- menu-horizontal -->
<nav data-module="c-menu-horizontal" class="c-menu-horizontal" aria-label="Menu horizontal">
<ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
<li>
<a id="menu-item-1" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<span class="flex items-center pointer-events-none">
Opción 1
</span>
</a>
</li>
<li>
<a id="menu-item-2" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<span class="flex items-center pointer-events-none">
Opción 2
</span>
</a>
</li>
<li>
<a id="menu-item-3" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<span class="flex items-center pointer-events-none">
Opción 3
</span>
</a>
</li>
<li>
<a id="menu-item-4" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<span class="flex items-center pointer-events-none">
Opción 4
</span>
</a>
</li>
<li>
<a id="menu-item-5" href="http://www.google.com" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none">
<span class="flex items-center pointer-events-none">
Opción 5
</span>
</a>
</li>
</ul>
</nav>
<!-- /menu-horizontal -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Menu Horizontal", versión: 12.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
"items": [
{
"href": "http://www.google.com",
"text": "Opción 1"
},
{
"href": "http://www.google.com",
"text": "Opción 2"
},
{
"href": "http://www.google.com",
"text": "Opción 3"
},
{
"href": "http://www.google.com",
"text": "Opción 4"
},
{
"href": "http://www.google.com",
"text": "Opción 5"
}
],
"attributes": {
"aria-label": "Menu horizontal"
}
}) }}Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/menu-horizontal/_macro.menu-horizontal.njk" import componentMenuHorizontal %}
{{ componentMenuHorizontal({
"items": [
{
"href": "http://www.google.com",
"text": "Opción 1"
},
{
"href": "http://www.google.com",
"text": "Opción 2"
},
{
"href": "http://www.google.com",
"text": "Opción 3"
},
{
"href": "http://www.google.com",
"text": "Opción 4"
},
{
"href": "http://www.google.com",
"text": "Opción 5"
}
],
"attributes": {
"aria-label": "Menu horizontal"
}
}) }}