Megamenú (megamenu)
Una barra de navegación en la que un elemento puede abrir un panel ancho: una cabecera con título y recuento, un directorio con recuentos a un lado, pestañas con selecciones de tarjetas numeradas, una nube de etiquetas, un destacado, un lateral con lo reciente, un filtro dentro del panel y un pie. El servidor envía enlaces y paneles; sin JavaScript los paneles se abren al pasar el puntero y al enfocar en pantallas grandes, y quedan abiertos en línea en las pequeñas. En init aparecen los botones y el cierre, el hover se vuelve intencional (pequeños retardos de apertura y cierre), el teclado gana flechas y Escape, una superposición oscurece la página, los paneles cerrados quedan inertes y un caret apunta al elemento abierto. Por debajo del punto de ruptura staticFrom los paneles se convierten en acordeón.
CSS: css/components/megamenu.css (en ivolt.css). JS: @intervolutions/ivolt/megamenu o auto.js. Añadido en la v0.4, reconstruido para la 1.0.
<nav class="iv-megamenu iv-megamenu--full" data-iv-component="megamenu" style="--iv-megamenu-art-ratio: 16 / 10; --iv-megamenu-cols: 3" aria-label="Sample magazine navigation. Every headline, date, count and tag below is made up for this demo.">
<ul class="iv-megamenu__list">
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-full-note">Video games</a>
<button class="iv-megamenu__toggle" type="button" aria-expanded="false" aria-controls="mm-vg" hidden><span class="iv-u-sr-only">Open Video games</span></button>
<section class="iv-megamenu__panel" id="mm-vg" aria-labelledby="mm-vg-title">
<header class="iv-megamenu__head">
<p class="iv-megamenu__overline">// Section</p>
<h2 class="iv-megamenu__title" id="mm-vg-title">Video games <span class="iv-megamenu__count">75 reviews</span></h2>
<p class="iv-megamenu__tagline">Made-up reviews of made-up hardware, written for this demo.</p>
<button class="iv-megamenu__close" type="button" aria-label="Close Video games" hidden></button>
</header>
<div class="iv-megamenu__body">
<aside class="iv-megamenu__directory">
<h3 class="iv-megamenu__heading">And before that</h3>
<ul class="iv-megamenu__dirlist">
<li><a href="#mm-full-note"><span>World of Warcraft: the hard genre, made easy</span><small>04</small></a></li>
<li><a href="#mm-full-note"><span>Taito Station: the arcade as an urban service</span><small>05</small></a></li>
<li><a href="#mm-full-note"><span>Game Boy Advance: the handheld that bought its own catalogue</span><small>06</small></a></li>
</ul>
<a class="iv-megamenu__all" href="#mm-full-note">See the section</a>
</aside>
<div class="iv-megamenu__discover">
<div class="iv-megamenu__tabs" role="tablist" aria-label="Video game selections">
<a class="iv-megamenu__tab" role="tab" id="mm-vg-tab-0" href="#mm-vg-set-0" aria-selected="true">Latest</a>
<a class="iv-megamenu__tab" role="tab" id="mm-vg-tab-1" href="#mm-vg-set-1" aria-selected="false">From the archive</a>
</div>
<div class="iv-megamenu__set" id="mm-vg-set-0" role="tabpanel" aria-labelledby="mm-vg-tab-0">
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="sandbox rules">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf1" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#094D63"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf1)"/><circle cx="160" cy="92" r="60" fill="none" stroke="#73DFFF" stroke-opacity=".7" stroke-width="3"/><circle cx="160" cy="92" r="22" fill="#73DFFF" fill-opacity=".32"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Minecraft: few rules, applied without exception</span>
<span class="iv-megamenu__meta">30 Aug 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="arcade friction">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf2" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#4F5BE6"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf2)"/><path d="M-10 160 96 88 176 136 249 60 330 144V210H-10z" fill="#04070F" fill-opacity=".7"/><circle cx="243" cy="48" r="24" fill="#C2C8FF" fill-opacity=".85"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Air hockey: the machine that only removes friction</span>
<span class="iv-megamenu__meta">22 Aug 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="handheld power">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf3" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#0F1D4D"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf3)"/><path d="M19 200 160 24 300 200z" fill="#66B1FF" fill-opacity=".24"/><path d="M105 200 160 120 214 200z" fill="#EAF4FF" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Handhelds: winning without competing on power</span>
<span class="iv-megamenu__meta">2 Aug 2026</span>
</a></li>
</ul>
</div>
<div class="iv-megamenu__set" id="mm-vg-set-1" role="tabpanel" aria-labelledby="mm-vg-tab-1" hidden>
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="format cartridge">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf4" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1C2544"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf4)"/><path d="M25 132q67-72 134 0t134 0" fill="none" stroke="#8FE3FF" stroke-opacity=".75" stroke-width="4"/><path d="M25 164q67-48 134 0t134 0" fill="none" stroke="#66B1FF" stroke-opacity=".5" stroke-width="3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Cartridges: the format that refused to die</span>
<span class="iv-megamenu__meta">18 Jul 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="sound chip">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf5" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#172F7A"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf5)"/><rect x="48" y="40" width="224" height="115" rx="10" fill="none" stroke="#FF9AA4" stroke-opacity=".6" stroke-width="3"/><path d="M89 124h64M89 98h140M89 72h102" stroke="#FF9AA4" stroke-opacity=".65" stroke-width="6" stroke-linecap="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Sound chips: three voices and a whole decade</span>
<span class="iv-megamenu__meta">9 Jul 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note" data-iv-keywords="isometric dimension">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf6" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#0B6B8A"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf6)"/><circle cx="108" cy="76" r="52" fill="#66B1FF" fill-opacity=".38"/><circle cx="217" cy="120" r="68" fill="#73DFFF" fill-opacity=".26"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Isometry: the trick that faked a third dimension</span>
<span class="iv-megamenu__meta">1 Jul 2026</span>
</a></li>
</ul>
</div>
<a class="iv-megamenu__feature" href="#mm-full-note">
<span class="iv-megamenu__flag">Most read</span>
<span class="iv-megamenu__feature-title">I Have No Mouth, and I Must Scream: the game that turned guilt into a mechanic</span>
<span class="iv-megamenu__feature-meta"><b>2,381</b> reads</span>
</a>
<section class="iv-megamenu__cloud">
<h3 class="iv-megamenu__heading">Search by</h3>
<a href="#mm-full-note">Retro <small>90</small></a>
<a href="#mm-full-note">Arcades <small>32</small></a>
<a href="#mm-full-note">Eighties games <small>20</small></a>
<a href="#mm-full-note">Peripherals <small>15</small></a>
<a href="#mm-full-note">Nineties games <small>15</small></a>
<a href="#mm-full-note">History of technology <small>11</small></a>
<a href="#mm-full-note">Consoles <small>9</small></a>
</section>
</div>
</div>
<footer class="iv-megamenu__foot">
<span class="iv-megamenu__crumb">Magazine <b aria-hidden="true">/</b> Video games</span>
<a class="iv-megamenu__foot-link" href="#mm-full-note">Pitch a review</a>
<p class="iv-megamenu__status" aria-hidden="true"><span class="iv-megamenu__prompt">magazine:~$</span><span class="iv-megamenu__cmd">ls /video-games</span><span class="iv-megamenu__caret-blink"></span><span class="iv-megamenu__hint">Esc to close</span></p>
</footer>
<ol class="iv-megamenu__ticker">
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">01</span>Adobe Audition: the editor that fixes what is not broken</a></li>
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">02</span>Folding phones: a moving part under the screen</a></li>
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">03</span>Minecraft: few rules, applied without exception</a></li>
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">04</span>BlackBerry: the network that tied its own hands</a></li>
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">05</span>Wrist sensors: measuring the light that comes back</a></li>
<li><a href="#mm-full-note"><span class="iv-megamenu__rank" aria-hidden="true">06</span>Mechanical keyboards: the sound of a decision</a></li>
</ol>
</section>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-full-note">Hardware</a>
<button class="iv-megamenu__toggle" type="button" aria-expanded="false" aria-controls="mm-hw" hidden><span class="iv-u-sr-only">Open Hardware</span></button>
<section class="iv-megamenu__panel" id="mm-hw" aria-labelledby="mm-hw-title">
<header class="iv-megamenu__head">
<p class="iv-megamenu__overline">// Section</p>
<h2 class="iv-megamenu__title" id="mm-hw-title">Hardware <span class="iv-megamenu__count">48 reviews</span></h2>
<p class="iv-megamenu__tagline">Nothing here was tested: the bench figures are invented.</p>
<button class="iv-megamenu__close" type="button" aria-label="Close Hardware" hidden></button>
</header>
<div class="iv-megamenu__body">
<aside class="iv-megamenu__directory">
<h3 class="iv-megamenu__heading">And before that</h3>
<ul class="iv-megamenu__dirlist">
<li><a href="#mm-full-note"><span>Thermal paste: the half degree nobody feels</span><small>04</small></a></li>
<li><a href="#mm-full-note"><span>Fan curves: quiet is a setting, not a feature</span><small>05</small></a></li>
<li><a href="#mm-full-note"><span>Power supplies: the part that is only noticed once</span><small>06</small></a></li>
</ul>
<a class="iv-megamenu__all" href="#mm-full-note">See the section</a>
</aside>
<div class="iv-megamenu__discover">
<div class="iv-megamenu__tabs" role="tablist" aria-label="Hardware selections">
<a class="iv-megamenu__tab" role="tab" id="mm-hw-tab-0" href="#mm-hw-set-0" aria-selected="true">Latest</a>
<a class="iv-megamenu__tab" role="tab" id="mm-hw-tab-1" href="#mm-hw-set-1" aria-selected="false">Bench notes</a>
</div>
<div class="iv-megamenu__set" id="mm-hw-set-0" role="tabpanel" aria-labelledby="mm-hw-tab-0">
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf7" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#313996"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf7)"/><rect x="48" y="40" width="224" height="115" rx="10" fill="none" stroke="#8B95FF" stroke-opacity=".6" stroke-width="3"/><path d="M89 124h64M89 98h140M89 72h102" stroke="#C2C8FF" stroke-opacity=".65" stroke-width="6" stroke-linecap="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Keyboards: the sound of a decision</span>
<span class="iv-megamenu__meta">28 Aug 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf8" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#172F7A"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf8)"/><circle cx="108" cy="76" r="52" fill="#66B1FF" fill-opacity=".38"/><circle cx="217" cy="120" r="68" fill="#66B1FF" fill-opacity=".26"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Monitors: the frame that arrives too late</span>
<span class="iv-megamenu__meta">19 Aug 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf9" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf9)"/><circle cx="160" cy="92" r="60" fill="none" stroke="#8FE3FF" stroke-opacity=".7" stroke-width="3"/><circle cx="160" cy="92" r="22" fill="#8FE3FF" fill-opacity=".32"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Docks: one cable, six compromises</span>
<span class="iv-megamenu__meta">7 Aug 2026</span>
</a></li>
</ul>
</div>
<div class="iv-megamenu__set" id="mm-hw-set-1" role="tabpanel" aria-labelledby="mm-hw-tab-1" hidden>
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf10" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#FBBF24"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf10)"/><path d="M-10 160 96 88 176 136 249 60 330 144V210H-10z" fill="#04070F" fill-opacity=".7"/><circle cx="243" cy="48" r="24" fill="#FF9AA4" fill-opacity=".85"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Idle draw: the watt that never sleeps</span>
<span class="iv-megamenu__meta">12 Jul 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf11" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#094D63"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf11)"/><path d="M19 200 160 24 300 200z" fill="#73DFFF" fill-opacity=".24"/><path d="M105 200 160 120 214 200z" fill="#E6FBFF" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Fan noise: measuring what the ear forgives</span>
<span class="iv-megamenu__meta">3 Jul 2026</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-full-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmf12" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#262C6E"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmf12)"/><path d="M25 132q67-72 134 0t134 0" fill="none" stroke="#8B95FF" stroke-opacity=".75" stroke-width="4"/><path d="M25 164q67-48 134 0t134 0" fill="none" stroke="#66B1FF" stroke-opacity=".5" stroke-width="3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Screen coatings: light that leaves twice</span>
<span class="iv-megamenu__meta">26 Jun 2026</span>
</a></li>
</ul>
</div>
<section class="iv-megamenu__cloud">
<h3 class="iv-megamenu__heading">Search by</h3>
<a href="#mm-full-note">Keyboards <small>21</small></a>
<a href="#mm-full-note">Displays <small>17</small></a>
<a href="#mm-full-note">Storage <small>12</small></a>
<a href="#mm-full-note">Cooling <small>8</small></a>
</section>
</div>
</div>
<footer class="iv-megamenu__foot">
<span class="iv-megamenu__crumb">Magazine <b aria-hidden="true">/</b> Hardware</span>
<a class="iv-megamenu__foot-link" href="#mm-full-note">Pitch a review</a>
<p class="iv-megamenu__status" aria-hidden="true"><span class="iv-megamenu__prompt">magazine:~$</span><span class="iv-megamenu__cmd">ls /hardware</span><span class="iv-megamenu__caret-blink"></span><span class="iv-megamenu__hint">Esc to close</span></p>
</footer>
</section>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-full-note">Software</a>
</li>
</ul>
</nav>
<p id="mm-full-note">Sample magazine header, not a real publication: every headline, date, read count and tag is invented, and every link on this page points to this note. The panel opens edge to edge under the bar (<code>iv-megamenu--full</code>) and closes the row with a strip of six numbered headlines.</p>
<section class="iv-stack" style="min-block-size: 60vh">
<h2>Room below the bar</h2>
<p>Filler text, so the full-width panel has a page to cover while it is open. Nothing on this page is fetched from anywhere.</p>
</section>.iv-root {
--iv-megamenu-art-ratio: 16 / 10;
--iv-megamenu-cols: 3;
}// data-iv-component="megamenu"
{
keywords: "sandbox rules",
}01
Anatomía
Dentro de un panel solo son obligatorios iv-megamenu__head e iv-megamenu__body; las demás regiones son opcionales y se combinan libremente.
La barra es iv-megamenu con iv-megamenu__list, y cada iv-megamenu__item lleva un iv-megamenu__link, un iv-megamenu__toggle y un iv-megamenu__panel.
| Región | Contiene |
|---|---|
iv-megamenu__head | iv-megamenu__overline, iv-megamenu__title con una píldora iv-megamenu__count, iv-megamenu__tagline y iv-megamenu__close (se sirve hidden; init lo muestra). |
iv-megamenu__filter | Un iv-input de búsqueda con iv-megamenu__filter-input y una pista iv-megamenu__kbd. Se sirve hidden: sin JavaScript no filtraría nada. |
iv-megamenu__body | Hasta tres columnas: iv-megamenu__directory (14rem), iv-megamenu__discover (el resto) e iv-megamenu__aside (16rem). |
iv-megamenu__directory | Un iv-megamenu__heading, un iv-megamenu__dirlist cuyas filas son <span> más <small> (el recuento, en cifras tabulares) y un iv-megamenu__all a lo ancho al pie de la columna. |
iv-megamenu__discover | iv-megamenu__tabs con iv-megamenu__tab, un iv-megamenu__set por pestaña con iv-megamenu__cards de iv-megamenu__card (iv-megamenu__art con iv-megamenu__rank e iv-megamenu__arrow, y luego iv-megamenu__name e iv-megamenu__meta), más una iv-megamenu__cloud de etiquetas opcional y un iv-megamenu__feature con su iv-megamenu__flag, iv-megamenu__feature-title e iv-megamenu__feature-meta. |
iv-megamenu__aside | Filas iv-megamenu__recent con iv-megamenu__thumb, iv-megamenu__recent-title e iv-megamenu__date, y iv-megamenu__facets, que se lee como el directorio. |
iv-megamenu__foot | iv-megamenu__crumb, iv-megamenu__foot-link y una línea iv-megamenu__status escrita como un terminal: iv-megamenu__prompt, iv-megamenu__cmd, iv-megamenu__caret-blink e iv-megamenu__hint. |
iv-megamenu__ticker | Una tira de hasta seis titulares numerados bajo el panel. Sin JavaScript es una lista ordenada normal. |
Otros dos elementos son del componente en marcha y no se escriben a mano: iv-megamenu__overlay, la superposición que init inserta para oscurecer la página tras un panel abierto, e iv-megamenu__empty, la línea que muestra el filtro cuando una consulta no casa con nada.
02
Una barra con tres paneles
El panel por defecto va centrado bajo la barra, limitado por --iv-megamenu-width, con un caret que apunta al elemento abierto.
<nav class="iv-megamenu" data-iv-component="megamenu" aria-label="Sample main navigation. Every section, title, count and studio below is made up for this demo.">
<ul class="iv-megamenu__list">
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-note">Games</a>
<button class="iv-megamenu__toggle" type="button" aria-expanded="false" aria-controls="mm-games" hidden><span class="iv-u-sr-only">Open Games</span></button>
<section class="iv-megamenu__panel" id="mm-games" aria-labelledby="mm-games-title">
<header class="iv-megamenu__head">
<p class="iv-megamenu__overline">Explore the archive</p>
<h2 class="iv-megamenu__title" id="mm-games-title">Games <span class="iv-megamenu__count">959</span></h2>
<p class="iv-megamenu__tagline">Your next game starts here. Nothing on this page is a real catalogue.</p>
<button class="iv-megamenu__close" type="button" aria-label="Close Games" hidden></button>
</header>
<div class="iv-megamenu__body">
<aside class="iv-megamenu__directory">
<h3 class="iv-megamenu__heading">Pick a genre</h3>
<ul class="iv-megamenu__dirlist">
<li><a href="#mm-note"><span>Graphic adventure</span><small>131</small></a></li>
<li><a href="#mm-note"><span>Adventure</span><small>182</small></a></li>
<li><a href="#mm-note"><span>Racing</span><small>58</small></a></li>
<li><a href="#mm-note"><span>Sport</span><small>32</small></a></li>
<li><a href="#mm-note"><span>Shooters</span><small>162</small></a></li>
<li><a href="#mm-note"><span>Strategy</span><small>139</small></a></li>
<li><a href="#mm-note"><span>Board games</span><small>23</small></a></li>
<li><a href="#mm-note"><span>Role-playing</span><small>79</small></a></li>
</ul>
<a class="iv-megamenu__all" href="#mm-note">Browse the catalogue</a>
</aside>
<div class="iv-megamenu__discover">
<div class="iv-megamenu__tabs" role="tablist" aria-label="Game selections">
<a class="iv-megamenu__tab" role="tab" id="mm-games-tab-0" href="#mm-games-set-0" aria-selected="true">Most popular</a>
<a class="iv-megamenu__tab" role="tab" id="mm-games-tab-1" href="#mm-games-set-1" aria-selected="false">Best rated</a>
</div>
<div class="iv-megamenu__set" id="mm-games-set-0" role="tabpanel" aria-labelledby="mm-games-tab-0">
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="adventure signal">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb1" x1="0" y1="0" x2="300" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#094D63"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb1)"/><circle cx="150" cy="176" r="87" fill="none" stroke="#73DFFF" stroke-opacity=".7" stroke-width="3"/><circle cx="150" cy="176" r="33" fill="#73DFFF" fill-opacity=".3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Orbit Signal</span>
<span class="iv-megamenu__meta">Adventure · 1997</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="strategy harbour">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb2" x1="0" y1="400" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#4F5BE6"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb2)"/><path d="M-10 304 90 192l69 80 81-120 81 96v160H-10z" fill="#04070F" fill-opacity=".72"/><circle cx="225" cy="92" r="30" fill="#C2C8FF" fill-opacity=".85"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Quiet Harbour</span>
<span class="iv-megamenu__meta">Strategy · 1999</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="role summit">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><radialGradient id="mmb3" cx="150" cy="140" r="240" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#0F1D4D"/></radialGradient></defs><rect width="300" height="400" fill="url(#mmb3)"/><path d="M21 400 150 40 279 400z" fill="#66B1FF" fill-opacity=".22"/><path d="M96 400 150 236 204 400z" fill="#EAF4FF" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Paper Summit</span>
<span class="iv-megamenu__meta">Role-playing · 2003</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="shooter dial">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb4" x1="0" y1="0" x2="0" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1C2544"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb4)"/><path d="M30 248q60-136 120 0t120 0" fill="none" stroke="#8FE3FF" stroke-opacity=".75" stroke-width="4"/><path d="M30 312q60-88 120 0t120 0" fill="none" stroke="#66B1FF" stroke-opacity=".5" stroke-width="3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">04</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Long Dial</span>
<span class="iv-megamenu__meta">Shooters · 2004</span>
</a></li>
</ul>
</div>
<div class="iv-megamenu__set" id="mm-games-set-1" role="tabpanel" aria-labelledby="mm-games-tab-1" hidden>
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="board notes">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb5" x1="300" y1="0" x2="0" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#172F7A"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb5)"/><rect x="48" y="96" width="204" height="200" rx="10" fill="none" stroke="#FF9AA4" stroke-opacity=".6" stroke-width="3"/><path d="M90 248h60M90 200h120M90 152h90" stroke="#FF9AA4" stroke-opacity=".65" stroke-width="6" stroke-linecap="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Field Notes</span>
<span class="iv-megamenu__meta">Board games · 1994</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="racing sun">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb6" x1="0" y1="0" x2="300" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb6)"/><circle cx="108" cy="144" r="66" fill="#66B1FF" fill-opacity=".4"/><circle cx="198" cy="224" r="90" fill="#73DFFF" fill-opacity=".25"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Second Sun</span>
<span class="iv-megamenu__meta">Racing · 1998</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="adventure kite">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb7" x1="0" y1="400" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#262C6E"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb7)"/><path d="M150 56 258 200 150 344 42 200z" fill="none" stroke="#8B95FF" stroke-opacity=".7" stroke-width="3"/><circle cx="150" cy="200" r="24" fill="#8B95FF" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Hollow Kite</span>
<span class="iv-megamenu__meta">Adventure · 2001</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note" data-iv-keywords="sport meridian">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb8" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0F1D4D"/><stop offset=".55" stop-color="#2266D8"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb8)"/><path d="M0 280h300" stroke="#66B1FF" stroke-opacity=".6" stroke-width="3"/><path d="M60 280 102 152 150 231 198 104 245 280" fill="none" stroke="#EAF4FF" stroke-opacity=".8" stroke-width="4" stroke-linejoin="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">04</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Tin Meridian</span>
<span class="iv-megamenu__meta">Sport · 2006</span>
</a></li>
</ul>
</div>
<section class="iv-megamenu__cloud">
<h3 class="iv-megamenu__heading">The names behind the games</h3>
<a href="#mm-note">Northlight <small>24</small></a>
<a href="#mm-note">Paper Anvil <small>18</small></a>
<a href="#mm-note">Dinamic Hall <small>15</small></a>
<a href="#mm-note">Slow Signal <small>12</small></a>
<a href="#mm-note">Blue Meridian <small>9</small></a>
<a href="#mm-note">Hollow Works <small>7</small></a>
</section>
</div>
</div>
<footer class="iv-megamenu__foot">
<span class="iv-megamenu__crumb">Archive <b aria-hidden="true">/</b> Games</span>
<a class="iv-megamenu__foot-link" href="#mm-note">Suggest a classic</a>
<p class="iv-megamenu__status" aria-hidden="true"><span class="iv-megamenu__prompt">archive:~$</span><span class="iv-megamenu__cmd">ls /games</span><span class="iv-megamenu__caret-blink"></span><span class="iv-megamenu__hint">Esc to close</span></p>
</footer>
</section>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-note">Films</a>
<button class="iv-megamenu__toggle" type="button" aria-expanded="false" aria-controls="mm-films" hidden><span class="iv-u-sr-only">Open Films</span></button>
<section class="iv-megamenu__panel" id="mm-films" aria-labelledby="mm-films-title">
<header class="iv-megamenu__head">
<p class="iv-megamenu__overline">Explore the archive</p>
<h2 class="iv-megamenu__title" id="mm-films-title">Films <span class="iv-megamenu__count">412</span></h2>
<p class="iv-megamenu__tagline">Invented titles, invented years, invented studios.</p>
<button class="iv-megamenu__close" type="button" aria-label="Close Films" hidden></button>
</header>
<div class="iv-megamenu__body">
<aside class="iv-megamenu__directory">
<h3 class="iv-megamenu__heading">Pick a genre</h3>
<ul class="iv-megamenu__dirlist">
<li><a href="#mm-note"><span>Noir</span><small>44</small></a></li>
<li><a href="#mm-note"><span>Science fiction</span><small>61</small></a></li>
<li><a href="#mm-note"><span>Documentary</span><small>28</small></a></li>
<li><a href="#mm-note"><span>Animation</span><small>37</small></a></li>
<li><a href="#mm-note"><span>Shorts</span><small>19</small></a></li>
</ul>
<a class="iv-megamenu__all" href="#mm-note">Browse the shelf</a>
</aside>
<div class="iv-megamenu__discover">
<div class="iv-megamenu__tabs" role="tablist" aria-label="Film selections">
<a class="iv-megamenu__tab" role="tab" id="mm-films-tab-0" href="#mm-films-set-0" aria-selected="true">Most watched</a>
<a class="iv-megamenu__tab" role="tab" id="mm-films-tab-1" href="#mm-films-set-1" aria-selected="false">Restored</a>
</div>
<div class="iv-megamenu__set" id="mm-films-set-0" role="tabpanel" aria-labelledby="mm-films-tab-0">
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><radialGradient id="mmb9" cx="150" cy="140" r="240" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#0C1330"/></radialGradient></defs><rect width="300" height="400" fill="url(#mmb9)"/><path d="M21 400 150 40 279 400z" fill="#8FE3FF" fill-opacity=".22"/><path d="M96 400 150 236 204 400z" fill="#F5F7FC" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Cold Aperture</span>
<span class="iv-megamenu__meta">Noir · 1962</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb10" x1="0" y1="0" x2="300" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0F1D4D"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb10)"/><circle cx="150" cy="176" r="87" fill="none" stroke="#FF9AA4" stroke-opacity=".7" stroke-width="3"/><circle cx="150" cy="176" r="33" fill="#FF9AA4" fill-opacity=".3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Signal Drift</span>
<span class="iv-megamenu__meta">Science fiction · 1978</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb11" x1="300" y1="0" x2="0" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#052F3D"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb11)"/><rect x="48" y="96" width="204" height="200" rx="10" fill="none" stroke="#73DFFF" stroke-opacity=".6" stroke-width="3"/><path d="M90 248h60M90 200h120M90 152h90" stroke="#A6EFFF" stroke-opacity=".65" stroke-width="6" stroke-linecap="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">The Slow Room</span>
<span class="iv-megamenu__meta">Documentary · 1985</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb12" x1="0" y1="400" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#262C6E"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb12)"/><path d="M150 56 258 200 150 344 42 200z" fill="none" stroke="#8B95FF" stroke-opacity=".7" stroke-width="3"/><circle cx="150" cy="200" r="24" fill="#8B95FF" fill-opacity=".55"/></svg><span class="iv-megamenu__rank" aria-hidden="true">04</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Paper Moonlight</span>
<span class="iv-megamenu__meta">Animation · 1991</span>
</a></li>
</ul>
</div>
<div class="iv-megamenu__set" id="mm-films-set-1" role="tabpanel" aria-labelledby="mm-films-tab-1" hidden>
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb13" x1="0" y1="0" x2="300" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb13)"/><circle cx="108" cy="144" r="66" fill="#66B1FF" fill-opacity=".4"/><circle cx="198" cy="224" r="90" fill="#66B1FF" fill-opacity=".25"/></svg><span class="iv-megamenu__rank" aria-hidden="true">01</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Second Reel</span>
<span class="iv-megamenu__meta">Shorts · 1969</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb14" x1="0" y1="400" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#1D4FC4"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb14)"/><path d="M-10 304 90 192l69 80 81-120 81 96v160H-10z" fill="#04070F" fill-opacity=".72"/><circle cx="225" cy="92" r="30" fill="#D6E9FF" fill-opacity=".85"/></svg><span class="iv-megamenu__rank" aria-hidden="true">02</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Quiet Tide</span>
<span class="iv-megamenu__meta">Noir · 1974</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb15" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0F1D4D"/><stop offset=".55" stop-color="#FBBF24"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb15)"/><path d="M0 280h300" stroke="#FF9AA4" stroke-opacity=".6" stroke-width="3"/><path d="M60 280 102 152 150 231 198 104 245 280" fill="none" stroke="#FFF8E6" stroke-opacity=".8" stroke-width="4" stroke-linejoin="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">03</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Wire and Salt</span>
<span class="iv-megamenu__meta">Documentary · 1988</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-note">
<span class="iv-megamenu__art"><svg viewBox="0 0 300 400" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmb16" x1="0" y1="0" x2="0" y2="400" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0B6B8A"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="300" height="400" fill="url(#mmb16)"/><path d="M30 248q60-136 120 0t120 0" fill="none" stroke="#73DFFF" stroke-opacity=".75" stroke-width="4"/><path d="M30 312q60-88 120 0t120 0" fill="none" stroke="#66B1FF" stroke-opacity=".5" stroke-width="3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">04</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Blue Orbit</span>
<span class="iv-megamenu__meta">Science fiction · 1994</span>
</a></li>
</ul>
</div>
<section class="iv-megamenu__cloud">
<h3 class="iv-megamenu__heading">Distributors</h3>
<a href="#mm-note">Lumen Reels <small>14</small></a>
<a href="#mm-note">Anvil Pictures <small>11</small></a>
<a href="#mm-note">Slow Frame <small>8</small></a>
<a href="#mm-note">Hollow Lab <small>6</small></a>
</section>
</div>
</div>
<footer class="iv-megamenu__foot">
<span class="iv-megamenu__crumb">Archive <b aria-hidden="true">/</b> Films</span>
<a class="iv-megamenu__foot-link" href="#mm-note">Suggest a print</a>
<p class="iv-megamenu__status" aria-hidden="true"><span class="iv-megamenu__prompt">archive:~$</span><span class="iv-megamenu__cmd">ls /films</span><span class="iv-megamenu__caret-blink"></span><span class="iv-megamenu__hint">Esc to close</span></p>
</footer>
</section>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-note">Stories</a>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-note">Forums</a>
</li>
</ul>
</nav>
<p id="mm-note">Sample navigation, not a real site: every link above points to this note, and the counts, titles, years and studios are invented for the demo. Without JavaScript the two panels open on hover and on keyboard focus from the <code>lg</code> breakpoint upwards, the tabs are links that reveal their own set, and everything stays open inline below that breakpoint. With JavaScript the chevrons and the close button appear, a caret points at the open item, the page dims behind the panel and the panels become an accordion on narrow screens.</p>// data-iv-component="megamenu"
{
keywords: "adventure signal",
}03
Filtro, cristal y tarjetas densas
iv-megamenu--glass desenfoca lo que hay detrás del panel, iv-megamenu--dense cambia tamaño de tarjeta por cantidad y el filtro estrecha todo el panel a la vez.
<nav class="iv-megamenu iv-megamenu--glass iv-megamenu--dense" data-iv-component="megamenu" aria-label="Sample archive navigation. Every sector, file count, date and heading below is made up for this demo.">
<ul class="iv-megamenu__list">
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-filter-note">Files</a>
<button class="iv-megamenu__toggle" type="button" aria-expanded="false" aria-controls="mm-files" hidden><span class="iv-u-sr-only">Open Files</span></button>
<section class="iv-megamenu__panel" id="mm-files" aria-labelledby="mm-files-title">
<header class="iv-megamenu__head">
<p class="iv-megamenu__overline">Archive sectors</p>
<h2 class="iv-megamenu__title" id="mm-files-title">Sectors <span class="iv-megamenu__count">9 sectors</span> <span class="iv-megamenu__count">Encrypted</span></h2>
<p class="iv-megamenu__tagline">A fictional archive: the sectors, counts and dates are written for this demo.</p>
<button class="iv-megamenu__close" type="button" aria-label="Close Sectors" hidden></button>
</header>
<div class="iv-megamenu__filter" hidden>
<label class="iv-u-sr-only" for="mm-files-q">Filter sectors</label>
<input class="iv-input iv-megamenu__filter-input" id="mm-files-q" type="search" placeholder="Filter sectors…">
<kbd class="iv-megamenu__kbd">Esc</kbd>
</div>
<div class="iv-megamenu__body">
<div class="iv-megamenu__discover">
<div class="iv-megamenu__set" id="mm-files-set-0">
<ul class="iv-megamenu__cards">
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="declassified paper">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq1" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#094D63"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq1)"/><circle cx="160" cy="100" r="64" fill="none" stroke="#73DFFF" stroke-opacity=".65" stroke-width="3"/><circle cx="160" cy="100" r="24" fill="#73DFFF" fill-opacity=".3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">11</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Declassified files</span>
<span class="iv-megamenu__meta">11 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="bases places">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq2" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#4F5BE6"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq2)"/><path d="M-10 164 89 92 172 140 249 64 330 148V210H-10z" fill="#04070F" fill-opacity=".68"/><circle cx="249" cy="48" r="26" fill="#C2C8FF" fill-opacity=".8"/></svg><span class="iv-megamenu__rank" aria-hidden="true">13</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Bases and forbidden places</span>
<span class="iv-megamenu__meta">13 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="cryptohistory mystery">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq3" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#0F1D4D"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq3)"/><path d="M16 200 160 32 304 200z" fill="#66B1FF" fill-opacity=".22"/><path d="M108 200 160 124 211 200z" fill="#EAF4FF" fill-opacity=".5"/></svg><span class="iv-megamenu__rank" aria-hidden="true">14</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Cryptohistory of the mystery</span>
<span class="iv-megamenu__meta">14 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="state shadow">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq4" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1C2544"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq4)"/><path d="M19 136q70-80 140 0t140 0" fill="none" stroke="#8FE3FF" stroke-opacity=".7" stroke-width="4"/></svg><span class="iv-megamenu__rank" aria-hidden="true">11</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">The state and the shadow</span>
<span class="iv-megamenu__meta">11 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="figures enigma">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq5" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#172F7A"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq5)"/><rect x="57" y="44" width="204" height="112" rx="10" fill="none" stroke="#FF9AA4" stroke-opacity=".55" stroke-width="3"/><path d="M96 124h57M96 100h128M96 76h89" stroke="#FF9AA4" stroke-opacity=".6" stroke-width="5" stroke-linecap="round"/></svg><span class="iv-megamenu__rank" aria-hidden="true">11</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Figures of the enigma</span>
<span class="iv-megamenu__meta">11 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="signals noise">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq6" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#04070F"/><stop offset="1" stop-color="#0B6B8A"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq6)"/><circle cx="102" cy="80" r="60" fill="#66B1FF" fill-opacity=".35"/><circle cx="224" cy="124" r="76" fill="#73DFFF" fill-opacity=".24"/></svg><span class="iv-megamenu__rank" aria-hidden="true">17</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Signals and noise</span>
<span class="iv-megamenu__meta">17 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="technology">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq7" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#171A45"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq7)"/><circle cx="160" cy="100" r="64" fill="none" stroke="#8B95FF" stroke-opacity=".65" stroke-width="3"/><circle cx="160" cy="100" r="24" fill="#8B95FF" fill-opacity=".3"/></svg><span class="iv-megamenu__rank" aria-hidden="true">11</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Non-human technology</span>
<span class="iv-megamenu__meta">11 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="skies sightings">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq8" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#2266D8"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq8)"/><path d="M-10 164 89 92 172 140 249 64 330 148V210H-10z" fill="#04070F" fill-opacity=".68"/><circle cx="249" cy="48" r="26" fill="#B3D6FF" fill-opacity=".8"/></svg><span class="iv-megamenu__rank" aria-hidden="true">22</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Skies and sightings</span>
<span class="iv-megamenu__meta">22 files</span>
</a></li>
<li><a class="iv-megamenu__card" href="#mm-filter-note" data-iv-keywords="whistleblowers witnesses">
<span class="iv-megamenu__art"><svg viewBox="0 0 320 200" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq9" x1="0" y1="0" x2="320" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#0C1330"/></linearGradient></defs><rect width="320" height="200" fill="url(#mmq9)"/><path d="M16 200 160 32 304 200z" fill="#8FE3FF" fill-opacity=".22"/><path d="M108 200 160 124 211 200z" fill="#F5F7FC" fill-opacity=".5"/></svg><span class="iv-megamenu__rank" aria-hidden="true">11</span><span class="iv-megamenu__arrow" aria-hidden="true"></span></span>
<span class="iv-megamenu__name">Whistleblowers and witnesses</span>
<span class="iv-megamenu__meta">11 files</span>
</a></li>
</ul>
</div>
</div>
<aside class="iv-megamenu__aside">
<h3 class="iv-megamenu__heading">Latest files</h3>
<ul class="iv-megamenu__recent">
<li><a href="#mm-filter-note"><span class="iv-megamenu__thumb"><svg viewBox="0 0 80 80" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq10" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0F1D4D"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="80" height="80" fill="url(#mmq10)"/><circle cx="40" cy="40" r="25" fill="none" stroke="#FF9AA4" stroke-opacity=".65" stroke-width="3"/><circle cx="40" cy="40" r="9" fill="#FF9AA4" fill-opacity=".3"/></svg></span><span class="iv-megamenu__recent-title">Flying Saucer Working Party: five agents against the sky</span><time class="iv-megamenu__date" datetime="2026-09-15">15.09.26</time></a></li>
<li><a href="#mm-filter-note"><span class="iv-megamenu__thumb"><svg viewBox="0 0 80 80" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq11" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0C1330"/><stop offset="1" stop-color="#17AAD6"/></linearGradient></defs><rect width="80" height="80" fill="url(#mmq11)"/><path d="M-10 65 22 36 43 56 62 25 90 59V90H-10z" fill="#04070F" fill-opacity=".68"/><circle cx="62" cy="19" r="10" fill="#A6EFFF" fill-opacity=".8"/></svg></span><span class="iv-megamenu__recent-title">Project Sign and the step to Grudge: when the file changed name</span><time class="iv-megamenu__date" datetime="2026-09-15">15.09.26</time></a></li>
<li><a href="#mm-filter-note"><span class="iv-megamenu__thumb"><svg viewBox="0 0 80 80" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq12" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2266D8"/><stop offset="1" stop-color="#171A45"/></linearGradient></defs><rect width="80" height="80" fill="url(#mmq12)"/><path d="M4 80 40 12 76 80z" fill="#8B95FF" fill-opacity=".22"/><path d="M27 80 40 49 52 80z" fill="#EEF0FF" fill-opacity=".5"/></svg></span><span class="iv-megamenu__recent-title">Psychophonics: how a brain manufactures a voice</span><time class="iv-megamenu__date" datetime="2026-09-15">06.09.26</time></a></li>
<li><a href="#mm-filter-note"><span class="iv-megamenu__thumb"><svg viewBox="0 0 80 80" aria-hidden="true" focusable="false" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="mmq13" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#172F7A"/><stop offset="1" stop-color="#04070F"/></linearGradient></defs><rect width="80" height="80" fill="url(#mmq13)"/><path d="M4 54q17-32 35 0t35 0" fill="none" stroke="#66B1FF" stroke-opacity=".7" stroke-width="4"/></svg></span><span class="iv-megamenu__recent-title">The Taos hum: four laboratories, one motor</span><time class="iv-megamenu__date" datetime="2026-09-15">05.09.26</time></a></li>
</ul>
<h3 class="iv-megamenu__heading">By type of record</h3>
<ul class="iv-megamenu__facets">
<li><a href="#mm-filter-note"><span>Documents</span><small>15</small></a></li>
<li><a href="#mm-filter-note"><span>Events</span><small>7</small></a></li>
<li><a href="#mm-filter-note"><span>Testimonies</span><small>12</small></a></li>
<li><a href="#mm-filter-note"><span>People</span><small>24</small></a></li>
</ul>
</aside>
</div>
<footer class="iv-megamenu__foot">
<a class="iv-megamenu__foot-link" href="#mm-filter-note">Open the whole archive</a>
<a class="iv-megamenu__foot-link" href="#mm-filter-note">Send a lead</a>
<p class="iv-megamenu__status" aria-hidden="true"><span class="iv-megamenu__prompt">archive:~$</span><span class="iv-megamenu__cmd">ls /sectors</span><span class="iv-megamenu__caret-blink"></span><span class="iv-megamenu__hint">// end of index</span></p>
</footer>
</section>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-filter-note">Central</a>
</li>
<li class="iv-megamenu__item">
<a class="iv-megamenu__link" href="#mm-filter-note">Comms</a>
</li>
</ul>
</nav>
<p id="mm-filter-note">Sample archive navigation, not a real archive: every sector, count, date and file name is invented, and every link on this page points to this note. With JavaScript the panel gains a filter: type in it and only the cards, recent files and headings that match stay on screen, with the number of matches announced to screen readers. Without JavaScript the filter stays hidden, because nothing would filter.</p>
<section class="iv-stack" style="min-block-size: 70vh">
<h2>Something to read through the glass</h2>
<p>Filler text under the bar, so the frosted panel has a page behind it. Nothing on this page is fetched from anywhere, and no lead is sent anywhere.</p>
<p>The panel is a <code>iv-megamenu--glass</code> surface with <code>iv-megamenu--dense</code> cards: a wider frame of art and three columns instead of four.</p>
</section>// data-iv-component="megamenu"
{
keywords: "declassified paper",
}Al escribir en el filtro solo quedan visibles las tarjetas, las filas del directorio, las etiquetas de la nube, las filas recientes y los titulares de la tira cuyo texto —o data-iv-keywords— casa, ignorando diacríticos. Los grupos que se quedan sin nada se ocultan, aparece iv-megamenu__empty con emptyText y la línea de estado del pie anuncia el recuento con countText a la tecnología asistiva. Escape con texto en el campo lo vacía antes de cerrar el panel.
04
Opciones
| Opción | Atributo | Por defecto | Efecto |
|---|---|---|---|
hover | data-iv-hover | true | Abre con hover intencional y punteros finos; false abre solo con clic y teclado. |
openDelay, closeDelay | data-iv-open-delay, data-iv-close-delay | 120, 320 | Milisegundos antes de que un hover abra o cierre un panel. |
staticFrom | data-iv-static-from | lg | Punto de ruptura a partir del cual los paneles flotan; por debajo se comportan como acordeón. |
overlay | data-iv-overlay | true | Oscurece la página tras un panel abierto. Un megamenú alojado en un navbar debería ponerlo a false: la barra ya es la superficie elevada. |
closeOthers | data-iv-close-others | true | Abrir un elemento cierra los demás. |
filter | data-iv-filter | true | Muestra y conecta el iv-megamenu__filter del panel que lo tenga. Con false el campo se queda oculto. |
emptyText | data-iv-empty-text | "No matches" | La línea que aparece cuando una consulta no casa con nada. |
countText | data-iv-count-text | "{count} results" | Se anuncia tras cada filtrado; {count} se sustituye por el número que queda visible. |
closeText | data-iv-close-text | "Close" | Nombre accesible de un botón de cierre que no traiga el suyo. |
Locales: --iv-megamenu-width, --iv-megamenu-offset, --iv-megamenu-cols, --iv-megamenu-art-ratio y --iv-megamenu-accent. El componente escribe --iv-megamenu-caret-x en la raíz para situar el caret bajo el toggle abierto, y la hoja cuenta los pasos de entrada con --iv-i. Un megamenú cuya barra no esté centrada en la página —dentro de una cabecera, por ejemplo— debe fijar --iv-megamenu-width en algo como 56rem, o el panel se sale del viewport. La cabecera de esta web lo hace.
05
Métodos y eventos
Métodos: open(itemOrIndex), close(reason), toggle(itemOrIndex), selectTab(item, index) para mostrar una selección desde script, filter(item, query) para filtrar sin teclear y destroy(). Se lee openItem. Los índices cuentan todos los elementos de la barra, y un elemento sin panel no hace nada.
Eventos en la raíz: iv:open e iv:close (cancelables) y luego iv:opened e iv:closed, con detail.item y un motivo. iv:change es cancelable y se dispara antes de cambiar de pestaña, seguido de iv:changed, con el elemento y el índice. iv:filter se dispara tras cada filtrado y no es cancelable; su detalle lleva la query, el número de filas que quedan (visible) y el item filtrado.
06
Teclado y tecnología asistiva
Tab llega a enlaces y botones en orden; Enter, Espacio o Abajo sobre un toggle abren su panel, Izquierda y Derecha se mueven entre toggles y Inicio y Fin saltan. Escape cierra y devuelve el foco al toggle; salir del panel con Tab lo cierra. Dentro del panel las pestañas son un tablist de verdad: role="tab", aria-selected, tabindex rotatorio y flechas Izquierda y Derecha. Los toggles llevan aria-expanded y aria-controls; los paneles cerrados quedan inertes. Los enlaces siguen siendo enlaces, así que no se usan roles de menú.
07
Sin JavaScript
Cada enlace navega. Desde staticFrom hacia arriba un panel se muestra mientras su elemento tiene el puntero o el foco; por debajo los paneles quedan abiertos en línea bajo sus enlaces. Los toggles, el cierre y el filtro se quedan ocultos, y una pestaña es un enlace a su propio conjunto, que aparece con :target.
08
Errores comunes
- Poner enlaces esenciales solo dentro de los paneles: el propio enlace del elemento debería llevar a la sección.
- Más de cinco o seis elementos: un megamenú es ancho; considera una barra lateral o un buscador.
- Recuentos de adorno. Un número junto a un nombre se lee como una promesa; si no es real, mejor no ponerlo.
- Paneles muy altos: mantenlos por debajo del alto del viewport o tendrán scroll interno.