CSS 在下拉菜单选项上添加滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9624578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add scrollbar on dropdown menu options
提问by FlyingCat
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>
I try this css but it only works on the menu itself, not options.
我尝试了这个 css，但它只适用于菜单本身，而不适用于选项。
select {
height:50px;
overflow-y: scroll;
}
Any thoughts? Thanks a lot.
有什么想法吗？非常感谢。
采纳答案by Magnus Karlsson
This is also I nice way of handeling it :)
这也是我处理它的好方法:)
http://css-tricks.com/long-dropdowns-solution/
http://css-tricks.com/long-dropdowns-solution/
From the link above:
从上面的链接：
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' />");
});
});
});
回答by Jhankar Mahbub
回答by ani
<style type="text/css">
/*dropdown menu code start*/
@media only screen and (min-width:769px) {
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative !important;
}
.dropdown-submenu>.dropdown-menu {
top: 0 !important;
left: 100% !important;
margin-top: -6px !important;
margin-left: -1px !important;
border-radius: 0 !important;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block !important;
}
.dropdown-submenu>a:after {
display: block;
content: "\f105";
font-family: 'FontAwesome';
margin-top: -18px;
right: 15px;
position: absolute;
font-weight: 300;
}
.customcaret{
float: right;
}
}
/*dropdown menu code start*/
.navbar-default .navbar-nav > li > a {
color: #535353;
transition: all ease 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
font-size: 1.15em !important;
text-transform: uppercase;
}
</style>
