Menú desplegable multinivel con JavaScript puro-menú ordenado

Vista prévia

Descripción

Tidy-menu es una biblioteca JavaScript pequeña y de dependencia cero para crear menús desplegables horizontales & verticales multinivel con animaciones CSS3.

Funcionamiento

Cargue los archivos necesarios para el menú ordenado.

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

La estructura HTML para generar un menú desplegable horizontal a partir de listas HTML anidadas como se muestra a continuación:

<ul class="Menu -horizontal">

<li class="-hasSubmenu -noChevron"> <a href="#" data-icon="apps"></a>


<ul>



<li><a href="#">Bacon</a></li>



<li><a href="#">Ipsum</a></li>



<li><a href="#">Dolor</a></li>



<li><a href="#">Amet</a></li>


</ul>

</li>

<li class="-hasSubmenu"> <a href="#">Alpha</a>


<ul>



<li><a href="#">Bacon</a></li>



<li><a href="#">Ipsum</a></li>



<li class="-hasSubmenu"> <a href="#">Sub-menu</a>




<ul>





<li><a href="#">Bacon</a></li>





<li><a href="#">Ipsum</a></li>





<li><a href="#">Dolor</a></li>





<li><a href="#">Amet</a></li>




</ul>



</li>



<li><a href="#">Dolor</a></li>



<li><a href="#">Amet</a></li>



<li class="-hasSubmenu"> <a href="#">Another Sub-menu</a>




<ul>





<li><a href="#">Bacon</a></li>





<li><a href="#">Ipsum</a></li>





<li class="-hasSubmenu"> <a href="#">Sub-sub-menu!</a>






<ul>







<li><a href="#">Bacon</a></li>







<li><a href="#">Ipsum</a></li>







<li><a href="#">Dolor</a></li>







<li><a href="#">Amet</a></li>






</ul>





</li>





<li><a href="#">Dolor</a></li>





<li><a href="#">Amet</a></li>




</ul>



</li>


</ul>

</li>

<li><a href="#">Beta</a></li>

<li class="-hasSubmenu"> <a href="#">Gamma</a>


<ul>



<li><a href="#" data-icon="">Ipsum</a></li>



<li class="-hasSubmenu"> <a data-icon="cast" href="#">Dolorsssssssssssssssssssssssss</a>




<ul>





<li><a href="#">Bacon</a></li>





<li><a href="#">Ipsum</a></li>





<li><a href="#">Dolor</a></li>





<li><a href="#">Amet</a></li>




</ul>



</li>



<li><a href="#" data-icon="">Amet</a></li>



<li><a href="#" data-icon="cake">Tail pork loin chicken</a></li>



<li><a href="#" data-icon="">Bacon ipsum dolor amet pork loin rump filet mignon swine</a></li>


</ul>

</li>

<li><a href="#">Delta</a></li>

<li><a href="#">Epsilon</a></li>
</ul>

La estructura HTML para generar un menú desplegable vertical a partir de listas HTML anidadas como se muestra a continuación:

<ul class="Menu -vertical">

<li><a href="#">Bacon</a></li>

<li><a href="#">Ipsum</a></li>

<li class="-hasSubmenu"> <a href="#">Dolor</a>


<ul>



<li><a href="#">Bacon</a></li>



<li><a href="#">Ipsum</a></li>



<li class="-hasSubmenu"> <a href="#">Sub-menu</a>




<ul>





<li><a href="#">Bacon</a></li>





<li><a href="#">Ipsum</a></li>





<li><a href="#">Dolor</a></li>





<li><a href="#">Amet</a></li>




</ul>



</li>



<li><a href="#">Dolor</a></li>



<li><a href="#">Amet</a></li>



<li class="-hasSubmenu"> <a href="#">Another Sub-menu</a>




<ul>





<li><a href="#">Bacon</a></li>





<li><a href="#">Ipsum</a></li>





<li class="-hasSubmenu"> <a href="#">Sub-sub-menu!</a>






<ul>







<li><a href="#">Bacon</a></li>







<li><a href="#">Ipsum</a></li>







<li><a href="#">Dolor</a></li>







<li><a href="#">Amet</a></li>






</ul>





</li>





<li><a href="#">Dolor</a></li>





<li><a href="#">Amet</a></li>




</ul>



</li>


</ul>

</li>

<li><a href="#">Amet</a></li>
</ul>