页面导航动画效果
<!DOCTYPE html>
<html>
<head>
<title>页面导航动画效果</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/css/font-awesome.min.css">
<style type="text/css">
*{margin:0;padding:0;}
body{font-size: 18px;color:rgb(170,173,177);}
.fr{float:right;}
.fl{float:left;}
.clear{clear:both;}
.bb{font-size:30px;line-height:60px;text-align: center;}
.nav{margin:30px auto;width:1100px;}
.menu{width:200px;background:rgb(43,51,59);border-top-left-radius: 6px;border-bottom-left-radius:6px;padding:30px 0px;position:relative;}
.item li{list-style: none;padding:0 0 0 20px;height:60px;line-height:60px;}
.item li:hover{background:rgba(255,255,255,0.3);cursor:pointer;}
.cates{position:absolute;left:210px;top:0px;width:500px;background:rgba(28,124,210,0.9);font-size:14px;color:#fff;border-radius:10px;padding:50px; }
.border{border:1px solid #ccc;width:300px;}
.item_li li{list-style: none;float:left;margin-right:30px;}
</style>
</head>
<body>
<div class="nav">
<div class="menu">
<ul class="item">
<li>php开发<i class="fa fa-angle-right fr bb"></i></li>
<li>前端开发<i class="fa fa-angle-right fr bb"></i></li>
<li>服务器开发<i class="fa fa-angle-right fr bb"></i></li>
<li>移动开发<i class="fa fa-angle-right fr bb"></i></li>
<li>数据库开发<i class="fa fa-angle-right fr bb"></i></li>
</ul>
<div class="cates">
<div class="itemHtml">
<p><span class="fl">php教程</span><div class="border fl" style="margin-top:8px;margin-left:10px;"></div></p>
<div class="clear" style="margin-bottom:20px"></div>
<p >
<ul class="item_li">
<li>php图文教程</li>
<li>php视频教程</li>
<li>php手册教程</li>
<li>php实战教程</li>
<li>其它机构教程</li>
<li>php原生教程</li>
<li>phpstudy工具使用视频教程</li>
</ul>
</p>
</div>
<div class="clear" style="margin-bottom:20px"></div>
<div class="itemHtml">
<p><span class="fl">javaScript</span><div class="border fl" style="margin-top:8px;margin-left:10px;"></div></p>
<div class="clear" style="margin-bottom:20px"></div>
<p >
<ul class="item_li">
<li>javaScript</li>
<li>jQuery</li>
<li>HTML DOM</li>
<li>AngularJS</li>
<li>React</li>
<li>jQuery EasyUI</li>
<li>Node.js</li>
<li>AJAX</li>
<li>JSON</li>
<li>Highchars</li>
<li>Maps API</li>
</ul>
</p>
</div>
</div>
<div class="cates">
<div class="itemHtml">
<p><span class="fl">HTML/CSS</span><div class="border fl" style="margin-top:8px;margin-left:10px;"></div></p>
<div class="clear" style="margin-bottom:20px"></div>
<p >
<ul class="item_li">
<li>HTML</li>
<li>CSSL</li>
<li>HTML5</li>
<li>CSS3</li>
<li>Bootstrap</li>
<li>Foundation</li>
</ul>
</p>
</div>
<div class="clear" style="margin-bottom:20px"></div>
<div class="itemHtml">
<p><span class="fl">javaScript</span><div class="border fl" style="margin-top:8px;margin-left:10px;"></div></p>
<div class="clear" style="margin-bottom:20px"></div>
<p >
<ul class="item_li">
<li>javaScript</li>
<li>jQuery</li>
<li>HTML DOM</li>
<li>AngularJS</li>
<li>React</li>
<li>jQuery EasyUI</li>
<li>Node.js</li>
<li>AJAX</li>
<li>JSON</li>
<li>Highchars</li>
<li>Maps API</li>
</ul>
</p>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('.cates').hide();
$(document).on('mouseover','.item li',function(){
$id=$('.item li').index(this);
$(this).parents().children('.cates').eq($id).slideDown();
})
$(document).on('mouseleave','.item li',function(){
console.log('ok');
$(this).parents().children('.cates').eq($id).slideUp();
})
})
</script>
</body>
</html>