用框架实现的,给个例子你,还有menu.htm和right.htm没有贴出来,自己写一个吧,这两个页面没什么内容,用不同的背景色,你就能看到效果了
main.htm(框架页)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="85,*" cols="*" frameborder="NO" border="0" framespacing="0">
<frame src="title.htm" name="topFrame" scrolling="NO" noresize>
<frameset rows="*" cols="200,*" framespacing="0" frameborder="NO" border="0">
<frame src="menu.htm" name="menuFrame" scrolling="NO">
<frame src="right.htm" name="mainFrame" scrolling="AUTO" noresize>
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
title.htm(控制页)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="JavaScript" src="js/menucontrol.js">
</script>
<body background="images/b_001.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center" id=hasmenu style="visibility:visible;position:absolute; left: 102px; top: 65px;">
<a href="javascript:hiddenMenu()">关闭菜单</a>
</div>
<div align="center" id=nomenu style="visibility:hidden;position:absolute; left: 1px; top: 65px;">
<a href="javascript:showMenu()">打开菜单</a>
</div>
<div align="center"><img src="images/title.jpg" width="497" height="85"></div>
</body>
</html>
main.htm(框架页)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="85,*" cols="*" frameborder="NO" border="0" framespacing="0">
<frame src="title.htm" name="topFrame" scrolling="NO" noresize>
<frameset rows="*" cols="200,*" framespacing="0" frameborder="NO" border="0">
<frame src="menu.htm" name="menuFrame" scrolling="NO">
<frame src="right.htm" name="mainFrame" scrolling="AUTO" noresize>
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
title.htm(控制页)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="JavaScript" src="js/menucontrol.js">
</script>
<body background="images/b_001.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center" id=hasmenu style="visibility:visible;position:absolute; left: 102px; top: 65px;">
<a href="javascript:hiddenMenu()">关闭菜单</a>
</div>
<div align="center" id=nomenu style="visibility:hidden;position:absolute; left: 1px; top: 65px;">
<a href="javascript:showMenu()">打开菜单</a>
</div>
<div align="center"><img src="images/title.jpg" width="497" height="85"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title><script language="JavaScript"> var picArrow1 = '../images/default/franeset.pg21.gif';
var picArrow2 = '../images/default/franeset.pg2.gif'; function resizeFrames() { /*
top代表的是所有frame对
象的最高级对象也就是上面定义整体结构的代码,
top.contentFrameset 就取得要控制的frame对象,
然后就修改top.contentFrameset 对象的cols属性为一个新的值.来达到隐藏帧的效果
*/ if (top.contentFrameset.cols=="0,12,*") { top.contentFrameset.cols="190,12,*";
imgArrow.src = picArrow1;
}
else{
top.contentFrameset.cols="0,12,*";
imgArrow.src = picArrow2;
}
}
</script><SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--function imgArrow_ondragend() { //得到当前的窗口分割情况
w = top.contentFrameset.cols;
wLeft = w.substring(0,w.indexOf(','));
//加上移动的位置
wLeft -= -event.x;
if (wLeft<190) wLeft=190;
if (wLeft>300) wLeft=300;
top.contentFrameset.cols=wLeft + ",12,*";}//-->
</SCRIPT>
</head><body leftmargin="0" topmargin="0" onkeydown="KeyDown()" oncontextmenu="event.returnValue=false">
<table width="2%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="87" valign="top"> </td>
</tr>
<tr>
<td>
<!--img src="../images/default/imgFrmArrow01.jpg" width="13" height="12" border="0" id=imgArrow style="cursor:hand" onClick="resizeFrames()" ondragend="return imgArrow_ondragend()"-->
<img src="../images/default/franeset.pg21.gif" width="13" height="12" border="0" id="imgArrow" style="cursor:hand" onClick="resizeFrames()" ondragend="return imgArrow_ondragend()"></td>
</tr>
</table>
</body>
</html>