jquery.dropdown.js是解决导航菜单下拉项若是过多的插件,我们可以采用下拉菜单滚动的方法,当鼠标的位置达到菜单一定高度,菜单会自动下拉滚动。
淘建站为您提供更多_导航菜单_下拉导航_滚动_菜单,在此特别感谢您对我们的支持与厚爱!
演示不了,点击反馈
下载 470 次
36 积分
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' />");
});
});

