2

Estoy tratando de crear un efecto toggle, con JS sin jquery pero no sale muy bien, En el css le di display: none y hight:0 al menu que se supone debe desplegarse #modes_menu

En el js le puse si modes_position !== "block" (le puse modes_position == "none", pero no tengo ni idea porque no funciona) por lo que si no se esta mostrando darle un display block y un height auto. Esto lo muestra pero sin efecto toggle.

Ahora al volver a hacer click sobre el botón no se recoge ni pasa nada.

No se como podría hacer para lograr el efecto.

var modes = document.querySelector("#modes_menu");
var mode_btn = document.querySelector("#modes-btn");


mode_btn.addEventListener("click", function(){
  var modes_position = modes.style.position;

  if(modes_position !== "block"){
    modes.style.display="block";
    modes.style.height = "auto";
    modes.style.transition = "1s";
  }else{
    modes.style.height= 0;
    modes.style.display="none";
  }
});
 #modes_menu {
    position: absolute;
    display: none;
    height: 0;
    left: 0;
    top: 50px;
    background: royalblue;
    overflow: hidden;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
    border-radius: 5px;
 }

 #modes_menu ul {
     display: flex;
     flex-direction: column;
     padding: 30px;
     list-style: none;
 }

 #modes_menu ul li{
    padding-bottom: 15px;
 }
<button id="modes-btn">Click me</button>
<nav id="modes_menu">
    <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>
 

3 respuestas 3

7

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.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>

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.

6

Estas obteniendo el valor de la propiedad position y no la de display en tu código javascript y por eso nunca te va a dar correctamente la validación.

var modes = document.querySelector("#modes_menu");
var mode_btn = document.querySelector("#modes-btn");


mode_btn.addEventListener("click", function(){
  var modes_position = modes.style.display;

  if(modes_position !== "block"){
    modes.style.display="block";
    modes.style.height = "auto";
    modes.style.transition = "1s";
  }else{
    modes.style.height= 0;
    modes.style.display="none";
  }
});
3

Creo que esto es lo que buscas, hice algunas modificaciones en tu Javascript y el CSS:

var modes = document.querySelector("#modes_menu");
var mode_btn = document.querySelector("#modes-btn");
var modes_height = modes.clientHeight;
modes.style.height = 0;

mode_btn.addEventListener("click", function(){
  var modes_position = modes.style.opacity;
  
  if(modes_position != 1){
    modes.style.height = `${modes_height}px`;
    modes.style.opacity = 1;
  }else{
    modes.style.height = 0;
    modes.style.opacity = 0;
  }
});
#modes_menu {
    position: absolute;
    opacity: 0; /* En vez de display para crear el efecto de desvanecimiento */
    /* height: 0 */ /* Quitar ya que se necesita saber el tamaño del elemento */
    left: 0;
    top: 50px;
    background: royalblue;
    overflow: hidden;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    transition: height 1s, opacity 1s; /* Transition para la animación */
 }

 #modes_menu ul {
     display: flex;
     flex-direction: column;
     padding: 30px;
     list-style: none;
 }

 #modes_menu ul li{
    padding-bottom: 15px;
 }
<button id="modes-btn">Click me</button>
<nav id="modes_menu">
    <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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.