看到不少人的 Blog 中已经应用到了现实或者隐藏侧栏的功能，例如 http://www.momocn.com/blog/ ，自己也尝试来实现这样一个功能。
首先考虑这个功能的实现思路。
假设整个页面分为左右两栏，通过菜单上的一个按钮来控制左侧栏的显示和隐藏，右侧主栏宽度也要根据左侧栏的显隐来自动调节。实现此功能，无非就是通过脚本来设置左侧栏宽度，同时根据页面宽度来计算右边的主侧栏动态宽度。
要了解页面的宽度，可以通过 document.body.clientWidth 来获得。而各栏的宽度通过 object.style.width 可以获得。
同时，我们要考虑另外一个情况，就是当用户更改窗口大小的时候，页面的布局也应该随之改变。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>侧栏显隐控制</title>
<style type="text/css">
<!--
body {
padding: 0;
/*margin: 0;*/
}
body, table, td, th, input, textarea, p, select, div, span {
font-size: 12px;
}
#ctrl {
line-height: 22px;
text-align: center;
width: 80px;
height: 22px;
/*margin-left: 12px;*/
border: 1px solid #DCDCDC;
cursor: default;
}
#box {
display: inline;
}
#sidebar {
background: #A3B2CC;
width: 200px;
float: left;
}
#contenter {
background: #D0D0D0;
width: 0;
float: left;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
var s;
var objCtrl;
var objSideBar;
var objContenter;
function showHideBar() {
if (parseInt(objSideBar.style.width) != 0) {
objSideBar.style.width = "0px";
objSideBar.innerHTML = "";
objCtrl.innerHTML = "显示侧栏";
}
else {
objSideBar.style.width = "200px";
objSideBar.innerHTML = s;
objCtrl.innerHTML = "隐藏侧栏";
}
objContenter.style.width = parseInt(document.body.clientWidth) - parseInt(objSideBar.style.width) + "px";
}
function initSideBar() {
objSideBar = document.getElementById("sidebar");
objCtrl = document.getElementById("ctrl");
objContenter = document.getElementById("contenter");
s = objSideBar.innerHTML;
objSideBar.style.width = "200px";
objSideBar.innerHTML = s;
objContenter.style.width = parseInt(document.body.clientWidth) - parseInt(objSideBar.style.width) + "px";
}
function resizeWindow() {
objContenter.style.width = parseInt(document.body.clientWidth) - parseInt(objSideBar.style.width) + "px";
}
-->
</script>
</head>
<body onload="initSideBar();" onresize="resizeWindow();">
<p >
http://www.purewhite.cn/archives/2005/08/post_3.html">颜色选择器</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/google_talk_v10.html">Google Talk V1.0.0.64 汉化版</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/css_autoscroll.html">CSS 定制自动滚动(autoscroll)图片</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/_v4.html">苹果树下 V4</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/w3_schools.html">W3 Schools</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/ado.html">ADO 中的数据库连接</a></li>
<li><a href="http://www.purewhite.cn/archives/2005/08/_w3orgcn.html">关于 w3.org.cn</a></li>
</ul>
</div>
<div > </div>
</div>
</body>
</html>
声明：此文章部分或者全部内容来源于网络，如果侵犯到您的权利，请电邮我(dushizhuma(a)163.com)，我将在第一时间内删除此文章并送出我的歉意！