Responsive Multilevel Navigation with Pure JavaScript & CSS – menio

Category: Javascript , Menu & Navigation | November 25, 2015
Author: tiberiualex
Views Total: 3,355
Official Page: Go to website
Last Update: November 25, 2015
License: MIT

Preview:

Responsive Multilevel Navigation with Pure JavaScript & CSS – menio

Description:

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'
    
});

You Might Be Interested In:


Leave a Reply