Show menu with ng-click + ng-class

Question

I am trying to make a side menu that appears when the user clicks a button, using a class . is-Visible

<button ng-click="visible=!visible;">Click me to open the menu!</button>
<div ng-class="{'is-visible':visible}" class="menu">
 <a>Menu</a>
</div>

It works but the effect is applied only in the div, the elements within the div (in case the Menu does not change, can someone give me a light how to apply the same effect on everything within the div? In case it’s not clear I leave the codepen below with what I did:

http://codepen.io/haykou/pen/ichzI

Answer 1

Just include overflow: hidden on your menu. It initially has zero width, but the content leaks and is always visible. Your class menu then it would look like this:

.menu{
  width:0px;
  height:400px;
  background-color:#ccc;
  position:fixed;
  left:0;
  border: none;
  -webkit-transition: width 0.5s ease-in-out;
  -moz-transition: width 0.5s ease-in-out;
  -o-transition: width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
  overflow: hidden;
}

^{http://codepen.io/anon/pen/kgKeG}