Skip to main content
se añadió 1 carácter en el cuerpo
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30
.modes_menu {
  /* Propiedades CSS */
}

.modes_menu--mostrar {
  /* Propiedades CSS*/
}

.modes_menu--ocultar {
  /* Propiedades CSS*/
}
.modes_menu {
  /* Propiedades CSS */
}

.modes_menu--mostrar {
  /* Propiedades CSS*/
}

.modes_menu--ocultar {
  /* Propiedades CSS*/
}
.modes_menu {
  /* Propiedades CSS */
}

.modes_menu--mostrar {
  /* Propiedades CSS*/
}

.modes_menu--ocultar {
  /* Propiedades CSS*/
}
.modes_menu {
  /* Propiedades CSS */
}

.modes_menu--mostrar {
  /* Propiedades CSS*/
}

.modes_menu--ocultar {
  /* Propiedades CSS*/
}
se eliminaron 18 caracteres en el cuerpo
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30
.modes_menu {
  /* Propiedades CSS */
}

.modes_menu--mostrar {
  /* Propiedades CSS*/
}

.modes_menu--ocultar {
  /* Propiedades CSS*/
}
.modes_menu {
  /* Propiedades CSS */
}

.modes_menu--mostrar {
  /* Propiedades CSS*/
}

.modes_menu--ocultar {
  /* Propiedades CSS*/
}
modes_menu.classList.toggle('nombre_de_la_clase');
modes_menu.classList.toggle('nombre_de_la_clase');
var modes = document.querySelector("#modes_menu");
var mode_btn = document.querySelector("#modes-btn");

mode_btn.addEventListener("click",onclick = () => {
  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>
.modes_menu {
  /* Propiedades CSS */
}

.modes_menu--mostrar {
  /* Propiedades CSS*/
}

.modes_menu--ocultar {
  /* Propiedades CSS*/
}
modes_menu.classList.toggle('nombre_de_la_clase');
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>
.modes_menu {
  /* Propiedades CSS */
}

.modes_menu--mostrar {
  /* Propiedades CSS*/
}

.modes_menu--ocultar {
  /* Propiedades CSS*/
}
modes_menu.classList.toggle('nombre_de_la_clase');
var modes = document.querySelector("#modes_menu");
var mode_btn = document.querySelector("#modes-btn");

mode_btn.onclick = () => {
  modes.classList.toggle("modes_menu--mostrar");
  modes.classList.toggle("modes_menu--ocultar");
}
#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>
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

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.