Collapsible SideBar, in 10 lines of javascript;

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

Have the frost glass effect on your website. See How?

Areeb ur Rub ・ May 20 '21

#css #webdev #showdev #tutorial