Así que tengo un div (actualmente vacío) con solo el "menú" de identificación. Le di algo de CSS:
#menu { height:70%; width:0; position:fixed; z-index:1; top:0; left:50%; background-color:white; overflow-x:hidden; transition:0.2s; padding-top:70px; }inspirado casi por completo en la barra lateral de W3S. También tengo otro div con onclick="openMenu()" y la función en sí es
document.getElementById("menu").style.width = "250px";Entonces, el problema es que, a pesar de funcionar, el menú (actualmente en blanco) se abre de izquierda a derecha y no de derecha a izquierda o incluso del medio a los extremos. ¿Es este un comportamiento predeterminado o un problema en mi código? Y para arreglarlo, ¿necesito usar CSS antes y después o...?
editar: me doy cuenta de que la transición: 0.2s es probablemente el culpable, pero aún me gustaría dejarlo allí
edit2: debo aclarar que mi objetivo es tener una barra lateral abierta en el medio de la pantalla al hacer clic en un div. Por lo tanto, debería ser invisible al inicio y luego abrirse (agregando ancho) con un clic, de ahí el JS. Mi problema, por supuesto, es que preferiría que el menú pasara de la nada a algo abriéndose en ambos sentidos (en lugar de de izquierda a derecha) desde el centro de la pantalla o simplemente haciendo que se desvanezca a la inversa.
Este fragmento muestra un enfoque muy simple que puede tomar para lo que busca
En lugar de usar JS para controlar las propiedades CSS individuales, a menudo es mejor usar clases que puede alternar a través de JS
document.getElementById("toggle-menu").onclick = function(){ document.getElementById("menu").classList.toggle("active") } html, body { height: 100%; } #menu { display:none; position:fixed; background:#f57777; border-radius:4px; left:0; right:0; width:250px; height:250px; margin:auto; box-shadow: 0 0 12px #aaa; } #menu.active { display:block; } #toggle-menu { background: #fafafa; border:1px solid #eee; border-radius:4px; cursor:pointer; padding: 4px; display:inline-block; } <div id="toggle-menu">Toggle Menu</div> <div id="menu"> Your content in here </div>Si coloca el menú en el centro según sea necesario y lo cubre con dos 'cortinas', una a la izquierda y otra a la derecha, puede reducirlas a 0 de ancho para mostrar el menú desde el centro hacia afuera.
Este fragmento hace esto introduciendo pseudoelementos antes y después que tienen el mismo color de fondo que el entorno (blanco en este caso) con un ancho del 50% del ancho del menú y antes anclados a la izquierda y después a la derecha.
#menu { height: 70%; position: fixed; z-index: 1; top: 0; left: 50%; transform: translateX(-50%); background-color: white; overflow-x: hidden; padding-top: 70px; text-align: center; } #menu::before, #menu::after { content: ''; background: white; width: 50%; height: 100%; top: 0; position: absolute; transition: width .2s linear; display: inline-block; z-index: 1; } #menu::before { left: 0; } #menu::after { right: 0; } #menu.expand::before, #menu.expand::after { width: 0; } <button onclick="document.querySelector('#menu').classList.toggle('expand')">CLICK ME</button> <div id="menu"> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> <div>Item</div> </div>