鼠标滑过图标划出左侧菜单

最新推荐文章于 2021-05-30 19:40:11 发布

薄荷糖丷微微凉

最新推荐文章于 2021-05-30 19:40:11 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/rui512777/article/details/53638659

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>Title</title>
<style>
*{margin: 0px; padding: 0px;}
.header{
height: 60px;
width: 100%;
background-color: #18191b;
color: #F6F6F6;
vertical-align: middle;
line-height: 60px;
text-indent: 3em;
font-family: '微软雅黑';
position: fixed;
top: 0px;
left: 0px;
z-index: 10;
}
.nav{/*当你没有脱离文档流的时候不能用100%*/
width: 80px;
height: 100%;
background: #3e434a;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
.nav ul{
margin-top: 60px;
}
.nav ul li{
width:80px;
height:100px;
}
.nav ul li:nth-child(1){
background: url("images/one.png") no-repeat center;
}
.nav ul li:nth-child(2){
background: url("images/two.png") no-repeat center;
}
.nav ul li:nth-child(3){
background: url("images/three.png") no-repeat center;
}
.nav ul li:nth-child(4){
background: url("images/four.png") no-repeat center;
}
.nav ul li:nth-child(5){
background: url("images/five.png") no-repeat center;
}
.nav ul li:hover{
background-color:#fff;
}
.child{
width: 300px;
height: 100%;
position: fixed;
top:0px;
left:-220px;
background-color: #28A4D7;
}
.child:nth-child(2){
background-color: green;
}
.child ul{
margin-top: 60px;
}
.child ul li{
text-align: center;
width: 100%;
height:50px;
line-height: 50px;
vertical-align: middle;
list-style-type: none;
}
.child ul li a{
text-decoration: none;
color: #fff;
font-family:' 微软雅黑';
}
.child ul li:hover{
background-color: #3e434a;
}
</style>
</head>
<body>
<div class="header">Rui的个人博客</div>
<div class="nav">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="child">
<ul>
<li><a href="#">博客主页1</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 class="child">
<ul>
<li><a href="#">博客主页2</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 class="child">
<ul>
<li><a href="#">博客主页3</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 class="child">
<ul>
<li><a href="#">博客主页4</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 class="child">
<ul>
<li><a href="#">博客主页5</a></li>
<li><a href="#">博客代码中心</a></li>
<li><a href="#">博客里演</a></li>
<li><a href="#">博客心情说说</a></li>
<li><a href="#">关于本站</a></li>
</ul>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
var index=0;
var num=0;
$(function(){
$('.nav ul li').hover(function(){
$('.child').eq(num).stop().animate({left:'-220px'},350);
index = $(this).index();
$('.child').eq(index).stop().animate({left:'80px'},350);
num=index;
});
$('.child').mouseleave(function(){
$(this).stop().animate({left:'-220px'},350);
})
})
</script>
</body>
</html>