Ayudh Ayudh - 4 months ago 13
AngularJS Question

Make on hover button of a dropdown display dropdown menu

I have this code: (the ng-repeat can be thought of as for loops)

<div style="width: 10vw; display: inline-block; border: 1px solid blue;"></div>
<div class= "dropdown" index="$index + 1" ng-repeat = "cat in catData" id="{{cat.id}}" style="display: inline-block; border: 1px dotted #0000FF;">
<div style="width: 8vw; display: inline-block; border: 1px solid blue;"></div>
<button style ="width:25px; height: 25px; border-radius: 50%; border: 2px solid blue;
position:relative; left: -3px; bottom: -2px;" class="btn btn-default
dropdown-toggle categoryButtons" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
</button>
<ul class="dropdown-menu" aria-labelledby="{{cat.id}}">
<li ng-repeat="subcat in subcatData" ng-if="subcat.parent === cat.id" id="{{subcat.id}}" ng-click="article('{{subcat.url}}')">
<a href =""><span class="content">{{subcat.name}}</span></a>
</li>
</ul>
</div>


Which has these classes: dropdown for the dropdowns and dropdown-toggle for the buttons and then dropdown-menu.
I want to make it so that when the button:hover activates, the dropdown-menu is displayed.

The following is the css code:

.categoryButtons:hover {
background-color: blue !important;
}

.categoryButtons.btn[aria-expanded="true"] {
background-color: blue !important;
}

Answer

For angular, do something similar to the below. It shows and hides the dropdown when the mouse enters and leaves the button.

angular
  .module('exampleApp', [])
  .controller('ExampleController', ExampleController);

function ExampleController() {
  var vm = this;
  vm.isDropDownShowing = false;
  vm.toggleDropDown = function() {
    vm.isDropDownShowing = !vm.isDropDownShowing
  }
}
<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>

<body ng-controller="ExampleController as vm">
  <button ng-mouseenter="vm.toggleDropDown()" ng-mouseleave="vm.toggleDropDown()">On Hover list will be shown</button>
  <ul class="dropdown" ng-show="vm.isDropDownShowing">
    <li>test1</li>
    <li>test2</li>
  </ul>
</body>

</html>

With just CSS.

.hover-button:hover + .dropdown {
 display:inherit; 
}
.dropdown {
 display:none; 
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <button class="hover-button">On Hover list will be shown</button>
  <ul class="dropdown" >
    <li>test1</li>
    <li>test2</li>
  </ul>
</body>

</html>

Comments