在下拉菜单选项上添加滚动条 [英] Add scrollbar on dropdown menu options
本文介绍了在下拉菜单选项上添加滚动条的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图添加一个滚动条到下拉菜单选项,所以当用户点击菜单时,它不会显示所有的选项一直到结束。我尝试了
I am trying to add a scrollbar to a dropdown menu options so when user clicks the menu it won't show all the options all the way till end. I tried
<select name='menu'>
<option value='1'>first item</option>
<option value='2'>second item</option>
<option value='3'>third item</option>
<option value='4'>fourth item</option>
<option value='5'>fifth item</option>
<option>........
<option>........
//I have many options.....
</select>
我尝试这个CSS,但它只能在菜单本身,
I try this css but it only works on the menu itself, not options.
select {
height:50px;
overflow-y: scroll;
}
有任何想法吗?非常感谢。
Any thoughts? Thanks a lot.
推荐答案
这也是我很好的处理方式:)
This is also I nice way of handeling it :)
http://css-tricks.com/long-dropdowns-solution/
从以上链接:
var maxHeight = 400; $(function(){
$(".dropdown > li").hover(function() {
var $container = $(this),
$list = $container.find("ul"),
$anchor = $container.find("a"),
height = $list.height() * 1.1, // make sure there is enough room at the bottom
multiplier = height / maxHeight; // needs to move faster if list is taller
// need to save height here so it can revert on mouseout
$container.data("origHeight", $container.height());
// so it can retain it's rollover color all the while the dropdown is open
$anchor.addClass("hover");
// make sure dropdown appears directly below parent list item
$list
.show()
.css({
paddingTop: $container.data("origHeight")
});
// don't do any animation if list shorter than max
if (multiplier > 1) {
$container
.css({
height: maxHeight,
overflow: "hidden"
})
.mousemove(function(e) {
var offset = $container.offset();
var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
if (relativeY > $container.data("origHeight")) {
$list.css("top", -relativeY + $container.data("origHeight"));
};
});
}
}, function() {
var $el = $(this);
// put things back to normal
$el
.height($(this).data("origHeight"))
.find("ul")
.css({ top: 0 })
.hide()
.end()
.find("a")
.removeClass("hover");
});
// Add down arrow only to menu items with submenus
$(".dropdown > li:has('ul')").each(function() {
$(this).find("a:first").append("<img src='images/down-arrow.png' />");
});
});
这篇关于在下拉菜单选项上添加滚动条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文