Navegación multinivel adaptable con JavaScript puro & CSS-menio

Vista prévia

Descripción

menio es un sistema de navegación JavaScript autónomo y amigable para móviles que convierte automáticamente un menú horizontal multinivel normal en un menú desplegable vertical, ya que los tamaños de pantalla alcanzan un punto de interrupción específico.

¿Cómo funciona?

Agregue los archivos JavaScript y CSS de menio a la página HTML.

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

Cree un menú de navegación multinivel a partir de una lista de NAV anidada.

<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>

Cree una nueva instancia de menio para inicializar la navegación adaptable.

var menu = new Menio({



// target element


 element: '.menio',



// customize the breakpoint


breakpoint: 'auto'



});