Estoy tratando de crear una barra lateral animada. Inicialmente tengo una barra de navegación superior, una barra lateral y un div de contenido. Los divs de barra lateral y contenido están dentro de un div de contenedor que tiene la propiedad de mostrar fila flexible. Estoy confundido acerca de la transición. Quiero que la barra lateral se muestre y se oculte cuando se haga clic en Inicio de navegación, lo que tiene un efecto deslizante. En este momento tengo una barra lateral deslizante, pero el div de contenido no obtiene el ancho completo de su padre cuando se oculta la barra lateral. ¿Cómo puedo hacer esto? ¿Debo aplicar la transición en flex o en transform? Cualquier ayuda es apreciada.
<body> <nav> <ul> <li><button id="home">Home</button></li> <li><button>Services</button></li> <li><button>Operations</button></li> <li><button>About</button></li> <li><button>Contact</button></li> </ul> </nav> <div class="container"> <div id="sidebar" class="sidebar visible"> <ul> <li><button>Inventories</button></li> <li><button>Employees</button></li> <li><button>Feedback</button></li> <li><button>Projects</button></li> </ul> </div> <div class="content" id="content"> LOrem issum dolor sit amet </div> </div> </body> nav{ width: 100%; display: flex; justify-content : center; } .container{ display: flex; flex-direction: row; } .sidebar{ flex:1; background-color: rgb(40,100,250); height: 100vh; transition: transform 0.5s linear; transform: translatex(-100%); } .visible{ transform: translatex(0); flex: 1; } .content{ background-color: rgb(33,31,31); flex: 5; text-align: center; color: #fff; transition: flex 0.5s ease-in-out; } .afterContent{ flex: 10; } const homeButton = document.getElementById("home"); const sidebarDiv = document.getElementById("sidebar"); const content = document.getElementById("content"); homeButton.addEventListener("click", () => { if (sidebarDiv.classList.contains("visible")) { sidebarDiv.classList.remove("visible"); if(!content.classList.contains("afterContent")){ content.classList.add("afterContent"); } } else { sidebarDiv.classList.add("visible"); if(content.classList.contains("afterContent")){ content.classList.remove("afterContent"); } } });El problema es que solo transforma el elemento, la transformación no cambiará la estructura del diseño, solo afecta el elemento al que aplica la transformación y todos sus elementos secundarios.
Por lo general, para lograr el resultado que desea relleno y posición: absoluto.
Tienes tu elemento de la barra lateral, que es la position: absolute; top: 0; bottom: 0; left: 0; . Para ocultarlo, simplemente transfórmelo a la izquierda. Y luego tienes tu elemento de contenido que compensa el menú con padding-left.
Aquí hay una demostración simple:
<html> <head> <style> html, body {margin: 0; padding: 0} .header { width: 100%; height: 100px; background-color: red; } .body { position: relative; } .sidebar { position: absolute; background-color: blue; top: 0; bottom: 0; left: 0; width: 300px; transition: transform 0.2s; } .content { padding-left: 300px; min-height: 500px; background-color: teal; transition: padding-left 0.2s; } .menu-closed > .sidebar { transform: translateX(-300px); } .menu-closed > .content { padding-left: 0px; } </style> </head> <body> <div class="header">header menu</div> <div id="body" class="body"> <nav class="sidebar">sidebar menu</nav> <div class="content"><button onclick="menu()">nav</button> content</div> <div> <script> const body = document.getElementById("body"); let menuClosed = false; function menu() { menuClosed ? body.classList.remove("menu-closed") : body.classList.add("menu-closed"); menuClosed = !menuClosed; } </script> </body> </html>