Simple And Clean Fixed Right Side Sliding Panel Using Pure JS and CSS3

Do you want a clean, responsive and simple sliding widget that will slide from the right side of the screen with fixed position event whole screen is able to scroll behind it in a simple way then here is the minified code with basic syntax to achieve your target in a simple and nice way? Before proceeding just have a look at the demo. It is fully responsive and made with pure Vanilla JavaScript and CSS3.

There are many code snippets available online or on many other blogs and websites but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out the code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1. Light Weight.
2. Pure Vanilla JavaScript.
3. Cross Browser.
4. No External Files.
5. Fully Customizable.
6. Single Line Function.

How To Use Simple And Clean Fixed Right Side Sliding Panel Using Pure JS and CSS3?

There are a few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.

JavaScript:

<script type="text/javascript">
/* ------------------------------------------------------ */
/* Fixed Right Side Sliding Pane
/* Pure Vanilla JavaScript and CSS3
/* Created By: Muhammad Hassan
/* Created On: 10 Jan 2022
/* ------------------------------------------------------ */
function toggleHassanSlidingPanel(incomingMainDIV) {
//var x = document.getElementById(incomingMainDIV).querySelector(".slidingPanelContainer").innerHTML = "Hello World!";
if(document.getElementById(incomingMainDIV).style.marginRight == "-25%"){
document.getElementById(incomingMainDIV).style.marginRight = "0%";
document.getElementById(incomingMainDIV).querySelector(".slidingPanelButton .slidingPanelButton_Symbol").innerHTML = "&#x2716;";
} else {
document.getElementById(incomingMainDIV).style.marginRight = "-25%";
document.getElementById(incomingMainDIV).querySelector(".slidingPanelButton .slidingPanelButton_Symbol").innerHTML = "&#x271A;";
}
}
</script>

CSS:

<style type="text/css">
/* ------------------------------------------------------ */
/* Fixed Right Side Sliding Pane
/* Pure Vanilla JavaScript and CSS3
/* Created By: Muhammad Hassan
/* Created On: 10 Jan 2022
/* ------------------------------------------------------ */
.hassan_slidingPanelMain {position:fixed;width:25%;height:100%;top:0;right:0;background:rgba(0, 0, 0, 0.8);color:#ffffff;transition:margin-right .5s;}
.hassan_slidingPanelMain .slidingPanelButton {position:absolute;top:200px;left:-23px;transform-origin:0 0;transform:rotate(270deg);top:250px;left:-50px;height:50px;width:170px;background:rgba(0, 0, 0, 0.8);border:0;border-radius:10px 10px 0 0;color:#fff;line-height:50px;padding:0;font-size:15px;text-align:center;cursor:pointer;}
.hassan_slidingPanelMain .slidingPanelContainer {position:fixed;transition-duration:0.2s, 0.2s, 0.35s;transition-timing-function:linear, linear, ease;-webkit-overflow-scrolling:touch;}
.hassan_slidingPanelMain .slidingPanelContainer_Data {padding:20px;overflow-y:scroll;overflow-x:auto;height:100vh;}
.hassan_slidingPanelMain .slidingPanelContainer_Data::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);border-radius:10px;background-color:#4b4b4b;}
.hassan_slidingPanelMain .slidingPanelContainer_Data::-webkit-scrollbar {width:6px;background-color:#4b4b4b;}
.hassan_slidingPanelMain .slidingPanelContainer_Data::-webkit-scrollbar-thumb {border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#8d8d8d;}
</style>

HTML:

<!-- Fixed Right Side Sliding Pane by Muhammad Hassan -->
<div id="hassan_slidingPanelMain" class="hassan_slidingPanelMain">
<button class="slidingPanelButton" title="Add New Job" onclick="toggleHassanSlidingPanel('hassan_slidingPanelMain')">
<span class="slidingPanelButton_Symbol">&#x2716;</span> &nbsp;
Add New Job
</button>
<div class="slidingPanelContainer">
<div class="slidingPanelContainer_Data">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non orci et tortor varius luctus non suscipit dui. Maecenas ante sapien, luctus ut ullamcorper in, ultricies a augue. Ut rutrum orci et diam ullamcorper fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet aliquam nunc. Donec a libero ut lectus volutpat tincidunt. Sed at velit dignissim, blandit ex quis, volutpat metus. Pellentesque est libero, ultrices sit amet felis ac, vulputate cursus augue. Vivamus in lorem dui. Sed velit sem, interdum et efficitur at, vestibulum eu nisl. Nullam pulvinar, augue id aliquam maximus, urna magna mollis ante, vel venenatis lectus diam sed erat. Nulla cursus congue blandit. Nunc laoreet id odio nec vehicula. Vestibulum erat justo, iaculis sit amet purus ac, efficitur finibus mauris.</p>
</div>
</div>
</div>
<!-- Fixed Right Side Sliding Pane by Muhammad Hassan -->

Customization:

No need to customize it. Just copy-paste. Rest edit the code as per comments and need.

Troubleshooting the Errors:

Do it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.

Final Words:

That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us If you have any doubts and problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave.