本效果就是小米官网首页鼠标滑过显示层级效果:
首先,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>