El siguiente código es una imagen reducida que al darle clic despliega un formulario del lado izquierdo de la imagen. El problema es que ahora necesito ubicar este sidebar del lado derecho de la pagina (el formulario e imagen están ubicados a la izquierda). Lo he intentado hacer con la propiedad right pero solo me mueve la imagen mientras que el formulario se queda estático en el lado izquierdo por lo que no se podría hacer para ubicarlo del lado derecho del todo.
Ademas también esta el hecho de que el left:-200 por lo que supongo que se tendría que cambiar al contrario para que el formulario ahora se despliegue del lado derecho y no del izquierdo como antes, aunque esto es suposición mía yo lo único que necesito es ubicarlos al lado derecho.
Les agradezco su ayuda, en caso de que el código no sea muy funcional para lo que pido agradecería que me ayudaran o me dieran indicaciones de como hacerlo!
const imgToggle = document.querySelector('.toggle-img');
imgToggle.addEventListener('click', function() {
document.getElementById('sidebar').classList.toggle('active');
})
* {
margin: 0px;
padding: 0px;
}
#sidebar {
position: fixed;
width: 200px;
height: 60%;
background: white;
color: rgb(225, 49, 49);
left: -200px;
transition: all 500ms linear;
}
#sidebar.active {
left: 0px;
}
#sidebar section {
color: rgb(225, 49, 49);
text-align: center;
padding: 15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, .3);
}
#sidebar .toggle-img {
position: absolute;
left: 200px;
top: 20px;
cursor: pointer;
}
#sidebar .toggle-img span {
display: block;
width: 90px;
text-align: center;
font-size: 60px;
}
<div id="sidebar">
<div class="toggle-img">
<span><img src="img/floating.svg" class="image" alt="imagen"></span>
</div>
<section>
<h4>SOLICITA TU COTIZACION</h4>
<p>DEJANOS TUS DATOS</p>
<h4>TE CONTACTAREMOS EN POCO TIEMPO</h4>
<form action="/my-handling-form-page" method="post">
<ul>
<li>
<label for="nombre">Nombre:</label>
<input type="text" id="name" name="name" />
</li>
<li>
<label for="email">Correo:</label>
<input type="email" id="mail" name="mail" />
</li>
<li>
<label for="domicilio">Domicilio</label>
<input type="text" id="dir" name="dir" />
</li>
<li>
<label for="telefono">Teléfono</label>
<input type="tel" id="tel" name="tel" />
</li>
<li>
<p> <button type="submit">Enviar</button> </p>
</li>
</ul>
</form>
</section>
</div>
toggle-img
adentrosidebar
?