Off Canvas Menu

Posted By : Gaurav Arora | 31-Mar-2016

First of all we will start by adding a HTML structure which is as code below:

And after that we will include our css for the off canvas menu

body{transition: background-color 0.5s;
}    
.sidebar{width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #f8fafa;
    overflow-x: hidden;
    transition: 0.5s;
}
.sidebar ul{margin: 0;
    padding: 0;
}    
.sidebar ul li{color: #000;
    font-size: 16px;
    padding: 20px;
    border-bottom: 1px solid #ccc;
    display: block;
}
button {
    background: #ccc;
    color: #000;
    border: 0px;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
}
.container{transition: 0.5s;
}

And at the last not least we will include our Javascript functions with the help of which I'm showing menu on click of openNav() and closing it on the click of closeNav() function.

function openNav(){
    document.getElementById("sidebar").style.width = "250px";
    document.getElementById("container").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0, 0, 0, .5)";
};
    
function closeNav(){
    document.getElementById("sidebar").style.width = "0px";
    document.getElementById("container").style.marginLeft = "0px";
    document.body.style.backgroundColor = "rgba(255, 255, 255, 1)";
};

Hope, you will find the above article useful.

THANKS