Sliding drawer (right-to-left)

Templates

author small image Siva Kishore G
Posted : 11 Dec 2021
Modified : 06 Jun 2022
Beginner Developers

Slider (Right-to-left)

In this example, you will see a drawer opening from the right and occupying 40% of the width of the screen and for left-to-right drawers, set left:0 instead of right:0 for #drawer code.

View Code 
<div id="drawer" class="p-4">
  <h4 class="p-3">Drawer</h4>
  <div id="closeBtn">
    <img src="https://htmljstemplates.com/static_files/svgs/x.svg" height="32" onclick="toggleDrawer()"></i>
  </div>
  <div>
  </div>
</div>
<button class="btn btn-sm btn-outline-info" onclick="toggleDrawer()">Open Drawer</button>
#drawer {
  display:none;
  box-shadow: 2px -8px 12px rgba(0,0,0,0.4);
  position:fixed;
  right:0;
  top:0;
  height:100vh;
  overflow:auto;
  border-left:1px solid #eaeaea;
  background:#fff;
  min-width:320px;
  width:40%;
  z-index:999999;
}
#closeBtn {
  cursor:pointer;
  font-size:24px;
  float:right;
  margin-right:12px;
  margin-top:-60px;
}
function toggleDrawer(){
  $('#drawer').toggle("slide")
}

Drawer


Post a comment

I promise, I keep it clean *

Comments

Alert SVG Cookie Consent

This website uses cookies and similar technologies, to enhance your browsing experience and provide personalized recommendations. By continuing to use our website, you agree to our Privacy policy.