Left Side Responsive Navbar

Required Dependencises

font awesome

Jquery

html

<!DOCTYPE html>
<html>
<head>
<title>Left Side Responsive Navbar</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="side-nav ">
  <div class="toggle-nav">
    <i class="fa fa-bars"></i>
  </div>
  <div class="logo">
    <img src="logo.png" alt="" class="img-responsive">
  </div>
  <div class="links pd15">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Services</a></li>
      <li><a href="#">Products <i class="fa fa-angle-down" aria-hidden="true"></i></a>
        <ul>
          <li><a href="#">option1</a></li>
          <li><a href="#">option2</a></li>
          <li><a href="#">option3</a></li>
        </ul>
      </li>

      <li><a href="">contact Us</a></li>
    </ul>
  </div>
</div>
</body>
</html>

css

<style>

*{margin: 0; padding:0;}
.side-nav{
  position: fixed;
  height: 100vh;
  background: #000;
  top: 0;
  width:250px;
  box-shadow: 0px 0px 10px #000;
  transition:0.3s;
  margin-left: -250px;
}
.toggle-side-nav{margin-left:0px; transition: 0.3s;}
.links ul li{    list-style: none;
    padding: 5px 0px;
    font-size: 15px;
    border-bottom: 1px solid #777;}
.links ul li a{text-decoration:none; color:#ccc; display: block;font-family:sans-serif;}
.links ul li ul{display: none;}
.links ul li ul li{    border-bottom: 1px solid #3b3b3b;}
.links ul li ul li:last-child{border:none;}
.links ul li a i{    float: right;}
.pd15{padding:15px;}
.toggle-nav{
    background: #000;
    position: absolute;
    right: 0;
    top: 25px;
    margin-right: -80px;
    padding: 10px 15px;
    cursor:pointer;
  }
.toggle-nav i{font-size:30px; color:#ddd;}
.logo{
  position:relative;
  height: 150px;
  background-color:#484848;
}
.logo img{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:190px;

}

</style>

Javascript

<script>

$(document).ready(function(){
  $('.toggle-nav').click(function(){
    $('.side-nav').toggleClass("toggle-side-nav");
  });

  $('.links ul li a').click(function(){
    $(this).next('ul').slideToggle(400);
  });
});
</script>