CODEWITHSUNDEEP
jqueryhtmlcssangularjsdrop-down-menu
Ayudh
Ayudh

Reputation: 1763

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;
}

Upvotes: 0

Views: 1663

Answers (2)

0aslam0
0aslam0

Reputation: 1963

You can easily do this using jquery hover. I just tried in this jsfiddle. Hope that was what you were looking for.

Added the following script.

$("ul.dropdown-menu").hide();

$( ".categoryButtons" ).hover(
  function() {
    $("ul.dropdown-menu").slideDown();
  }, function() {
    $("ul.dropdown-menu").slideUp();
  }
);

EDIT: But if the hover is made on the button, as soon as you move to the list, hover end function will be called. So better to make the follwing change:

$( ".categoryButtons" ).hover(
  function() {
    $("ul.dropdown-menu").slideDown();
    $("ul.dropdown-menu").mouseleave(function() {
        $("ul.dropdown-menu").slideUp();
    });
  });

$( ".categoryButtons" ).mouseleave(function() {
        $("ul.dropdown-menu").slideUp();
});

Upvotes: 1

ScottL
ScottL

Reputation: 1755

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>

Upvotes: 2

Related Questions