Navegación de cajón deslizante con JavaScript y CSS3

Vista prévia

Descripción

Una navegación de cajón basada en JavaScript que se desliza desde el lado izquierdo de la página web con una animación basada en CSS3 cuando se alterna, similar al famoso menú de la aplicación fuera del lienzo.

Funcionamiento

Cargue los archivos de hoja de estilos requeridos en la sección Head de su página web.

<link rel="stylesheet" href="dd-menu.css">
<link rel="stylesheet" href="dd-menu-items.css">
<link rel="stylesheet" href="theme-standard.css">

Crear un botón de alternancia de menú.

<button id="open-menu">Open Menu</button>

Cree el HTML para el menú del cajón deslizante.

<div id="dd-menu" class="dd-menu level-1" data-button="#open-menu">

<div class="dd-menu-header">


<button class="dd-menu-prev">&larr;</button>


<a class="dd-menu-title">Menu</a>


<button class="dd-menu-close">&times;</button>

</div>

<div class="dd-menu-items">


<div class="dd-menu-item link"><a href="#">Item One</a></div>


<div class="dd-menu-item link"><a href="#" data-submenu="submenu-one">Item Two</a></div>


<div class="dd-menu-item link"><a href="#">Item Three</a></div>


<div class="dd-menu-item link"><a href="#">Item Four</a></div>

</div>

<div id="submenu-one" class="dd-menu-items submenu">


<div class="dd-menu-item link"><a href="#">Sub Menu Item One</a></div>


<div class="dd-menu-item link"><a href="#">Sub Menu Item Two</a></div>


<div class="dd-menu-item link"><a href="#">Sub Menu Item Three</a></div>

</div>
</div>

Cargue los archivos de JavaScript en la parte inferior de la Página Web.

<script src="dd-menu.js"></script>
<script src="dd-menu-items.js"></script>

Inicializar el menú del cajón deslizante.

(function() {

var mainMenu = getDDMenu(document.querySelector('#dd-menu'), {


effect: 'slideFromLeft' // or slideFromRight

});


var mainMenuItems = new DDMenuItems(mainMenu);
})();