<div class="" ng-controller="MyCtrl as vm"> <header class="pure-menu-horizontal pure-g"> <div class="dropdown pure-u-1" ng-if="vm.toggleDropdown"> Dropdown Content </div> <div class="toggle pure-menu-heading pure-menu-link pure-u-1" ng-click="vm.toggleDropdown = !vm.toggleDropdown"> Menu </div> </header> </div>
body { overflow-y:hidden; } header { > div { &.dropdown { overflow: hidden; height:50px; -webkit-transition:all ease-out 0.5s; -moz-transition:all ease-out 0.5s; -ms-transition:all ease-out 0.5s; -o-transition:all ease-out 0.5s; transition:all ease-out 0.5s; &.ng-enter, &.ng-leave.ng-leave-active { height:0px; } &.ng-leave, &.ng-enter.ng-enter-active { height:50px; } } &.toggle { text-align:right; background-color:#06b25b; color:#fff; &:hover { cursor:pointer; background-color:#06b25b; } } } } .sample-show-hide { padding:10px; border:1px solid black; background:white; } .sample-show-hide { -webkit-transition:all linear 0.5s; }
var myApp = angular.module('myApp',['ngAnimate']) .controller('MyCtrl', function($scope) { var vm = this; vm.toggleDropdown = false; });