Menú de navegación multinivel adaptable con vanilla JavaScript

Vista prévia

Descripción

Un sencillo menú multinivel con respuesta a JavaScript de vainilla que se realiza como menú desplegable en dispositivos de pantalla más pequeños. Construido usando CSS, vanilla JavaScript y la librería Apollo. js JS.

Funcionamiento

Cargue el responsivemenu. CSS en el encabezado.

<link rel="stylesheet" href="path/to/responsivemenu.css">

Cree un menú multinivel utilizando listas HTML anidadas.

<div class="navigation_container">

<ul class="navigation rm-closed">


<li class="active"> <a class="test" href="#">Home</a> </li>


<li> <a href="test">Item 2</a> </li>


<li> <a href="test">Item 3</a>



<ul>




<li> <a href="test">Test</a> </li>




<li> <a href="test">A long one</a>





<ul>






<li> <a href="test">Test1</a> </li>






<li> <a href="test">Test2</a>







<ul>








<li> <a href="test">Test1</a> </li>








<li> <a href="test">Test2</a> </li>








<li> <a href="test">Test3</a>









<ul>










<li> <a href="test">Test1</a> </li>










<li> <a href="test">Test2</a> </li>










<li> <a href="test">Test3</a> </li>









</ul>








</li>







</ul>






</li>






<li> <a href="test">Test3</a> </li>





</ul>




</li>




<li> <a href="test">Test</a> </li>



</ul>


</li>


<li> <a href="#">Item 4</a> </li>

</ul>
</div>

Cargue el Apollo. js y el Vanilla. js. responsive. Menu. js en la parte inferior de la Página Web.

<script src="path/to/dependencies/apollo.js"></script>
<script src="path/to/vanilla.js.responsive.menu.js"></script>

Inicialice el menú adaptable.

responsivemenu.init({

wrapper: document.querySelector('.navigation_container'),

togglecontent: 'menu',

sticky: 1
});

Opciones predeterminadas completas.

wrapper: document.getElementsByTagName('nav')[0],
menu: '',
initiated_class: 'rm-initiated',
before_element: '',
toggletype: 'button',
toggleclass: 'rm-togglebutton',
toggleclosedclass: 'rm-togglebutton--closed',
togglecontent: 'menu',
subtoggletype: 'button',
subtoggleclass: 'rm-subtoggle',
subtogglecontent: '+',
sticky: 0,
absolute: 0,
hideclass: 'rm-closed',
openclass: 'rm-opened',
focusedclass: 'rm-focused',
width: 600,
parentclass: 'rm-parent',
fullmenuclass: 'rm-fullmenu',
absolutemenuclass: 'rm-absolutemenu',
bodyoverflowhiddenclass: 'rm-bodyoverflowhidden',
menuoverflowautoclass: 'rm-menuoverflowauto',
stickyclass: 'rm-sticky',
stickyinitiatedclass: 'rm-sticky-initiated',
noresponsivemenuclass: 'rm-no-responsive-menu'

Registro de cambios

07/05/2018

• Múltiples menús semi posibles