Toggleable DropDown menú móvil con KoalaNav. js

Vista prévia

Descripción

Koalanav. js es un simple plugin de JavaScript que convierte un menú de navegación horizontal en un menú desplegable que se puede conmutable cuando el tamaño de la pantalla alcanza un cierto ancho (punto de interrupción).

Uso básico

Cargue el koalanav. CSS y el koalanav. js requeridos en el documento.

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

Crear un menú de navegación multinivel regular con listas HTML.

<nav id="demo">

<ul>


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


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


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



<ul>




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




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




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





<ul>






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






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






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






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







<ul>








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








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








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








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







</ul>






</li>





</ul>




</li>




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



</ul>


</li>


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


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

</ul>
</nav>

Inicializar el menú móvil con las opciones predeterminadas.

var nav1 = new KoalaNav("demo");

Opciones disponibles.

var nav1 = new KoalaNav("demo",{

// The type of icon to use for the mobile toggle button.
 // "hamburger" or "arrow"
btnIcon: 'hamburger',


 // The position of the mobile toggle button icon.
 // "left" or "right"
btnPosition: 'left',

 // The width (in pixels) of when the mobile menu should be displayed
mobileWidth: 500







});

Agregue algunos CSS personalizados para el estilo del menú móvil.

.navigation-menu--is-mobile li {

border-top: 1px solid #ddd;

background: #eee;
}

.navigation-menu--is-desktop li a,
.navigation-menu--is-mobile li a {

padding: .5em 1em;

text-decoration: none;
}

.navigation-menu--is-mobile li li {

border-top: 1px solid #ccc;

background: #ddd;
}

.navigation-menu--is-mobile li li li {

border-top: 1px solid #bbb;

background: #ccc;
}

.navigation-menu--is-mobile li li li li {

border-top: 1px solid #aaa;

background: #bbb;
}

.navigation-menu--is-mobile .has-child-menu span { padding: .5em 1em; }

.navigation-menu--is-desktop {

border-bottom: 1px solid #ccc;

border-top: 1px solid #ccc;
}

.navigation-menu--is-desktop,
.navigation-menu--is-desktop ul { background: #eee; }

.navigation-menu--is-desktop ul ul { background: #ccc; }

.navigation-menu--is-desktop ul li:hover { background: #ccc; }

.navigation-menu--is-desktop ul ul li:hover { background: #bbb; }

.navigation-menu__mobile-toggle { margin: .75em 1em; }