[Vuejs]-Show/hide floating div by click on right side of the screen

by

3👍

✅

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>
👤JasonB

Leave a comment