0
241
ViewsShow/hide floating div by click on right side of the screen
I need to make a floating div that appears to be almost hidden and if I click in the tab it appears to the left. Floating over the rest of the site. I don't know if I made myself clear, so I put here two images, how it should look hidden and visible. But I couldn't figure it out yet how to make it. Any help will be appreciated.
I work with VueJS.
·
Juan Pablo Isaza
1 answers
Answer question0
This is a vanilla js implementation that uses fixed position, the css transition property for animation, and a class that is toggled when the handle is clicked to change the position.
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