Pure CSS menu. Animated and responsive. Works as an off-canvas menu on mobile viewports and is a flyout on desktop. Triggered by a simple hamburger icon that sticks to the top of the page.
Optional first element: input with type checkbox and class menu-trigger.
Note: The trigger will toggle the off-canvas/flyout menu by tapping/clicking the hamburger icon repeatedly. By leaving the trigger out the flyout will appear on hover and on mobile the user would have to tap the backdrop to close the off-canvas menu.
Root ul with class menu. First li child with class start working as the trigger.
Last element: div with class overlay.
<input type="checkbox" class="menu-trigger">
<ul class="menu" role="menu">
<li class="start">
<a href="#">
<svg preserveAspectRatio="xMidYMid meet" focusable="false" viewBox="-5 -5 34 34">
<g><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"></path></g>
</svg>
</a>
</li>
<li>
<a href="#">Level 1</a>
<ul>
<li><a href="#">Level 2</a>
<ul>
<li><a href="#">Level 3</a>
<ul>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
</ul>
</li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
</ul>
</li>
[...]
</ul>
<div class="overlay"></div>
There is a confirmed issue
with Chrome where transitions can fire on page load. Submenus can briefly be seen on page
load in that case. Integrating any JavaScript resources or even a single-spaced <script> </script>
will circumvent that behaviour.
To alter colors, sizes etc find the accordings variables in src/flyout-menu.scss
MIT