1

Tengo un menu lateral deslizante, pero lo tengo posicionado en la izquierda y se desliza para la derecha, ya se como hacer para posicionarlo en la derecha pero no se como hacer para que se deslice a la izquierda (para explicar un poco mejor, el menu se abre a la derecha y requiero que abra a la izquierda).

Este es mi código

.sidebar {
        position: fixed;
        height: 100%;
        width: 0;
        top: 0;
        left: 50%;
        background-color: #000000;
        float: right;
        overflow-x: hidden;
        transition: 0.4s;
        padding: 2rem 0;
        box-sizing:border-box;
    
}
<div id="sidebar" class="sidebar">
        <a href="#" class="boton-cerrar" onclick="ocultar()">&times;</a>
    <ul class="menu">
        <li>Opción 1</li>
        <li><a href="#">Opción 2</a></li>
        <li><a href="#">Opción 3</a></li>
        <li><a href="#">Opción 4</a></li>
        <li><a href="#">Opción 5</a></li>
    </ul>
      
    </div>

gracias por su ayuda

1
  • @David081: evita convertir el código a snippet si es que este no es funcional en la pregunta.
    – padaleiana
    Commented el 25 ago. 2022 a las 18:45

1 respuesta 1

3

Para cambiar de lado el menú, basta usar right en ves de left.

Pero realice algunos cambios para que funcione: a la transcripción agregué right; al menú le puse un ancho fijo de width: 200px; y el javascript para el ejemplo.

document.querySelector("button").addEventListener("click", e => {  

document.querySelector(".sidebar").classList.toggle("activo");  

});
.sidebar {
   position: fixed;
   height: 100%;
   width: 200px;
   top: 0;
   right: -100%;
   background-color: #000000;
   overflow-x: hidden;
   transition: right 0.4s;
   padding: 2rem 0;
   box-sizing:border-box;
} 
  
.sidebar.activo {
   right: 0;
}
<button>Menu</button>

<div id="sidebar" class="sidebar">
<a href="#" class="boton-cerrar" onclick="ocultar()">&times;</a>
<ul class="menu">
<li>Opción 1</li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
<li><a href="#">Opción 4</a></li>
<li><a href="#">Opción 5</a></li>
</ul>
  
</div>

2
  • Muchas gracias, muy amable Commented el 25 ago. 2022 a las 19:17
  • Bien @JhonatanPeláez si esto ayuda, sería tan amable de aceptar la respuesta con el ✓ para que sirva a otros también y quedé cerra tu pregunta Commented el 25 ago. 2022 a las 19:19

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.