trato de cambiar css pero no funciona para el texto el texto corto está bien pero tengo que poner un párrafo largo cuando hago clic en él no es suave mientras funciona la transición uso la plantilla de w3school, quiero que el texto se muestre suave como un botón o texto corto por favor avíseme Debería usarlo para recordar la próxima vez que pueda ayudar en la comunidad si veo a alguien preguntar como yo, gracias.
/* Set the width of the side navigation to 250px */ function openNav() { document.getElementById("mySidenav").style.width = "400px"; } /* Set the width of the side navigation to 0 */ function closeNav() { document.getElementById("mySidenav").style.width = "0"; } /* The side navigation menu */ .sidenav { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; left: 0; background-color: #111; /* Black*/ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ } /* The navigation menu links */ .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; font-family: Gotham; color: #818181; display: block; transition: 0.3s } /* When you mouse over the navigation links, change their color */ .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left .5s; padding: 20px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } <body bgcolor="#E6E6FA"> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <p style=color:white>TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p> </div> <span onclick="openNav()"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" width="40px" style="padding-top: 40px; padding-left: 40px;"></span> <div id="main"> </div>toggleNavwidth . Usa transform: translateX(-100%) para ocultar la navegación y translateX(0%) para mostrar (abrir).on* atributos JS y atributos de style const toggleNav = () => { document.querySelector("#mySidenav").classList.toggle("is-open"); }; document.querySelectorAll(".toggleNav").forEach(el => { el.addEventListener("click", toggleNav) }); /* QuickReset */ * {margin:0; box-sizing: border-box;} #mySidenav { position: relative; overflow-x: hidden; width: calc(100vw - 200px); /* try not to use fixed px */ height: 100vh; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; color: #fff; padding: 60px; transition: 0.5s; transform: translateX(-100%); /* hide it by minus own width */ } #mySidenav.is-open { transform: translateX(0%); /* show it */ } .toggleNav { background: none; border: none; font-family: Gotham; font-size: 2rem; padding: 1rem 1.3rem; cursor: pointer; } .toggleNav:hover { color: #999; } #mySidenav .toggleNav { color: #777; top: 0; right: 0; position: absolute; } <div id="mySidenav"> <button type="button" class="toggleNav">✕</button> <p> TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST </p> </div> <button type="button" class="toggleNav">☰</button> <div id="main"></div>Si no lo he entendido mal, desea que la posición de la palabra del texto no cambie, luego escriba el siguiente código:
<p id="sidenavText">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>Establecer ancho en el texto también
var sidenavWidth = 400; document.querySelector("#sidenavText").style.width = sidenavWidth + "px"; function openNav() { document.getElementById("mySidenav").style.width = sidenavWidth + "px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } var sidenavWidth = 400; document.querySelector("#sidenavText").style.width = sidenavWidth + "px"; function openNav() { document.getElementById("mySidenav").style.width = sidenavWidth + "px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } .sidenav { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; left: 0; background-color: #111; /* Black*/ overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 60px; /* Place content 60px from the top */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ } /* The navigation menu links */ .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; font-family: Gotham; color: #818181; display: block; transition: 0.3s } /* When you mouse over the navigation links, change their color */ .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ #main { transition: margin-left .5s; padding: 20px; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } <body bgcolor="#E6E6FA"> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <p id="sidenavText" style="color:white">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p> </div> <span onclick="openNav()"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" width="40px" style="padding-top: 40px; padding-left: 40px;"></span> <div id="main"> </div>