0
235
ViewsMostrar/ocultar div flotante haciendo clic en el lado derecho de la pantalla
Necesito hacer un div flotante que parezca estar casi oculto y si hago clic en la pestaña aparece a la izquierda. Flotando sobre el resto del sitio. No se si me quedé claro, así que pongo aquí dos imágenes, como debe quedar oculto y visible. Pero no pude averiguar todavía cómo hacerlo. Cualquier ayuda será apreciada.
Trabajo con VueJS.
·
Juan Pablo Isaza
1 answers
Answer question0
Esta es una implementación de vanilla js que usa una posición fija, la propiedad de transición css para la animación y una clase que se alterna cuando se hace clic en el controlador para cambiar la posición.
const slideout = document.querySelector('.slideout') const handle = slideout.querySelector('.handle') handle.onclick = function() { slideout.classList.toggle('active'); } .slideout { position: fixed; width: 80%; height: 80%; left: 100%; top: 10%; transition: left .3s ease-out; } .slideout.active { left: 10%; } .handle { position: absolute; top: 10px; left: -20px; width: 40px; height: 40px; border-radius: 50%; background: darkred; cursor: pointer; } .body { position: absolute; background: red; width: 100%; height: 100%; border-radius: 8px; } <div class="slideout"> <div class="handle"></div> <div class="body"></div> </div>
·
Juan Pablo Isaza
Report
Answer question