使用CSS和js做的单页可隐藏菜单栏

dcrpp

浏览: 44798 次
性别:
来自: 济南

最近访客更多访客>>

jeremyjone

gch_ling

caokuang_0

xulong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

其他

CSS HTML JavaScript

用CSS和js做了一个单页的可隐藏左边栏，没有使用frameset和frame。简单了点，觉得有用的看看吧！

说明：

单击bar可以隐藏和展开左边栏，nav里面可以放横向菜单，left里面可以放树状资源列表，这样可以将菜单做成横向放在顶部，也可以做成多级菜单，鼠标移上去或者点击某个菜单展开。而左边用来放树状资源列表，节省空间。

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>test.html</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="test.css" />
		<script type="text/javascript" src="test.js"></script>
	</head>
	<body>
		<div id="header"></div>
		<div id="nav"></div>
		<div id="main">
			<div id="left"></div>
			<div id="bar" onclick="move()">
				<img id="barimg" src="left.gif" />
			</div>
			<div id="right">
				<iframe id="iframe" name="iframe" width="100%" height="100%" frameborder="0"></iframe>
			</div>			
		</div>
	</body>
</html>

test.css

*{
	margin:0px;
	padding:0px;
}
#header{
	width:960px;
	height:70px;
	background-color:red;
	margin:0 auto;
}
#nav{
	width:960px;
	height:25px;
	background-color:pink;
	margin:0 auto;
}
#main{
	width:960px;
	height:500px;
	background-color:blue;
	margin:0 auto;
}
#left{
	width:200px;
	height:100%;
	background-color:yellow;
	float:left;
}
#bar{
	width:8px;
	height:100%;
	background-color:green;
	float:left;
	cursor:pointer;
	text-align:center;
}
#barimg{
	margin-top:200px;
}
#right{
	background-color:grey;
	float:left;
	width:752px;
	height:100%;
}

test.js

function move()
{
	var left = document.getElementById("left");
	var img = document.getElementById("barimg");
	var right = document.getElementById("right");
	if(left.style.width == "0px"){
		left.style.width = "200px";
		img.src = "left.gif";
		right.style.width = "752px";
	}else{
		left.style.width = "0px";
		img.src = "right.gif";
		right.style.width = "952px";
	}
}