Menú de la barra lateral plegable con JavaScript puro
| Autor: | StanleySathler |
|---|---|
| Views Total: | 1,734 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 21, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Un concepto elegante del menú de la barra lateral plegable que muestra una barra lateral de navegación mientras empuja y amplía la sección de contenido principal al alternar. Construido usando JavaScript puro y CSS.
Funcionamiento
Crea el menú de la barra lateral.
<nav class="sth-menu" id="menu-panel"> <div class="picture"> <img src="your-logo.png"> </div> <ul> <li><a href="#">Menu #1</a></li> <li><a href="#">Menu #2</a></li> <li><a href="#">Menu #3</a></li> </ul> </nav>
Agregue el botón de alternancia de menú a su contenido principal.
<main class="sth-container" id="page-content"> <section class="sth-appbar"> <div class="menu" id="menu-button"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> </section> <section class="sth-content"> Main Content Here </section> </main>
Agregue el JavaScript principal y la hoja de estilos a la Página Web. Hecho.
<link rel="stylesheet" href="dist/css/app.css"> <script src="dist/js/app.js"></script>
