Navegación de cajón multinivel en CSS puro
| Autor: | manish-in-java |
|---|---|
| Views Total: | 747 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 26, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un menú de cajón de varios niveles (fuera de lienzo) inspirado en el sistema de navegación de aplicaciones modernas. Escrito en Pure CSS/CSS3 y < a href = "https://css-tricks.com/the-checkbox-hack/" target = "_ blank" rel = "noopener" > CheckBox hack .
Haga clic en el botón de hamburguesa para alternar la navegación del cajón. Puede navegar por el menú jerárquico con una animación deslizante suave similar a un profundizar el menú .
Funcionamiento
Cargue la hoja de estilos necesaria en la sección principal del documento.
<link href="style.css" rel="stylesheet" />
El HTML para la navegación de cajones multinivel.
<header> <form action="javascript:"> <input id="menu" type="checkbox"> <input id="menu-reset" type="reset"> <nav> <main> <label class="menu-toggle" for="menu"><span> </span></label> <label class="menu-close" for="menu-reset"><span> </span></label> <menu> <menuitem> <span class="heading">Menu</span> </menuitem> <menuitem> <label for="menu-item-1">Item 1</label> <input id="menu-item-1" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-1"><span> </span></label> <menu> <menuitem> <span class="heading">Item 1</span> </menuitem> <menuitem> <label for="menu-item-1-1">Item 1.1</label> <input id="menu-item-1-1" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-1-1"><span> </span></label> <menu> <menuitem> <span class="heading">Item 1.1</span> </menuitem> <menuitem> <span>Item 1.1.1</span> </menuitem> <menuitem> <span>Item 1.1.2</span> </menuitem> <menuitem> <span>Item 1.1.3</span> </menuitem> <menuitem> <span>Item 1.1.4</span> </menuitem> <menuitem> <span>Item 1.1.5</span> </menuitem> <menuitem> <span>Item 1.1.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-1-2">Item 1.2</label> <input id="menu-item-1-2" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-1-2"><span> </span></label> <menu> <menuitem> <span class="heading">Item 1.2</span> </menuitem> <menuitem> <span>Item 1.2.1</span> </menuitem> <menuitem> <span>Item 1.2.2</span> </menuitem> <menuitem> <span>Item 1.2.3</span> </menuitem> <menuitem> <span>Item 1.2.4</span> </menuitem> <menuitem> <span>Item 1.2.5</span> </menuitem> <menuitem> <span>Item 1.2.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-1-3">Item 1.3</label> <input id="menu-item-1-3" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-1-3"><span> </span></label> <menu> <menuitem> <span class="heading">Item 1.3</span> </menuitem> <menuitem> <span>Item 1.3.1</span> </menuitem> <menuitem> <span>Item 1.3.2</span> </menuitem> <menuitem> <span>Item 1.3.3</span> </menuitem> <menuitem> <span>Item 1.3.4</span> </menuitem> <menuitem> <span>Item 1.3.5</span> </menuitem> <menuitem> <span>Item 1.3.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-1-4">Item 1.4</label> <input id="menu-item-1-4" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-1-4"><span> </span></label> <menu> <menuitem> <span class="heading">Item 1.4</span> </menuitem> <menuitem> <span>Item 1.4.1</span> </menuitem> <menuitem> <span>Item 1.4.2</span> </menuitem> <menuitem> <span>Item 1.4.3</span> </menuitem> <menuitem> <span>Item 1.4.4</span> </menuitem> <menuitem> <span>Item 1.4.5</span> </menuitem> <menuitem> <span>Item 1.4.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-1-5">Item 1.5</label> <input id="menu-item-1-5" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-1-5"><span> </span></label> <menu> <menuitem> <span class="heading">Item 1.5</span> </menuitem> <menuitem> <span>Item 1.5.1</span> </menuitem> <menuitem> <span>Item 1.5.2</span> </menuitem> <menuitem> <span>Item 1.5.3</span> </menuitem> <menuitem> <span>Item 1.5.4</span> </menuitem> <menuitem> <span>Item 1.5.5</span> </menuitem> <menuitem> <span>Item 1.5.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-1-6">Item 1.6</label> <input id="menu-item-1-6" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-1-6"><span> </span></label> <menu> <menuitem> <span class="heading">Item 1.6</span> </menuitem> <menuitem> <span>Item 1.6.1</span> </menuitem> <menuitem> <span>Item 1.6.2</span> </menuitem> <menuitem> <span>Item 1.6.3</span> </menuitem> <menuitem> <span>Item 1.6.4</span> </menuitem> <menuitem> <span>Item 1.6.5</span> </menuitem> <menuitem> <span>Item 1.6.6</span> </menuitem> </menu> </main> </nav> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-2">Item 2</label> <input id="menu-item-2" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-2"><span> </span></label> <menu> <menuitem> <span class="heading">Item 2</span> </menuitem> <menuitem> <label for="menu-item-2-1">Item 2.1</label> <input id="menu-item-2-1" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-2-1"><span> </span></label> <menu> <menuitem> <span class="heading">Item 2.1</span> </menuitem> <menuitem> <span>Item 2.1.1</span> </menuitem> <menuitem> <span>Item 2.1.2</span> </menuitem> <menuitem> <span>Item 2.1.3</span> </menuitem> <menuitem> <span>Item 2.1.4</span> </menuitem> <menuitem> <span>Item 2.1.5</span> </menuitem> <menuitem> <span>Item 2.1.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-2-2">Item 2.2</label> <input id="menu-item-2-2" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-2-2"><span> </span></label> <menu> <menuitem> <span class="heading">Item 2.2</span> </menuitem> <menuitem> <span>Item 2.2.1</span> </menuitem> <menuitem> <span>Item 2.2.2</span> </menuitem> <menuitem> <span>Item 2.2.3</span> </menuitem> <menuitem> <span>Item 2.2.4</span> </menuitem> <menuitem> <span>Item 2.2.5</span> </menuitem> <menuitem> <span>Item 2.2.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-2-3">Item 2.3</label> <input id="menu-item-2-3" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-2-3"><span> </span></label> <menu> <menuitem> <span class="heading">Item 2.3</span> </menuitem> <menuitem> <span>Item 2.3.1</span> </menuitem> <menuitem> <span>Item 2.3.2</span> </menuitem> <menuitem> <span>Item 2.3.3</span> </menuitem> <menuitem> <span>Item 2.3.4</span> </menuitem> <menuitem> <span>Item 2.3.5</span> </menuitem> <menuitem> <span>Item 2.3.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-2-4">Item 2.4</label> <input id="menu-item-2-4" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-2-4"><span> </span></label> <menu> <menuitem> <span class="heading">Item 2.4</span> </menuitem> <menuitem> <span>Item 2.4.1</span> </menuitem> <menuitem> <span>Item 2.4.2</span> </menuitem> <menuitem> <span>Item 2.4.3</span> </menuitem> <menuitem> <span>Item 2.4.4</span> </menuitem> <menuitem> <span>Item 2.4.5</span> </menuitem> <menuitem> <span>Item 2.4.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-2-5">Item 2.5</label> <input id="menu-item-2-5" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-2-5"><span> </span></label> <menu> <menuitem> <span class="heading">Item 2.5</span> </menuitem> <menuitem> <span>Item 2.5.1</span> </menuitem> <menuitem> <span>Item 2.5.2</span> </menuitem> <menuitem> <span>Item 2.5.3</span> </menuitem> <menuitem> <span>Item 2.5.4</span> </menuitem> <menuitem> <span>Item 2.5.5</span> </menuitem> <menuitem> <span>Item 2.5.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-2-6">Item 2.6</label> <input id="menu-item-2-6" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-2-6"><span> </span></label> <menu> <menuitem> <span class="heading">Item 2.6</span> </menuitem> <menuitem> <span>Item 2.6.1</span> </menuitem> <menuitem> <span>Item 2.6.2</span> </menuitem> <menuitem> <span>Item 2.6.3</span> </menuitem> <menuitem> <span>Item 2.6.4</span> </menuitem> <menuitem> <span>Item 2.6.5</span> </menuitem> <menuitem> <span>Item 2.6.6</span> </menuitem> </menu> </main> </nav> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-3">Item 3</label> <input id="menu-item-3" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-3"><span> </span></label> <menu> <menuitem> <span class="heading">Item 3</span> </menuitem> <menuitem> <label for="menu-item-3-1">Item 3.1</label> <input id="menu-item-3-1" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-3-1"><span> </span></label> <menu> <menuitem> <span class="heading">Item 3.1</span> </menuitem> <menuitem> <span>Item 3.1.1</span> </menuitem> <menuitem> <span>Item 3.1.2</span> </menuitem> <menuitem> <span>Item 3.1.3</span> </menuitem> <menuitem> <span>Item 3.1.4</span> </menuitem> <menuitem> <span>Item 3.1.5</span> </menuitem> <menuitem> <span>Item 3.1.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-3-2">Item 3.2</label> <input id="menu-item-3-2" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-3-2"><span> </span></label> <menu> <menuitem> <span class="heading">Item 3.2</span> </menuitem> <menuitem> <span>Item 3.2.1</span> </menuitem> <menuitem> <span>Item 3.2.2</span> </menuitem> <menuitem> <span>Item 3.2.3</span> </menuitem> <menuitem> <span>Item 3.2.4</span> </menuitem> <menuitem> <span>Item 3.2.5</span> </menuitem> <menuitem> <span>Item 3.2.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-3-3">Item 3.3</label> <input id="menu-item-3-3" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-3-3"><span> </span></label> <menu> <menuitem> <span class="heading">Item 3.3</span> </menuitem> <menuitem> <span>Item 3.3.1</span> </menuitem> <menuitem> <span>Item 3.3.2</span> </menuitem> <menuitem> <span>Item 3.3.3</span> </menuitem> <menuitem> <span>Item 3.3.4</span> </menuitem> <menuitem> <span>Item 3.3.5</span> </menuitem> <menuitem> <span>Item 3.3.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-3-4">Item 3.4</label> <input id="menu-item-3-4" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-3-4"><span> </span></label> <menu> <menuitem> <span class="heading">Item 3.4</span> </menuitem> <menuitem> <span>Item 3.4.1</span> </menuitem> <menuitem> <span>Item 3.4.2</span> </menuitem> <menuitem> <span>Item 3.4.3</span> </menuitem> <menuitem> <span>Item 3.4.4</span> </menuitem> <menuitem> <span>Item 3.4.5</span> </menuitem> <menuitem> <span>Item 3.4.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-3-5">Item 3.5</label> <input id="menu-item-3-5" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-3-5"><span> </span></label> <menu> <menuitem> <span class="heading">Item 3.5</span> </menuitem> <menuitem> <span>Item 3.5.1</span> </menuitem> <menuitem> <span>Item 3.5.2</span> </menuitem> <menuitem> <span>Item 3.5.3</span> </menuitem> <menuitem> <span>Item 3.5.4</span> </menuitem> <menuitem> <span>Item 3.5.5</span> </menuitem> <menuitem> <span>Item 3.5.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-3-6">Item 3.6</label> <input id="menu-item-3-6" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-3-6"><span> </span></label> <menu> <menuitem> <span class="heading">Item 3.6</span> </menuitem> <menuitem> <span>Item 3.6.1</span> </menuitem> <menuitem> <span>Item 3.6.2</span> </menuitem> <menuitem> <span>Item 3.6.3</span> </menuitem> <menuitem> <span>Item 3.6.4</span> </menuitem> <menuitem> <span>Item 3.6.5</span> </menuitem> <menuitem> <span>Item 3.6.6</span> </menuitem> </menu> </main> </nav> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-4">Item 4</label> <input id="menu-item-4" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-4"><span> </span></label> <menu> <menuitem> <span class="heading">Item 4</span> </menuitem> <menuitem> <label for="menu-item-4-1">Item 4.1</label> <input id="menu-item-4-1" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-4-1"><span> </span></label> <menu> <menuitem> <span class="heading">Item 4.1</span> </menuitem> <menuitem> <span>Item 4.1.1</span> </menuitem> <menuitem> <span>Item 4.1.2</span> </menuitem> <menuitem> <span>Item 4.1.3</span> </menuitem> <menuitem> <span>Item 4.1.4</span> </menuitem> <menuitem> <span>Item 4.1.5</span> </menuitem> <menuitem> <span>Item 4.1.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-4-2">Item 4.2</label> <input id="menu-item-4-2" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-4-2"><span> </span></label> <menu> <menuitem> <span class="heading">Item 4.2</span> </menuitem> <menuitem> <span>Item 4.2.1</span> </menuitem> <menuitem> <span>Item 4.2.2</span> </menuitem> <menuitem> <span>Item 4.2.3</span> </menuitem> <menuitem> <span>Item 4.2.4</span> </menuitem> <menuitem> <span>Item 4.2.5</span> </menuitem> <menuitem> <span>Item 4.2.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-4-3">Item 4.3</label> <input id="menu-item-4-3" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-4-3"><span> </span></label> <menu> <menuitem> <span class="heading">Item 4.3</span> </menuitem> <menuitem> <span>Item 4.3.1</span> </menuitem> <menuitem> <span>Item 4.3.2</span> </menuitem> <menuitem> <span>Item 4.3.3</span> </menuitem> <menuitem> <span>Item 4.3.4</span> </menuitem> <menuitem> <span>Item 4.3.5</span> </menuitem> <menuitem> <span>Item 4.3.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-4-4">Item 4.4</label> <input id="menu-item-4-4" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-4-4"><span> </span></label> <menu> <menuitem> <span class="heading">Item 4.4</span> </menuitem> <menuitem> <span>Item 4.4.1</span> </menuitem> <menuitem> <span>Item 4.4.2</span> </menuitem> <menuitem> <span>Item 4.4.3</span> </menuitem> <menuitem> <span>Item 4.4.4</span> </menuitem> <menuitem> <span>Item 4.4.5</span> </menuitem> <menuitem> <span>Item 4.4.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-4-5">Item 4.5</label> <input id="menu-item-4-5" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-4-5"><span> </span></label> <menu> <menuitem> <span class="heading">Item 4.5</span> </menuitem> <menuitem> <span>Item 4.5.1</span> </menuitem> <menuitem> <span>Item 4.5.2</span> </menuitem> <menuitem> <span>Item 4.5.3</span> </menuitem> <menuitem> <span>Item 4.5.4</span> </menuitem> <menuitem> <span>Item 4.5.5</span> </menuitem> <menuitem> <span>Item 4.5.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-4-6">Item 4.6</label> <input id="menu-item-4-6" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-4-6"><span> </span></label> <menu> <menuitem> <span class="heading">Item 4.6</span> </menuitem> <menuitem> <span>Item 4.6.1</span> </menuitem> <menuitem> <span>Item 4.6.2</span> </menuitem> <menuitem> <span>Item 4.6.3</span> </menuitem> <menuitem> <span>Item 4.6.4</span> </menuitem> <menuitem> <span>Item 4.6.5</span> </menuitem> <menuitem> <span>Item 4.6.6</span> </menuitem> </menu> </main> </nav> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-5">Item 5</label> <input id="menu-item-5" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-5"><span> </span></label> <menu> <menuitem> <span class="heading">Item 5</span> </menuitem> <menuitem> <label for="menu-item-5-1">Item 5.1</label> <input id="menu-item-5-1" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-5-1"><span> </span></label> <menu> <menuitem> <span class="heading">Item 5.1</span> </menuitem> <menuitem> <span>Item 5.1.1</span> </menuitem> <menuitem> <span>Item 5.1.2</span> </menuitem> <menuitem> <span>Item 5.1.3</span> </menuitem> <menuitem> <span>Item 5.1.4</span> </menuitem> <menuitem> <span>Item 5.1.5</span> </menuitem> <menuitem> <span>Item 5.1.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-5-2">Item 5.2</label> <input id="menu-item-5-2" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-5-2"><span> </span></label> <menu> <menuitem> <span class="heading">Item 5.2</span> </menuitem> <menuitem> <span>Item 5.2.1</span> </menuitem> <menuitem> <span>Item 5.2.2</span> </menuitem> <menuitem> <span>Item 5.2.3</span> </menuitem> <menuitem> <span>Item 5.2.4</span> </menuitem> <menuitem> <span>Item 5.2.5</span> </menuitem> <menuitem> <span>Item 5.2.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-5-3">Item 5.3</label> <input id="menu-item-5-3" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-5-3"><span> </span></label> <menu> <menuitem> <span class="heading">Item 5.3</span> </menuitem> <menuitem> <span>Item 5.3.1</span> </menuitem> <menuitem> <span>Item 5.3.2</span> </menuitem> <menuitem> <span>Item 5.3.3</span> </menuitem> <menuitem> <span>Item 5.3.4</span> </menuitem> <menuitem> <span>Item 5.3.5</span> </menuitem> <menuitem> <span>Item 5.3.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-5-4">Item 5.4</label> <input id="menu-item-5-4" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-5-4"><span> </span></label> <menu> <menuitem> <span class="heading">Item 5.4</span> </menuitem> <menuitem> <span>Item 5.4.1</span> </menuitem> <menuitem> <span>Item 5.4.2</span> </menuitem> <menuitem> <span>Item 5.4.3</span> </menuitem> <menuitem> <span>Item 5.4.4</span> </menuitem> <menuitem> <span>Item 5.4.5</span> </menuitem> <menuitem> <span>Item 5.4.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-5-5">Item 5.5</label> <input id="menu-item-5-5" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-5-5"><span> </span></label> <menu> <menuitem> <span class="heading">Item 5.5</span> </menuitem> <menuitem> <span>Item 5.5.1</span> </menuitem> <menuitem> <span>Item 5.5.2</span> </menuitem> <menuitem> <span>Item 5.5.3</span> </menuitem> <menuitem> <span>Item 5.5.4</span> </menuitem> <menuitem> <span>Item 5.5.5</span> </menuitem> <menuitem> <span>Item 5.5.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-5-6">Item 5.6</label> <input id="menu-item-5-6" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-5-6"><span> </span></label> <menu> <menuitem> <span class="heading">Item 5.6</span> </menuitem> <menuitem> <span>Item 5.6.1</span> </menuitem> <menuitem> <span>Item 5.6.2</span> </menuitem> <menuitem> <span>Item 5.6.3</span> </menuitem> <menuitem> <span>Item 5.6.4</span> </menuitem> <menuitem> <span>Item 5.6.5</span> </menuitem> <menuitem> <span>Item 5.6.6</span> </menuitem> </menu> </main> </nav> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-6">Item 6</label> <input id="menu-item-6" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-6"><span> </span></label> <menu> <menuitem> <span class="heading">Item 6</span> </menuitem> <menuitem> <label for="menu-item-6-1">Item 6.1</label> <input id="menu-item-6-1" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-6-1"><span> </span></label> <menu> <menuitem> <span class="heading">Item 6.1</span> </menuitem> <menuitem> <span>Item 6.1.1</span> </menuitem> <menuitem> <span>Item 6.1.2</span> </menuitem> <menuitem> <span>Item 6.1.3</span> </menuitem> <menuitem> <span>Item 6.1.4</span> </menuitem> <menuitem> <span>Item 6.1.5</span> </menuitem> <menuitem> <span>Item 6.1.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-6-2">Item 6.2</label> <input id="menu-item-6-2" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-6-2"><span> </span></label> <menu> <menuitem> <span class="heading">Item 6.2</span> </menuitem> <menuitem> <span>Item 6.2.1</span> </menuitem> <menuitem> <span>Item 6.2.2</span> </menuitem> <menuitem> <span>Item 6.2.3</span> </menuitem> <menuitem> <span>Item 6.2.4</span> </menuitem> <menuitem> <span>Item 6.2.5</span> </menuitem> <menuitem> <span>Item 6.2.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-6-3">Item 6.3</label> <input id="menu-item-6-3" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-6-3"><span> </span></label> <menu> <menuitem> <span class="heading">Item 6.3</span> </menuitem> <menuitem> <span>Item 6.3.1</span> </menuitem> <menuitem> <span>Item 6.3.2</span> </menuitem> <menuitem> <span>Item 6.3.3</span> </menuitem> <menuitem> <span>Item 6.3.4</span> </menuitem> <menuitem> <span>Item 6.3.5</span> </menuitem> <menuitem> <span>Item 6.3.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-6-4">Item 6.4</label> <input id="menu-item-6-4" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-6-4"><span> </span></label> <menu> <menuitem> <span class="heading">Item 6.4</span> </menuitem> <menuitem> <span>Item 6.4.1</span> </menuitem> <menuitem> <span>Item 6.4.2</span> </menuitem> <menuitem> <span>Item 6.4.3</span> </menuitem> <menuitem> <span>Item 6.4.4</span> </menuitem> <menuitem> <span>Item 6.4.5</span> </menuitem> <menuitem> <span>Item 6.4.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-6-5">Item 6.5</label> <input id="menu-item-6-5" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-6-5"><span> </span></label> <menu> <menuitem> <span class="heading">Item 6.5</span> </menuitem> <menuitem> <span>Item 6.5.1</span> </menuitem> <menuitem> <span>Item 6.5.2</span> </menuitem> <menuitem> <span>Item 6.5.3</span> </menuitem> <menuitem> <span>Item 6.5.4</span> </menuitem> <menuitem> <span>Item 6.5.5</span> </menuitem> <menuitem> <span>Item 6.5.6</span> </menuitem> </menu> </main> </nav> </menuitem> <menuitem> <label for="menu-item-6-6">Item 6.6</label> <input id="menu-item-6-6" type="checkbox"> <nav> <main> <label class="menu-toggle" for="menu-item-6-6"><span> </span></label> <menu> <menuitem> <span class="heading">Item 6.6</span> </menuitem> <menuitem> <span>Item 6.6.1</span> </menuitem> <menuitem> <span>Item 6.6.2</span> </menuitem> <menuitem> <span>Item 6.6.3</span> </menuitem> <menuitem> <span>Item 6.6.4</span> </menuitem> <menuitem> <span>Item 6.6.5</span> </menuitem> <menuitem> <span>Item 6.6.6</span> </menuitem> </menu> </main> </nav> </menuitem> </menu> </main> </nav> </menuitem> </menu> </main> </nav> </form> </header>
