3

I'm trying to build a clickable drop-down menu. I'm using my own build AngularJS directive to make the drop-down work as well as loading the menu items dynamically.

I've come a far way, but now I have just one little problem.. I can't find a CSS(3) only way to make an animation for the dropping down ul's.

What I have:

enter image description here

The code for the dropdown function:

private CreateDirective(): any {
        return {
            restirct: 'E',
            scope: {
                dataset: '='
            },
            templateUrl: 'App/Templates/LeftBar/index.html',
            controller: function ($scope) {
                $scope.Select = Select;

                var SelectedItem;

                function Select(MenuItem: any): 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 anyone maybe know a replacement of jQuery's slideToggle or a way to use jQuery's slideToggle in my directive?

Thanks in advance!

5
  • What language is that written in? because that does not seem like javascript...
    – Naftali
    Apr 6, 2016 at 13:59
  • JavaScript combined with TypeScript @Neal
    – peer
    Apr 6, 2016 at 14:00
  • Then put that in the tags....
    – Naftali
    Apr 6, 2016 at 14:00
  • @Neal there we go, I forgot that.. Sorry.
    – peer
    Apr 6, 2016 at 14:01
  • Please stop putting the tag name in the title...
    – Naftali
    Apr 6, 2016 at 14:02

2 Answers 2

0

You can do this with plain CSS + help from angular to provide ng-class toggling.

CSS

.container {
  width: 50px; // your 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 this hides UL behind parent LI. By setting negative margin you are driving UL away from parent block thus reducing the size of parent automatically.

0

You can animate it with just CSS if you animate the max-height:

var button = document.getElementById('nav');
button.onclick = function(e) {
  var target = e.target;
  if (e.target.tagName !== 'SPAN') return;
  target = target.nextSibling.nextSibling;
  if (target.className === 'open') {
    target.className = '';
  } else {
    target.className = 'open';
  }
};
ul {
  display: block;
   transition:all 0.5s ease;
}

ul ul {
  max-height: 0;
  overflow: hidden;
}

ul#nav1.open {
  max-height: 50px;
}
ul#nav2.open {
  max-height: 100px;
}
ul#nav3.open {
  max-height: 150px;
}

ul span {
  cursor: pointer;
}
<ul id="nav">
  <li>
    <span>Title 1</span>
    <ul id="nav1">
      <li>one</li>
      <li>two</li>
    </ul>
  </li>
  <li>
    <span>Title 2</span>
    <ul id="nav2">
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
    </ul>
  </li>
  <li>
    <span>Title 3</span>
    <ul id="nav3">
      <li>seven</li>
      <li>eight</li>
      <li>nine</li>
      <li>ten</li>
      <li>eleven</li>
      <li>twelve</li>
    </ul>
  </li>
</ul>

Note that I am using max-height instead of height so that you don't have to worry about small pixel differences between browsers--but you will have to set different heights for each nav option if you want it to animate properly.

2
  • I'm loading the navigation dynamically so there's no standard max-height for the nav options. The items are loaded based on permissions.
    – peer
    Apr 7, 2016 at 7:45
  • If you're creating the nav dynamically, then you can calculate the height based on the number of elements and set it that way.
    – jperezov
    Apr 13, 2016 at 23:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.