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

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

  .menu-show-setup {
    max-height:0;
  }
  .menu-show-setup.menu-show-start {
    max-height:200px;
  }

  .menu-hide-setup {
    max-height:200px;
  }
  .menu-hide-setup.menu-hide-start {
    max-height:0;
  }