Reputation: 55
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
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
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