jQuery鼠标滑过展示层效果

本效果就是小米官网首页鼠标滑过显示层级效果：

首先，Html文件代码：

在html中需要明白的是在大div框架下，导航与要显示内容包裹在一个层级标签中序列显示。

<body>

	<div class="demopage">
	
		<ul class="sidenav">
			<li>
				<dl class="shopClass_item">
						<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
						<dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
				</dl>
                <div class="shopList_item">
				<dl>
							<dt>电脑装机</dt>
							<dd>
								<a href="#">文字啊</a><a href="#">文字字啊</a><a href="#">文字字字啊</a>
                                <a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a>
							</dd>
				</dl>
                <div>
			</li>
			<li>
				<dl class="shopClass_item">
						<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
						<dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
				</dl>
                <div class="shopList_item">
				<dl>
							<dt>电脑装机</dt>
							<dd>
								<a href="#">文字啊</a><a href="#">文字字啊</a><a href="#">文字字字啊</a>
                                <a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a>
							</dd>
				</dl>
                <div>
			</li>
			<li>
				<dl class="shopClass_item">
						<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
						<dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
				</dl>
                <div class="shopList_item">
				<dl>
							<dt>电脑装机</dt>
							<dd>
								<a href="#">文字啊</a><a href="#">文字字啊</a><a href="#">文字字字啊</a>
                                <a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a>
							</dd>
				</dl>
                <div>
			</li>
			<li>
				<dl class="shopClass_item">
						<dt><a href="#" class="b">手机</a> <a href="#" class="b">数码</a> <a href="#" class="aLink">合约机</a></dt>
						<dd><a href="#">荣耀3X</a> <a href="#">单反</a> <a href="#">智能设备</a></dd>
				</dl>
                <div class="shopList_item">
				<dl>
							<dt>电脑装机</dt>
							<dd>
								<a href="#">文字啊</a><a href="#">文字字啊</a><a href="#">文字字字啊</a>
                                <a href="#">文字啊</a><a href="#">文字</a><a href="#">文字啊</a>
							</dd>
				</dl>
                <div>
			</li>
		</ul>
		
	</div>

</body>

其次，CSS样式：

在css中要注意，大层级框架要position:relative,隐藏显示部分position:absolute;其余部分按照自己的需求给予页面化妆。

<style type="text/css">
*{margin:0;padding:0;}
body{background:#005094;font:12px Verdana, Arial, Helvetica, sans-serif;}
dl.shopClass_item:focus{outline:none;}
.demopage{margin:0 auto;width:900px;background:#005094;overflow:hidden;padding:20px;}
/* sidenav */
ul.sidenav{float:left;margin:130px 0 0;padding:0;width:200px;list-style:none;border-bottom:1px solid #3373a9;border-top:1px solid #003867;font-size:1.2em;}
ul.sidenav li{position:relative;float:left;margin:0;padding:0;}
ul.sidenav li dl.shopClass_item{border-top:1px solid #3373a9;border-bottom:1px solid #003867;padding:10px 10px 10px 25px;display:block;color:#fff;text-decoration:none;width:165px;position:relative;z-index:2;}
ul.sidenav li dl.shopClass_item:hover,ul.sidenav li dl.current{background-color:#004c8d;border-top:1px solid #1a4c76;}
ul.sidenav li div.shopList_item{display:none;position:absolute;top:2px;left:0;width:225px;font-size:12px;background:#fff;}
ul.sidenav li div.shopList_item dl{margin:7px 0;line-height:1.6em;padding:0 5px 10px 30px;}
</style>

最后就是JS动态效果：

按照自己的需求给予自己的dom元素或者标签动态样式

<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
	
	$("ul.sidenav li").hover(function() {
		$(this).find("div").stop().animate({left: "210", opacity:1}, "fast").css({"display":"block","z-index":"9999"});
		$(this).find(">dl.shopClass_item").addClass("current");
	},function(){
		$(this).find("div").stop().animate({left: "0", opacity: 0}, "fast").css("z-index","-1");
		$(this).find(">dl.shopClass_item").removeClass("current");
	});
	
});
</script>

jQuery鼠标滑过展示层效果

猜你喜欢