yalabot / angular-foundation

http://pineconellc.github.io/angular-foundation/
Other
1.05k stars 267 forks source link

Dropdown hover #233

Closed mpgn closed 8 years ago

mpgn commented 9 years ago

Is it possible to use dropdown with hover ?

This example http://plnkr.co/edit/zAsvjCGE2kDeWK3eaRPe?p=preview is limited to "click". Dropdown his often used in navbar so hover a dropdown is important.

ghost commented 9 years ago

you can create your own directive for dropdownToggle that adds that capability. I added space (keyCode 32) and enter(keyCode 13) key events to the angular-foundation dropdowns in my apps:

'use strict';

angular.module('my-own-app')
.directive('dropdownToggle', [function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.bind('keypress', function(event){
        if(event.keyCode == 13 || event.keyCode == 32){
          element.click();
        }
      })
    }
  };
}]);
circlingthesun commented 9 years ago

@Leocrest, true. To achieve hover you could do:

angular.module('app')
.directive('dropdownToggle', [function () {
  return {
    restrict: 'A',
    link: function (scope, element) {
      element.bind('mouseover', function(event){
          if(!element.hasClass('expanded')){
            element[0].click();
          }
      });
      element.parent().bind('mouseleave', function(event){
          if(element.hasClass('expanded')){
            element[0].click();
          }
      });
    }
  };
}]);
NeXTs commented 9 years ago

thank you @circlingthesun, saved me some time :+1: