html
html
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; } .
How to center a element inside div with css
Centering elements inside div is a common problem in web development. In this post I will explain a very easy solution for this that works always. Before centering Let’s say we have those 2 containers. <div class="container"> <div class="center-element"></div> </div> <style> .container { width: 300px; height: 300px; background: red; } .center-element { width: 200px; height: 200px; background: yellow; } </style> Centering the element The easiest way is to use the flex display that handles the centering in very good way.