CODEWITHSUNDEEP
javascriptangularjs
sebastiengiroux
sebastiengiroux

Reputation: 107

Looking for a dropup directive for Angular.js

I would like to implement a dropup menu (menu that opens above the button) in Angular.js that would behave similarly to the ".dropup" class in Boostrap.

Is there a directive that does this or simple instructions to create one?

Upvotes: 0

Views: 761

Answers (2)

jdmcnair
jdmcnair

Reputation: 1315

If you're using a dropdown directive that actually uses Bootstrap (like the UI Bootstrap Dropdown directive), there's no reason you can't apply the .dropup class itself to that dropdown and have it work as expected. 

<div class="btn-group dropup" dropdown> <!-- note the dropup class -->
  <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropup <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li>Stuff</li>
    ...
  </ul>
</div>

Here's a plunker to demonstrate: http://plnkr.co/edit/pzoRuVOjHHaBLryCv7RA

Upvotes: 1

Michael Doughty
Michael Doughty

Reputation: 45

If you're talking about a navigation bar-type thing, rather than a <select> element, I'd go with the following CSS:

.nav ul li {
  position: relative;
}
.nav ul ul {
  display: none;
  postion: absolute;
  bottom: 100%;
  width: 100%;
}

Adding in your own CCS flavorings and supplement that with jQuery animation:

$('.nav ul li').hover(function() {
  $(this).children('ul').stop().slideDown();
}, function() {
  $(this).children('ul').stop().slideUp();
});

The stop() prevents the animations from stacking up in an obnoxious queue. Despite the naming, slideDown() will open the submenu upwards and slideUp() will close it downwards because you've affixed the bottom of the element with your CSS.

Upvotes: 0

Related Questions