一个静态网页，需要左侧添加侧滑菜单，通过点击菜单跳转指向 iframe
效果图
由于整体效果效果原因，样式偏暗
鼠标放于黄色箭头上即菜单向右侧滑而出，鼠标离开左侧菜单 div 即向左侧滑隐藏
文件结构
HTML，实现侧滑的主要方法：
startmove(target,speed)，target为目标侧滑大小，其应与左侧菜单的宽度相等
通过给 offsetLeft 赋值，使div进行偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 左侧拉框 -->
<div class="leftWin" id="lw" style="height: 90%; ">
<div class="leftTop">
<label style="line-height:10px;font-size:18px;">人力资源视窗</label>
</div>
<hr class="hrline" size="2" noshade="">
<span class="detail"></span>
<div class="c-content" style="position: relative; overflow: hidden; height: 100%;">
<ol id="result" class="rs-content"
style="transform: translate3d(0px, 0px, 0px); list-style-type: none; height: 480px; margin-left: -40px;">
<li class="list-item" style="height: 10%;">
<a title="" style="height: 50px;" href="http://localhost:8075/WebReport/ReportServer?formlet=gz_rl.frm" target="rlFrame">
<div class="item-main">
<p class="item-tle" style="font-size:16px;padding-top: 10px;">人力总览</p>
</div>
</a>
</li>
<li class="list-item" style="height: 10%;" >
<a title="" style="height: 50px;" href="http://192.168.103.243:37799/WebReport/ReportServer?op=fr_bi&cmd=bi_init&id=194&createBy=-999" target="rlFrame">
<div class="item-main">
<p class="item-tle" style="font-size:16px;padding-top: 10px;">人员探索</p>
</div>
</a>
</li>
</ol>
</div>
</div>
<iframe name="rlFrame" src="http://localhost:8075/WebReport/ReportServer?formlet=gz_rl.frm" style="width: 100%;height: 100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>
</body>
<script type="text/javascript">
//实现左侧窗口的拉伸效果的方法
function drawWin() {
//实现左边页面的拖拉
var leftWi = document.getElementById('lw');
// startmove(0, 30);
// $(".detail").addClass("drop-open");
/* 窗口向右拉出 */
leftWi.onmouseover = function () {
startmove(0, 30);
$(".detail").addClass("drop-open");
};
/* 窗口向左收回 */
leftWi.onmouseout = function () {
startmove(-150, -30);
$(".detail").removeClass("drop-open");
};
var timer = null;
function startmove(target, speed) {
var leftWi = document.getElementById('lw');
clearInterval(timer);
timer = setInterval(function () {
if (leftWi.offsetLeft == target) {
clearInterval(timer);
} else {
leftWi.style.left = leftWi.offsetLeft + speed + 'px';
}
}, 40);
}
}
$(document).ready(function () {
//控制左侧窗口的动画方法
// setAutoHeight();
// /* 窗口拉伸效果 */
drawWin();
})
</script>
</html>对应index.css，其中有些没有用到的标签
body, html{
width: 100%;
height: 100%;
margin:0;
font-family:"微软雅黑";
font-size:14px;
}
body,div,p{
margin: 0;
padding: 0;
overflow-y:visible;
}
.header{
padding-top:0;
padding-bottom:0;
border-bottom:1px solid #858585;
min-width:980px;
position:relative;
z-index:10;
}
.drop-i{
position: absolute;
right: 6px;
top: 9px;
width: 12px;
height: 8px;
background-image:url("../image/arrow1.png");
}
.drop-open{
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); /* Opera */
}
.f1 {
float: left;
}
#l-map {
width:100%;
height:90%;
overflow: visible;
}
.c-content{
width:100%;
height: 80%;
margin-top: -10px;
}
li{
line-height:28px;
}
.leftWin{
z-index:9999;
width: 150px;
height: 90%;
background-color: #002f37;
color: white;
position: absolute;
left: -150px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
.detail{
width: 20px;
height: 100px;
line-height: 23px;
/*左侧滑入滑出箭头标志*/
background-color: #fadd73;
color: white;
position: absolute;
right: -17px;
top: 79px;
border-radius: 4px;
background-image: url(../image/arrow2.png);
background-repeat: no-repeat;
background-position: center;
}
.leftWin .leftTop{
height: 23px;
line-height: 23px;
margin-left:20px;
font-size: 18px;
margin-top: 5%;
}
.leftWin .leftTop .com{
float: left;
height: 26px;
width: 100px;
line-height: 26px;
border: 2px solid #1a73c4;
margin-left: -56px;
position: relative;
cursor: pointer;
}
.leftWin .leftTop .com span{
margin-left: 5px;
}
.leftWin .leftTop .com li{
line-height: 25px;
}
.leftWin .leftTop .com .com-drop{
display: none;
position: absolute;
top: 26px;
left: -1px;
z-index: 1;
border: 1px solid #1a73c4;
width: 60%;
background-color: #FFFFFF;
opacity: 0.9;
}
.leftWin .leftTop .com .com-drop .con{
color: #000000;
cursor: pointer;
margin-left: -40px;
padding-left: 5px;
}
.leftWin .leftTop .com .com-drop .con:hover{
background-color: #1a73c4;
}
.leftWin .hrline{
align: left;
width: 148px;
color: #1a73c4;
}
.c-content.rs-content.list-item{
border-bottom: 1px solid #e4e4e4;
}
.list-item a{
display: block;
width: 300px;
padding: 0px 5px;
color: #e6e4df;
font-size: 12px;
position: relative;
background-color: #002835;
text-decoration:none;
-webkit-transition: background-color .15s ease-in-out;
transition: background-color .15s ease-in-out;
}
.list-item a:hover{
background-color: #336699;
cursor: pointer;
}
.item-main{
margin-left: 30px;
}
.item-aside{
float: left;
width: 50px;
height: 55px;
margin-right: 5px;
border-bottom: 4px solid transparent;
margin-top : -10px;
}
.item-tle{
font-size: 14px;
font-weight: 800;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.36;
}另外箭头图片
原创文章 88
获赞 41
访问量 16万+