AngularJS Slide Menu Example

HTML

<div ng-app="">
    <a href="#" ng-click="vis = !vis">Toggle</a><br/>
    <ul ng-show="vis" ng-animate="{show: 'menu-show', hide: 'menu-hide'}">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<style>
.menu-show, .menu-hide {
  transition:all 0.5s ease-out;
  overflow:hidden
}

.menu-show {
  height:0;
}
.menu-show.menu-show-active {
  height:200px;
  border: 1px solid red;
}

.menu-hide {
  height:200px;
}
.menu-hide.menu-hide-active {
  height:0;
}