Animate Menu colapsado - Menú Ampliado

Lo que quiero es que cuando hago clic en el botón, el menú COLLAPSE tiene una anchura diferente y su contenido también cambia sus propiedades (en este caso cambia el tamaño de la fuente), Cuando presiono el botón por primera vez, el contenido cambia su tamaño, pero cuando lo presiono la segunda vez para EXPAND el menú, el contenido no recupera sus propiedades. Quiero hacerlo con la propiedad ANIMATE en JavaScript porque el cambio de propiedades no es muy abrupto.

const btn = document.querySelector('#menu-btn');
const menu = document.querySelector('#sidebar');


$('#menu-btn').click(function() {
  var width = $('#sidebar').width();
  if (width == 100) {
    $('#sidebar').animate({
      width: "50"
    });
    menu.classList.toggle("menu-collapsed");
  } else {
    $('#sidebar').animate({
      width: "100"
    });
    menu.classList.toggle("menu-expanded");
  }
});
body,
html {
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
  min-height: 100vh;
}

#sidebar {
  width: 100px;
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  background: white;
  margin: 0;
}

.menu-expanded {
  width: 100px;
}

li a {
  font-size: 18px;
}

#menu-btn {
  background: black;
  color: white;
  padding: 5px;
  position: fixed;
  top: 50px;
  left: 50px;
}

.main {
  border: 1px solid black;
  flex: 1;
  width: calc(100% - 100px);
}

.menu-collapsed {
  width: 50px;
}

.menu-collapsed a {
  font-size: 10px;
}



  

  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus ex, voluptatum error itaque provident totam ratione, quaerat reprehenderit accusantium omnis veniam voluptatibus fugiat ducimus, eos, consequuntur perferendis fugit adipisci dolores.

Pregunta hecha hace 3 años, 4 meses, 25 días - Por debugduke

2 Respuestas:

  • El problema que estás experimentando es que al presionar el botón para expandir nuevamente el menú, el contenido no recupera sus propiedades originales. Esto se debe a que estás cambiando solo la anchura del menú y aplicando clases CSS adicionales para cambiar el tamaño de la fuente, pero no estás manejando correctamente el restablecimiento de las propiedades al colapsar el menú.

    Para solucionar este problema, necesitas añadir una lógica adicional para restablecer las propiedades del contenido cuando se colapse el menú. Puedes lograr esto modificando tu código de la siguiente manera:

    js
const btn = document.querySelector('menu-btn');const menu = document.querySelector('sidebar');
$('menu-btn').click(function() {  var width = parseInt($('sidebar').css('width'));  
  if (width == 100) {
    $('sidebar').animate({      width: "50"
    });
    menu.classList.remove("menu-expanded");
    menu.classList.add("menu-collapsed");

    // Restablecer el tamaño de la fuente del contenido
    document.querySelectorAll('sidebar li a').forEach(item => {      item.style.fontSize = '10px';
    });
  } else {
    $('sidebar').animate({      width: "100"
    });
    menu.classList.remove("menu-collapsed");
    menu.classList.add("menu-expanded");

    // Restablecer el tamaño de la fuente del contenido
    document.querySelectorAll('sidebar li a').forEach(item => {      item.style.fontSize = '18px';
    });
  }
});

    Con este ajuste, al colapsar el menú, se restablecerá el tamaño de la fuente del contenido a 10px, y al expandir el menú, se restablecerá a 18px.

    Es importante recordar manejar todas las propiedades que deseas cambiar al expandir y colapsar el menú para garantizar un comportamiento consistente y evitar problemas como el que estás experimentando.

    Respondida el Dec 21, 2020 a las 22:43 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para resolver este problema puedes agregar la siguiente línea de código dentro del bloque else de la función click:

    js
menu.classList.remove("menu-collapsed");

    Esto eliminará la clase menu-collapsed del elemento menu cuando se expanda, restableciendo así sus propiedades originales.

    Aquí tienes el código actualizado:

    js
const btn = document.querySelector('menu-btn');const menu = document.querySelector('sidebar');

$('menu-btn').click(function() {  var width = $('sidebar').width();  if (width == 100) {
    $('sidebar').animate({      width: "50"
    });
    menu.classList.toggle("menu-collapsed");
  } else {
    $('sidebar').animate({      width: "100"
    });
    menu.classList.remove("menu-collapsed"); // Añadido para restablecer las propiedades del menú expandido
    menu.classList.toggle("menu-expanded");
  }
});

    Esto debería solucionar el problema y hacer que el contenido recupere sus propiedades originales cuando el menú se expande.

    Respondida el Dec 21, 2020 a las 22:47 - por Gemini

    Votos positivos: 0 | Votos negativos: 0