记录⼀个前端⼆级导航栏的淡⼊淡出效果html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>⽆标题⽂档</title>
<style type="text/css">
*{ margin:0; padding:0}
.top{ width:100%; height:100px; background:blue;}
.topNav{ width:100%; height:50px; background:#09F;}
.topNavCenter{ width:1000px; height:50px; margin:0 auto; background:#96C;}
.topNavCenter ul li{ list-style:none; float:left; width:100px; height:50px; line-height:50px; text-indent:10px;}
.topNavCenter ul li a{ color:#fff; text-decoration:none;}
.topNavCenter ul li:hover{ background:#C39;}
.topNavCenter ul li ul{ display:none;}
/*.topNavCenter ul li:hover ul{ display:block;}*/
.topNavCenter ul li ul li{ border-top:1px solid #fff; height:30px; line-height:30px; background:#63F;}
.topNavCenter ul li ul li:hover{ background:#0FC; transition:2s;}
.main{ width:1200px; height:700px; background:#F9C; margin:0 auto;}
</style>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
//⽂档加载完毕后
/
/选中某个元素 $("")
//$(this)代表当前这个对象
//hover()  ⿏标移⼊⽅法（⿏标移⼊事件，⿏标移出事件）
$(".topNavCenter ul li").hover(function(){
//⿏标移⼊显⽰
//$(this).find("ul").css("display","block");
//$(this).find("ul").show(200);  //show()显⽰
$(this).find("ul").fadeIn(2000);    //fadeIn()淡⼊
},function(){
//⿏标移出
//$(this).find("ul").css("display","none");
/
/$(this).find("ul").hide(200);    //hide()隐藏
$(this).find("ul").fadeOut(2000);  //fadeOut() 淡出
});
js导航栏下拉菜单})
</script>
</head>
<body>
<div class="top"></div>
<div class="topNav">
<div class="topNavCenter">
<ul>
<li><a href="#">学校概况</a>
<ul>
<li><a href="#">学校简介</a>
<li><a href="#">学校简介</a>
<li><a href="#">学校简介</a>
<li><a href="#">学校简介</a>
<li><a href="#">学校简介</a>
<li><a href="#">学校简介</a>
</ul>
</li>
<li><a href="#">机构设置</a></li>
<li><a href="#">⼈才培养</a>
<ul>
<li><a href="#">本科⽣培养</a>
<li><a href="#">本科⽣培养</a>
<li><a href="#">本科⽣培养</a>
<li><a href="#">本科⽣培养</a>
<li><a href="#">本科⽣培养</a>
<li><a href="#">本科⽣培养</a>
</ul>
</li>
<li><a href="#">科学研究</a></li>
<li><a href="#">招⽣就业</a></li>
<li><a href="#">学校概况</a></li>
<li><a href="#">机构设置</a></li>                <li><a href="#">⼈才培养</a></li>                <li><a href="#">科学研究</a></li>                <li><a href="#">招⽣就业</a></li>            </ul>
</div>
</div>
<div class="main"></div>
</body>
</html>
效果图实现如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。