Responsive Multilevel Navigation with Pure JavaScript & CSS – menio

menio is a standalone, mobile-friendly JavaScript navigation system which automatically turns a normal horizontal multilevel menu into a vertical dropdown menu as the screen sizes reaches a specific breakpoint.

Basic usage:

Add menio’s JavaScript and CSS files into the html page.

<link rel="stylesheet" href="styles/menio.css">
<script src="js/menio.js"></script>

Create  a multilevel navigation menu from a nested nav list.

<nav class="menio">
  <ul class="menu">
    <li class="menu__item"><a class="menu__link" href="#">Link</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Link</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Link</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Link</a></li>
    <li class="menu__item">
      <a class="menu__link" href="#">Link</a>
      <ul class="submenu">
        <li class="submenu__item"><a class="submenu__link" href="#">Sublink</a></li>
        <li class="submenu__item"><a class="submenu__link" href="#">Sublink</a></li>
        <li class="submenu__item"><a class="submenu__link" href="#">Sublink</a></li>
        <li class="submenu__item"><a class="submenu__link" href="#">Sublink</a></li>
      </ul>
    </li>
    <li class="menu__item"><a class="menu__link" href="#">Link</a></li>
    <li class="menu__item">
      <a class="menu__link" href="#">Link</a>
      <ul class="submenu">
        <li class="submenu__item"><a class="submenu__link" href="#">Sublink</a></li>
        <li class="submenu__item"><a class="submenu__link" href="#">Sublink</a></li>
        <li class="submenu__item"><a class="submenu__link" href="#">Sublink</a></li>
        <li class="submenu__item"><a class="submenu__link" href="#">Sublink</a></li>
      </ul>
    </li>
    <li class="menu__item"><a class="menu__link" href="#">Link</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Link</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Link</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Link</a></li>
  </ul>
</nav>

Create a new menio instance to initialize the responsive navigation.

var menu = new Menio({
    // target element 
    element: '.menio',
    // customize the breakpoint
    breakpoint: 'auto'
    
});