jQuery仿百度知道导航下拉菜单样式

来源:https://www.sucaihuo.com/js/3687.html 2018-05-14 17:08浏览(766) 收藏

一款绿色风格的jQuery仿百度知道导航下拉菜单样式,宽屏二级下拉导航菜单代码,特别漂亮实用。
jQuery仿百度知道导航下拉菜单样式
分类:导航菜单 > 下拉导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	
	$(document).ready(function(){

		$('.nav-menu-content-box').hover(function() {
			$(this).addClass('dow-hover');
			$(".nav-menu-content").show('slow');
		}, function() {
			$(this).removeClass('dow-hover');
		});

	});

	var maxHeight = 400;

	$(function(){

		$(".nav-menu-content-box > 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());

			$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");

		});

	});

</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2