头像

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

来源:http://www.sucaihuo.com/js/3687 素材火管理员 2018-05-14 17:08浏览(323) 收藏

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

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ3401083589直接充值

查看演示 下载资源: 11 下载资源 下载积分: 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>
最新交易
评论3
头像

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

  • 头像 板凳
    05-15 09:47
    舒***畅
    PC端的站点比较适合用。
  • 头像 椅子
    05-15 09:15
    心***扬
    虽然效果一般,但是实用性强,好评
  • 头像 沙发
    05-15 07:42
    不***火
    不错的效果,哈哈
1 2