效果图
代码部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>综合信息</title>
<style>
html,body {
100%;
height: 100%;
font-family: "Microsoft Yahei", "SimSun", Arial;
font-size:12px;
overflow:hidden;
}
body,h3,ul,li {
margin: 0;
padding: 0;
}
h3,th{
font-weight:normal;
}
.ul,ul li {
list-style-type: none;
}
a{
text-decoration: none;
}
.header {
100%;
height: 50px;
position: absolute;
top: 0;
/*以上设置是重点必须的*/
line-height: 50px;
}
.header h3 {
margin-left: 12px;
color: #0075C7;
}
.mainBox {
100%;
position: absolute;
top: 50px;
bottom: 0;
/*以上设置是重点必须的*/
}
.mainBox .leftBox {
height: 100%;
240px;
float: left;
overflow: auto;
/*以上设置是重点必须的*/
background: #f8f8ee;
font-size: 12px;
font-family: "Microsoft Yahei", "SimSun", Arial;
border-right: 1px solid #D9D9D9;
border-top: 1px solid #D9D9D9;
}
.menuItem a,.menuItem a:visited {
padding-left: 20px;
220px;
height: 32px;
background-color: #f8f8f8;
border-bottom: solid 1px #EAEAEA;
border-top: solid 1px #FFFFFF;
display: block;
line-height: 32px;
color: #000000;
}
.menuItem a:hover,.menuItem a:active {
background: #f2f2f2;
color: #0075c7;
}
.menuItem img {
18px;
height: 18px;
vertical-align: middle;
margin-right: 10px;
}
.mainBox .rightBox {
height: 100%;
margin-left: 241px;
/*以上设置是重点必须的*/
padding-right: 1px;
padding-left: 1px;
border-left: 1px solid #E6E6E6;
border-top: 1px solid #D9D9D9;
overflow: auto;
}
.slideBtn {
cursor: pointer;
1em;
position: absolute;
top: 40%;
left: 1;
display: block;
}
</style>
<script type="text/javascript"
src="jquery.js"></script>
</head>
<body>
<div class="header">
<h3>
综合信息
</h3>
</div>
<div class="mainBox">
<div class="leftBox">
<div class="menuItem zzjg">
<a href="zhxx.jsp?type=zzjg">组织机构</a>
</div>
<div class="menuItem ygfc">
<a href="zhxx.jsp?type=ygfc">员工风采</a>
</div>
<div class="menuItem wghf">
<a href="zhxx.jsp?type=wghf">网格划分</a>
</div>
<div class="menuItem xxyd">
<a href="zhxx.jsp?type=xxyd">学习园地</a>
</div>
<div class="menuItem tzgg">
<a href="zhxx.jsp?type=tzgg">通知公告</a>
</div>
<div class="menuItem xwzx">
<a href="http://www.gz121.gov.cn/gqqx/hzq/zwgk_99/qxxw_104/"
target="_blank">新闻资讯</a>
</div>
</div>
<div class="rightBox">
<div class="slideBtn">伸缩</div>
</div>
</div>
<script type="text/javascript">
//左侧菜单栏伸缩效果
$('.slideBtn').click(
function() {
$('.leftBox').toggle();
var status = $('.leftBox').css("display");
if (status == 'none') {
$('.rightBox').css("marginLeft", "0");
$(this).css("background",
"red");
} else {
$('.rightBox').css("marginLeft", "241px");
$(this).css("background",
"green");
}
});
</script>
</body>
</html>