| Author: | manish-in-java |
|---|---|
| Views Total: | 2,680 views |
| Official Page: | Go to website |
| Last Update: | September 26, 2018 |
| License: | MIT |
Preview:
Description:
A multi-level drawer (off-canvas) menu inspired by the modern app navigation system. Written in pure CSS/CSS3 and Checkbox Hack.
Click the hamburger button to toggle the drawer navigation. You can navigate through the hierarchical menu with a smooth sliding animation similar to a drill down menu.
How to use it:
Load the necessary stylesheet in the document’s head section.
<link href="style.css" rel="stylesheet" />
The HTML for the multi-level drawer navigation.
<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>See Also:
Multifunctional Sliding Drawer Plugin In JavaScript – toolslide.js
Responsive Sidebar Navigation For Bootstrap 5
Easy Sliding Drawer In Vanilla JavaScript
Sliding Drawer Navigation With Blur Effect – Pushbar.js
Minimal Drawer Navigation Component With Pure JavaScript – tinyDrawer.js
Mobile-first Drawer Navigation In Vanilla JavaScript – hy-drawer
Tilted Sliding Navigation With CSS Clip Path
Dynamic Sliding Drawer Navigation In Pure JavaScript – Hipsbar