<html ng-app="app">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-animate.js"></script>
  </head>
  <body ng-controller="AppController">
    <div class="sidebar-menu" ng-class="{'menu-closed':closed}">
      <div class="menu-header" >Side menu 
        <a href="#" ng-click="toggleSideMenu($event);"><i class="fa fa-bars" aria-hidden="true"></i></a>
       </div>
      <div class="menu-content">
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
          <li>Option 4</li>
        </ul>
      </div>
    </div>
  </body>
</html>
body{
  margin:0;
  font-family:sans-serif;
}

a, a:hover{
  color:white;
}
.sidebar-menu{
  background-color:#777;
  color:white;
  position:absolute;
  top:0;
  left:0;
  height:100vh;
}

.sidebar-menu .menu-header{
  background-color:#444;
  padding:10px 30px;
}

.sidebar-menu .fa{
  margin-left:20px;
}
ul{
  list-style:none;
}
li{
  padding:10px;
}

/*Angular JS Animation examples by coding-dude.com*/
.menu-closed-add,
.menu-closed-remove{
  transition:all 0.5s;
}

.menu-closed-active,
.menu-closed{
  left:-110px
}
var app = angular.module("app",["ngAnimate"]);

app.controller("AppController",function($scope){
  $scope.toggleSideMenu = function($event){
    $event.preventDefault();
    $scope.closed=!$scope.closed;
  };
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.