Siva Kishore G
Modified : 06 Jun 2022
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
Comments
Recent Posts
File Sharing Server
Create a local file sharing server with realtime sync feature using Socket IO.
Tailwind Navbars
Most beautiful Navbars designed with tailwind css. Fully responsive templates.
Dashboard UIs
Most beautiful dashboards designed with bootstrap. Inspired from dribble mostly.
HTML Email Tempaltes
Most commonly used HTML email templates. Welcome email, sign up, password reset etc.
Payment Page UI
Checkout our most downloaded payment page ui designed with bootstrap.
Auto Logout Feature
Detect user's inactivity and auto logout after certain timeout.
Parse CSV
Parse and Upload CSV files online using Javascript (PapaParse)
HTML Popups
Keep the user engaged and gain recurring website traffic. Includes templates.
Attract More Users
How to attract more users to your website. A definite guide to webmasters today.
Geolocation
How to get a user's location using Javascript and other techniques available today.
Navbars
A complete guide on HTML navbars and how to select the perfect one for the website.
Google Core Update
Google core update that's released on May 25 2022 will take 1-2 for complete rollout.
Are Clickbaits Ethical?
A process to lure users to click certain links via posting intriguing images/headings.
Cookie Consent