话不多说,直接上代码。
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
<title></title> | |
<base target="content" /> | |
<script type="text/javascript" src="js/jquery.min.js"></script> | |
<link rel="shortcut icon" href="favicon.ico"> | |
<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> | |
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> | |
<style> | |
body{ | |
margin: 0; | |
padding: 0; | |
overflow: hidden; | |
} | |
.page{ | |
position: absolute; | |
/*left: 300px;*/ | |
width: 100%; | |
height: 100%; | |
background-color: lavender; | |
} | |
.top{ | |
position: fixed; | |
width: 100%; | |
height: 60px; | |
background-color: royalblue; | |
z-index: 500; | |
} | |
.mybtn{ | |
margin-top: 15px; | |
margin-left: 15px; | |
color: #FFFFFF; | |
font-size: 28px; | |
} | |
.mybtn:hover{ | |
cursor: pointer; | |
} | |
.backimg{ | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
z-index: 1000; | |
background-color: black; | |
opacity: 0.3; | |
display: none; | |
} | |
.right-dh{ | |
border: 1px solid #000000; | |
position: absolute; | |
left: -300px; | |
background-color: black; | |
width: 300px; | |
height: 100%; | |
z-index: -10; | |
} | |
.right-dh-tx{ | |
text-align: center; | |
} | |
.right-dh-tx img{ | |
display: block; | |
width: 110px; | |
border-radius: 50%; | |
border: 3px solid #FFFFFF; | |
margin: 100px auto 30px; | |
} | |
.right-dh-tx span{ | |
color: #FFFFFF; | |
} | |
.cont iframe{ | |
position: absolute; | |
top: 65px; | |
width: 100%; | |
height: 100%; | |
border: 0px; | |
/*background-color: brown;*/ | |
} | |
.dh-btn{ | |
margin-top: 50px; | |
/*border-top: 1px solid gray;*/ | |
} | |
.dh-btn a{ | |
display: block; | |
color: #FFFFFF; | |
text-decoration: none; | |
/*border-bottom: 1px solid gray;*/ | |
height: 60px; | |
line-height: 60px; | |
text-indent: 20px; | |
} | |
hr{ | |
width: 200px; | |
color: gainsboro; | |
opacity: 0.3; | |
margin-top: 50px; | |
} | |
</style> | |
<script> | |
$(document).ready(function(){ | |
//侧滑按钮点击事件 | |
$(".mybtn").click(function(){ | |
//页面整体侧滑 | |
$(".page").animate({ | |
left:'300px' | |
}); | |
//显示透明度div层 | |
$(".backimg").css({ | |
"display":"block" | |
}); | |
//左侧导航右滑 | |
$(".right-dh").animate({ | |
left:'0px' | |
}); | |
}); | |
//还原点击事件 | |
$(".backimg").click(function(){ | |
//页面整体左滑动 | |
$(".page").animate({ | |
left:'0px' | |
}); | |
//显示透明度div层隐藏 | |
$(".backimg").css({ | |
"display":"none" | |
}); | |
//左侧导航右滑 | |
$(".right-dh").animate({ | |
left:'-300px' | |
}); | |
}); | |
//栏目选择事件 | |
$(".dh-btn a").click(function(){ | |
//页面整体左滑动 | |
$(".page").animate({ | |
left:'0px' | |
}); | |
//显示透明度div层隐藏 | |
$(".backimg").css({ | |
"display":"none" | |
}); | |
//左侧导航右滑 | |
$(".right-dh").animate({ | |
left:'-300px' | |
}); | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<!--右侧导航--> | |
<div class="right-dh"> | |
<!--右侧导航头像--> | |
<div class="right-dh-tx"> | |
<img src="img/tx.jpg" /> | |
<span>刘德华</span> | |
</div> | |
<hr /> | |
<!--导航栏--> | |
<div class="dh-btn"> | |
<a class="dj" href="grzl.html"> | |
<i class="fa fa-bars"></i> 个人资料 | |
</a> | |
<a href="zpzs.html"> | |
<i class="fa fa-bank"></i> 作品展示 | |
</a> | |
<a href="ysxz.html"> | |
<i class="fa fa-beer"></i> 艺术写真 | |
</a> | |
<a href="yyjl.html"> | |
<i class="fa fa-bold"></i> 演绎经历 | |
</a> | |
</div> | |
</div> | |
<!--左侧界面--> | |
<div class="page"> | |
<div class="backimg"></div> | |
<div class="top"> | |
<!--向右滑动按钮--> | |
<i class="mybtn fa fa-user"></i> | |
</div> | |
<!--主要内容--> | |
<div class="cont"> | |
<iframe name="content" src="shouye.html"></iframe> | |
</div> | |
</div> | |
</body> | |
</html> |