Explicación para el efecto Toggle
En CSS:
Vamos a utilizar la metodología BEM que es el acrónimo Block Element Modifier
. Aunque no es obligatoria, ya que puedes utilizar la que mejor se adapte a tus proyectos, resulta bastante interesante.
Crearemos tres (03) clases o reglas CSS las cuales serían .modes_menu
, .modes_menu--mostrar
y .modes_menu--ocultar
, donde --mostrar
y --ocultar
son los modificadores de la clase principal. Nos quedaría algo parecido a esto:
.modes_menu {
/* Propiedades CSS */
}
.modes_menu--mostrar {
/* Propiedades CSS*/
}
.modes_menu--ocultar {
/* Propiedades CSS*/
}
En JavaScript:
Vamos a llamar al método toggle
de la propiedad classList
del elemento modes_menu
. Nos quedaría así:
modes_menu.classList.toggle('nombre_de_la_clase');
La ventaja de utilizar el método toggle está en colocar el nombre de la clase sin necesidad de utilizar condicionales para intercambiarlas por cada clic que el usuario dé sobre el botón que funcionará como un control toggle. Como a las clases se les pueden definir un conjunto de propiedades, entonces, podremos obtener el comportamiento esperado en función de lo que queramos mostrar al usuario cuando él interactúe con el objeto.
Sin más preámbulos, realicemos las pruebas:
// Elementos que se obtienen
var modes = document.querySelector("#modes_menu");
var mode_btn = document.querySelector("#modes-btn");
// Evento
mode_btn.onclick = () => {
modes.classList.toggle("modes_menu--ocultar");
};
// Puede utilizar addEventListener si lo deseas en lugar de onclick, como por ejemplo:
// mode_btn.addEventListener("click", () => {}, false);
#modes_menu ul {
display: flex;
flex-direction: column;
padding: 30px;
list-style: none;
}
#modes_menu ul li{
padding-bottom: 15px;
}
/* Clases nuevas */
.modes_menu {
position: absolute;
margin-top: 10px;
color: white;
background: royalblue;
overflow: hidden;
box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);
border-radius: 5px;
/* Transformaciones */
transform-origin: left top;
}
.modes_menu--ocultar {
display: none;
}
<button id="modes-btn">Click me</button>
<!-- Observe que hemos implementado dos clases:
«modes_menu» y «modes_menu--ocultar» -->
<nav id="modes_menu" class="modes_menu modes_menu--ocultar">
<ul>
<label for="modes">Seleccione un modo</label>
<li><input type="radio" name="modes-menu" value="light-mode"> Modo light </li>
<li><input type="radio" name="modes-menu" value="green-mode"> Modo verde</li>
<li><input type="radio" name="modes-menu" value="blue-mode"> Modo azul</li>
<li><input type="radio" name="modes-menu" value="normal-mode"> Modo normal</li>
</ul>
</nav>
Se pudo observar que en el caso anterior obtenemos el efecto deseado utilizando:
mode_btn.onclick = () => {
modes_menu.classList.toggle('modes_menu--ocultar');
}
Donde modes_menu
es el menú desplegable y mode_btn
el botón que presionamos para desplegar el primero.
Implementación de animaciones
Podemos modificar ligeramente el código JavaScript:
mode_btn.onclick = () => {
modes_menu.classList.toggle('modes_menu--mostrar');
modes_menu.classList.toggle('modes_menu--ocultar');
}
Y trabajar directamente sobre CSS:
.modes_menu--mostrar {
animation: 300ms ease desplegar 1;
}
@keyframes desplegar {
from {
transform: scaleY(0);
}
}
El resultado final quedaría así:
var modes = document.querySelector("#modes_menu");
var mode_btn = document.querySelector("#modes-btn");
mode_btn.addEventListener("click", ()=> {
modes.classList.toggle("modes_menu--mostrar");
modes.classList.toggle("modes_menu--ocultar");
}, false);
#modes_menu ul {
display: flex;
flex-direction: column;
padding: 30px;
list-style: none;
}
#modes_menu ul li{
padding-bottom: 15px;
}
/* Clases Nuevas, basadas en la metodología BEM */
.modes_menu {
position: absolute;
margin-top: 10px;
color: white;
background: royalblue;
overflow: hidden;
box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);
border-radius: 5px;
/* Transformaciones */
transform-origin: left top;
}
.modes_menu--mostrar {
animation: 300ms ease desplegar 1;
}
.modes_menu--ocultar {
display: none;
}
@keyframes desplegar {
from {
transform: scaleY(0);
}
}
<button id="modes-btn">Click me</button>
<nav id="modes_menu" class="modes_menu modes_menu--ocultar">
<ul>
<label for="modes">Seleccione un modo</label>
<li><input type="radio" name="modes-menu" value="light-mode"> Modo light </li>
<li><input type="radio" name="modes-menu" value="green-mode"> Modo verde</li>
<li><input type="radio" name="modes-menu" value="blue-mode"> Modo azul</li>
<li><input type="radio" name="modes-menu" value="normal-mode"> Modo normal</li>
</ul>
</nav>
Importante: La explicación sugerida en esta respuesta no debe tomarse como una solución definitiva al problema planteado. Siempre existirán mejores soluciones para el mismo problema.