Creación de un menú de acordeón minimalista con JavaScript
| Autor: | SeanHolden |
|---|---|
| Views Total: | 3,083 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 12, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Un menú de acordeón minimalista con animaciones deslizantes suaves construidas encima de JavaScript, un poco similar al menú de alternancia móvil.
Funcionamiento
Cree el código HTML para el botón de alternancia y los elementos de menú.
<div class="navbar"> <input id="toggle" type="image" src="menu-icon.png" /> </div> <div id="menu"> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Ten</li> </ul> </div>
Incluya los archivos JavaScript requeridos en la página.
<script src="domready-min.js" type="application/javascript"></script> <script type="text/javascript" src="main.js"></script>
Añade algunos estilos al menú de acordeón.
.navbar {
background-color: gray;
padding: 5px;
}
.menuClosed {
display: none;
overflow: hidden;
background-color: gray;
}
.menuOpen {
display: block;
overflow: hidden;
height: 0px;
background-color: gray;
}
ul {
margin: 0;
padding: 0;
}
li {
border-bottom: 2px solid #fff;
color: #fff;
}
