How to create a sliding menu bar
In this tutorial, I will show you how to create a sliding left panel easily using css and javascript only.
<div class="container">
<div class="slider open">Left Panel</div>
<button class="toggle-button" onclick="toggleSlider()">< Close</button>
</div>
<script>
function toggleSlider () {
var slider = document.querySelector('.slider')
var buttonSlider = document.querySelector('.toggle-button')
if (!slider.classList.contains('open')){
slider.classList.add('open')
buttonSlider.innerHTML = '< Close'
} else {
slider.classList.remove('open')
buttonSlider.innerHTML = '> Open'
}
}
</script>
<style>
.container{
position: relative;
width: 400px;
height: 400px;
background: #145677;
}
.slider{
width: 200px;
height: 400px;
background: #945677;
position: absolute;
transition: transform 0.3s ease, opacity 0.3s ease;
transform: translate3d(-200px, 0 ,0);
will-change: transform;
opacity:0;
}
.open{
transform: translate3d(0, 0 ,0);
opacity: 1;
}
.toggle-button{
opacity:1;
transform: translate3d(250px, 100px, 0);
}
</style>