DEV Community

loading...

Collapsible SideBar, in 10 lines of javascript;

Areeb ur Rub
18 | coding since 2016 | Arduino | Python | JavaScript | HTML/CSS | Love learn making things
Updated on ・1 min read

Buy Me A Coffee

Some websites use Sidebar in place of Navbar to make the user navigate through there site.

To make this what we can do is, create a div with id sidebar and fix it position on the page then set a height of full page and a width as per need the set top:0 and left: -(the width) if you are adding some border the reduce then add it also to the width;

now create two buttons with id close and open, we can also do it with one button but with two button it will be easier. Fix the position of Buttons also.

Now using javascript get the buttons and sidebar, use .onclick to check the click on both button and change the sidebar.style.left to make the sidbar come in and out.

I have used a frost glass effect in the sidebar background have a look at it

Discussion (0)