Appear menu with ng-click + ng-class

Question

Appear menu with ng-click + ng-class

Navigation

#1 by (2 votes)

1

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

<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 only applied to 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 to everything inside the div? Of course I leave the codepen below with what I did:

link

javascript angularjs

asked by anonymous 22.09.2014 / 19:00

1 answer

Display when applying Hover via CSS Determining content to fill UITableView based on a UIButton tag

score 2 · Accepted Answer

Just include overflow: hidden in your menu. It initially has zero width, but the content leaks and is always visible. Your menu class 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;
}

link