我有一个带有下面 CSS 的动态菜单。完整代码在 Fiddle 上 here .
#
cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {
margin: 0;
padding: 0;
position: relative;
}#
cssmenu {
line - height: 1;
border - radius: 5 px 5 px 0 0; - moz - border - radius: 5 px 5 px 0 0; - webkit - border - radius: 5 px 5 px 0 0;
width: auto;
}#
cssmenu: after, #cssmenu ul: after {
content: '';
display: block;
clear: both;
}#
cssmenu a {
background: #141414;
background: -moz-linear-gradient(top, # 333333 0 % ,
#141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, # 333333), color - stop(100 % , #141414));
background: -webkit-linear-gradient(top, # 333333 0 % , #141414 100%);
background: -o-linear-gradient(top, # 333333 0 % , #141414 100%);
background: -ms-linear-gradient(top, # 333333 0 % , #141414 100%);
background: linear-gradient(to bottom, # 333333 0 % , #141414 100%);
color: # ffffff; display: block; font - family: Helvetica, Arial, Verdana, sans - serif; padding: 19 px 20 px; text - decoration: none;
}#
cssmenu ul {
list - style: none;
}#
cssmenu > ul > li {
display: inline - block;
float: left;
margin: 0;
}#
cssmenu.align - center {
text - align: center;
}#
cssmenu.align - center > ul > li {
float: none;
}#
cssmenu.align - center ul ul {
text - align: left;
}#
cssmenu.align - right > ul {
float: right;
}#
cssmenu.align - right ul ul {
text - align: right;
}#
cssmenu > ul > li > a {
color: #ffffff;
font - size: 12 px;
}#
cssmenu > ul > li: hover: after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50 % ;
bottom: 0;
border - left: 10 px solid transparent;
border - right: 10 px solid transparent;
border - bottom: 10 px solid #0fa1e0;
margin-left: -10px;
}
# cssmenu > ul > li: first - child > a {
border - radius: 5 px 0 0 0; - moz - border - radius: 5 px 0 0 0; - webkit - border - radius: 5 px 0 0 0;
}#
cssmenu.align - right > ul > li: first - child > a,
#cssmenu.align - center > ul > li: first - child > a {
border - radius: 0; - moz - border - radius: 0; - webkit - border - radius: 0;
}#
cssmenu.align - right > ul > li: last - child > a {
border - radius: 0 5 px 0 0; - moz - border - radius: 0 5 px 0 0; - webkit - border - radius: 0 5 px 0 0;
}#
cssmenu > ul > li.active > a,
#cssmenu > ul > li: hover > a {
color: #ffffff;
box - shadow: inset 0 0 3 px #000000;
-moz-box-shadow: inset 0 0 3px # 000000; - webkit - box - shadow: inset 0 0 3 px #000000;
background: # 070707;
background: -moz - linear - gradient(top, #262626 0%, # 070707 100 % );
background: -webkit - gradient(linear, left top, left bottom, color - stop(0 % , #262626), color-stop(100%, # 070707));
background: -webkit - linear - gradient(top, #262626 0%, # 070707 100 % );
background: -o - linear - gradient(top, #262626 0%, # 070707 100 % );
background: -ms - linear - gradient(top, #262626 0%, # 070707 100 % );
background: linear - gradient(to bottom, #262626 0%, # 070707 100 % );
}#
cssmenu.has - sub {
z - index: 1;
}#
cssmenu.has - sub: hover > ul {
display: block;
}#
cssmenu.has - sub ul {
display: none;
position: absolute;
min - width: 200 px;
top: 100 % ;
left: 0;
}#
cssmenu.align - right.has - sub ul {
left: auto;
right: 0;
}#
cssmenu.has - sub ul li { * margin - bottom: -1 px;
}#
cssmenu.has - sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted # 31 b7f1;
font - size: 11 px;
filter: none;
display: block;
line - height: 120 % ;
padding: 10 px;
color: #ffffff;
}#
cssmenu.has - sub ul li: hover a {
background: #0c7fb0;
}
# cssmenu ul ul li: hover > a {
color: #ffffff;
}#
cssmenu.has - sub.has - sub: hover > ul {
display: block;
}#
cssmenu.has - sub.has - sub ul {
display: none;
position: absolute;
left: 100 % ;
top: 0;
}#
cssmenu.align - right.has - sub.has - sub ul,
#cssmenu.align - right ul ul ul {
left: auto;
right: 100 % ;
}#
cssmenu.has - sub.has - sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted # 31 b7f1;
}#
cssmenu.has - sub.has - sub ul li a: hover {
background: #0a6d98;
}
# cssmenu ul ul li.last > a,
#cssmenu ul ul li: last - child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li: last - child > a,
#cssmenu.has - sub ul li: last - child > a,
#cssmenu.has - sub ul li.last > a {
border - bottom: 0;
}
我的问题是，当产品类别很大时，菜单列表会变得很长，导致页面滚动出现问题。
我已尝试解决问题 (Fiddle here)，但它不起作用。你能帮忙吗？
最佳答案
试试这个演示，这正是您所期待的。 Demo
var maxHeight = 170;
$(function(){
$("#cssmenu ul li ul 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,
})
.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("i");
});
});
关于jquery - 长下拉菜单导致页面滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29959269/