i'm trying build clickable drop-down menu. i'm using own build angularjs directive make drop-down work loading menu items dynamically.
i've come far way, have 1 little problem.. can't find css(3) way make animation dropping down ul
's.
what have:
the code dropdown function:
private createdirective(): { return { restirct: 'e', scope: { dataset: '=' }, templateurl: 'app/templates/leftbar/index.html', controller: function ($scope) { $scope.select = select; var selecteditem; function select(menuitem: any): { if (selecteditem != null) { selecteditem.selected = false; } if (menuitem.open) { menuitem.selected = true; menuitem.open = false; return; } if (menuitem.childs && menuitem.childs.length > 0) { menuitem.open = true; } menuitem.selected = true; selecteditem = menuitem; } } } }
does maybe know replacement of jquery's slidetoggle
or way use jquery's slidetoggle
in directive?
thanks in advance!
you can plain css + angular provide ng-class toggling.
css
.container { width: 50px; // widget width overflow: hidden; } .content { margin-top: 0; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease; } .container.collapsed .content { margin-top: -100%; }
html
<ul> <li class="container" ng-class="{'collapsed':!item.open}"> <ul class="content"> <li>...</li> ... </ul> </li> ... </ul>
basically hides ul behind parent li. setting negative margin driving ul away parent block reducing size of parent automatically.
Comments
Post a Comment