LiquidMusic1
LiquidMusic1

Reputation: 55

Select List Hover Drop Down?

I was looking at the answers on: jQuery Drop Down Hover Menu

First, thanks so much for the answers provided there. I was able to implement this within a constantly evolving tool at work that I use to provide the users an easier way to to their job.

However, I had a question that I didn't want to list as an answer on the previous forum... that's not how the forum should be used.

On this tool (that I mentioned above), there are also some <select> dropdowns in this tool that the users have stated they'd like to have the dropdowns drop on mouse-over. So I modified this code to show this:

$(".DDM").hover(function() {
  $(this).find('ul, select').stop(true, true).slideDown('medium');
}, function() {
  $(this).find('ul, select').stop(true, true).slideUp('medium');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DDM">
  <select class="DDM">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

It's not working so I guess my first question is: Is it possible to do select list hover dropdowns without changing the from <select> to <li>??

Upvotes: 1

Views: 516

Answers (2)

PersyJack
PersyJack

Reputation: 1964

You can get the number of items and adjust the size:

$('.DDM').hover(function(){
var count = $(this).children().length;
$(this).attr('size', count);
},
function(){
$(this).removeAttr('size');
});

You may have to limit on the size if you have too many options.

Upvotes: 1

bowl0stu
bowl0stu

Reputation: 350

Yes, very commonly you will see dropdown menus created using <ul> and <li> tags, but the same functionality can come with <div> or <select>(with adjustments). You should pick one method and stick with it until you have more experience with these kind of interactions. Try,

 $(".myClass").on( {
    'mouseenter':function() { $('#myMenu').slideToggle(); },
    'mouseleave':function() { $('#myMenu').slideToggle(); }
});

This toggles the dropdown which includes the child elements.

Upvotes: 0

Related Questions