Pure CSS Responsive Flyout Menu is a CSS-only responsive multi-level menu that expands a hamburger toggle button into a horizontal dropdown menu on the desktop or an off-board side menu on mobile.
It works as an off-canvas menu on mobile windows and a popup on desktops. It is powered by a simple hamburger icon that sticks to the top of the page.
How to make use of it:
1. Include the main style sheet flyout-menu.css in the header of the document.
<link rel="stylesheet" href="flyout-menu.css">
2. Create a hamburger launcher to toggle responsive navigation.
<input type="checkbox" class="menu-trigger">
3. Create a multilevel list of nested HTML lists like this one.
<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> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> </ul> </li> <li> <a href="#">Level 1</a> <ul> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> </ul> </li> <li> <a href="#">Level 1</a> <ul> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> <li><a href="#">Level 3</a></li> </ul> </li> </ul> </li> </ul>
4. Create an overlay to navigate outside the panel in mobile view.
<div class="overlay"></div>
responsive hamburger menu css only, pure css responsive flyout menu Plugin/Github
See Demo And Download
Official Website(dneustadt): Click Here
This superior jQuery/javascript plugin is developed by dneustadt. For extra advanced usage, please go to the official website.
Be First to Comment