jQuery下拉滚动菜单
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>jQuery下拉滚动菜单</title> <style> body { margin: 0px; padding: 0px; background-color: #005388; } h1 { margin: 2em 0px; padding: 0px; color: #fff; text-align: center; font-weight: 100; font-size: 50px; } nav { width: 750px; margin: 1em auto; } ul { margin: 0px; padding: 0px; list-style: none; } ul.dropdown { position: relative; width: 100%; } ul.dropdown li { font-weight: bold; float: left; width: 180px; position: relative; background: #ecf0f1; } ul.dropdown a:hover { color: #000; } ul.dropdown li a { display: block; padding: 20px 8px; color: #34495e; position: relative; z-index: 2000; text-align: center; text-decoration: none; font-weight: 300; } ul.dropdown li a:hover, ul.dropdown li a.hover { background: #3498db; position: relative; color: #fff; } ul.dropdown ul { display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; } ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; } ul.dropdown ul li a { display: block; color: #34495e !important; background: #eee !important; } ul.dropdown ul li a:hover { display: block; background: #3498db !important; color: #fff !important; } .drop > a { position: relative; } .drop > a:after { content: ""; position: absolute; right: 10px; top: 40%; border-left: 5px solid transparent; border-top: 5px solid #333; border-right: 5px solid transparent; z-index: 999; } .drop > a:hover:after { content: ""; border-left: 5px solid transparent; border-top: 5px solid #fff; border-right: 5px solid transparent; } </style> </head> <body> <h1>jQuery下拉滚动菜单</h1> <nav> <ul class="dropdown"> <li class="drop"> <a href="#">导航1</a> <ul class="sub_menu"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Lipsum</a></li> <li><a href="#">Consectetur </a></li> <li><a href="#">Duis</a></li> <li><a href="#">Sed</a></li> <li><a href="#">Natus</a></li> <li><a href="#">Excepteur</a></li> <li><a href="#">Voluptas</a></li> <li><a href="#">Voluptate</a></li> <li><a href="#">Malorum</a></li> <li><a href="#">Bonorum</a></li> <li><a href="#">Nemo</a></li> <li><a href="#">Quisquam</a></li> <li><a href="#">Adipisci </a></li> <li><a href="#">Excepteur</a></li> <li><a href="#">Consectetur </a></li> <li><a href="#">Duis</a></li> <li><a href="#">Voluptate</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Lipsum</a></li> </ul> </li> <li class="drop"> <a href="#">导航2</a> <ul class="sub_menu"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Lipsum</a></li> <li><a href="#">Consectetur </a></li> <li><a href="#">Duis</a></li> <li><a href="#">Sed</a></li> <li><a href="#">Natus</a></li> <li><a href="#">Excepteur</a></li> <li><a href="#">Voluptas</a></li> <li><a href="#">Voluptate</a></li> <li><a href="#">Malorum</a></li> <li><a href="#">Bonorum</a></li> <li><a href="#">Nemo</a></li> <li><a href="#">Quisquam</a></li> </ul> </li> <li class="drop"> <a href="#">导航3</a> <ul class="sub_menu"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Lipsum</a></li> <li><a href="#">Consectetur </a></li> </ul> </li> <li><a href="#">导航4</a> </li> </ul> </nav> <script src='js/jquery-1.8.3.min.js'></script> <script src="js/index.js"></script> </body> </html>
Jquery代码
//确定页面的最大高度
var maxHeight = 400;
$(function(){
$(".dropdown > li").hover(function() {
var $container = $(this),
$list = $container.find("ul"),
$anchor = $container.find("a"),
height = $list.height() * 1.1,
multiplier = height / maxHeight;
// 保存当前选定的导航的初始高度
$container.data("origHeight", $container.height());
//给选定导航的a标签加class hover,鼠标离开导航，并在其下拉菜单滚动时，导航一直保留hover样式
$anchor.addClass("hover");
//显示下拉菜单，上边距是导航的高度
$list
.show()
.css({
paddingTop: $container.data("origHeight")
});
// 当下拉菜单的高度小于最大高度时，则不运用滚动效果
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);
$el
.height($(this).data("origHeight"))
.find("ul")
.css({ top: 0 })
.hide()
.end()
.find("a")
.removeClass("hover");
});
});
