如何改变网页的frameset？

2个框架，left.htm是菜单栏，main.htm是主界面。
想要实现的功能是：打开页面，菜单栏只露出一个小边，鼠标移过去，菜单栏完全显示，移出来，菜单栏缩进到只露一个小边。受csdn某位大侠的启发，写了一段代码，肯定是错误百出--根本就不运行。为了说明我的思路，还是贴出来吧。（我没学过jqueay，很大程度上是瞎写的。）哪位大侠可以帮忙修改代码或者是重新写个代码？
<!--版本:$Id: main.jsp,v 1.3 2006/10/31 00:30:56 liuchao Exp $--><html>
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<frameset rows="120,*" cols="*" framespacing="0" frameborder="NO" border="0">
 <frame src="logo.htm" name="logoFrame" scrolling="auto">
<frameset rows="*" cols="120,*" framespacing="0" frameborder="NO" border="0">
 <frame src="left.htm" # name="left" scrolling="auto">
 <frame src="main.htm" name="main" scrolling="auto">
</frameset>
</frameset>
<noframes>
        <script>
            function $(o){return document.getElementById(o)}
            $('left').onmouseover = function(){
                this.frameset.row = '0';
            }
            $('left').onmouseout = function(){
                this.frameset.row = '-180'+'px';
            }                    </script>
 
<body></body>
</noframes>
</html>