Vainilla JavaScript cajón de navegación
| Autor: | techa1008 |
|---|---|
| Views Total: | 1,880 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 1, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Se trata de una implementación de JavaScript vainilla del cajón deslizante fuera de lienzo para la navegación del sitio.
Funcionamiento
Cargue los siguientes archivos JS y CSS en su página web.
<link rel="stylesheet" href="vanilla_drawer.css"> <script src="vanilla_drawer.js"></script>
Crear la navegación del cajón:
<div id="drawer_menu"> <ul id="drawer_menu_inner"> <li><a href="javascript: void(0);">Menu Item</a></li> <li><a href="javascript: void(0);">Menu Item</a></li> <li><a href="javascript: void(0);">Menu Item</a></li> ... </ul> </div>
Cree un botón para alternar la navegación del cajón.
<div id="drawer_btn"> <a href="javascript: void(0);" onclick="vanilla_drawer.drawer_menu_open();"></a> </div>
Cree otro botón para cerrar la navegación del cajón.
<div id="drawer_wall" onclick="vanilla_drawer.drawer_menu_close();"></div>
Envolver el contenido principal en el contenedor "drawer_content".
<div id="drawer_content"> Main content here </div>
