/* Style page content - use this if you want to push the page content to
the right when you open the side navigation */#main { transition: margin-left .5s;
padding: 20px;}

/* On smaller screens, where height is less than
450px, change the style of the sidenav (less padding and a smaller font
size) */@media screen and (max-height: 450px) { .sidenav
{padding-top: 15px;} .sidenav a {font-size: 18px;}
}

Step 3) Add JavaScript:

The example below slides in the side navigation, and makes it 250px wide:

Sidenav Overlay Example

/* Set
the width of the side navigation to 250px */function
openNav() { document.getElementById("mySidenav").style.width
= "250px";}

/*
Set the width of the side navigation to 0 */function closeNav() {
document.getElementById("mySidenav").style.width = "0";}

The example below slides in the side navigation, and pushes the page content
to the right (the value used to set the width of the sidenav is also used to set
the left margin of the "page content"):

Sidenav Push Content

/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px */function
openNav() { document.getElementById("mySidenav").style.width
= "250px"; document.getElementById("main").style.marginLeft
= "250px";}

/* Set the width of the side navigation to 0 and the
left margin of the page content to 0 */function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";}

The example below also slides in the side navigation, and pushes the page
content to the right, only this time, we add a black background color with a 40%
opacity to the body element, to "highlight" the side navigation:

Sidenav Push Content w/ opacity

/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px and add a black background color to body */function
openNav() { document.getElementById("mySidenav").style.width
= "250px"; document.getElementById("main").style.marginLeft
= "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";}

/* Set the width of the side navigation to 0 and the
left margin of the page content to 0, and the background color of body to
white */function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";}