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.

CodePudding user response：

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 >
  <div ></div>
  <div ></div>
</div>