JavaScript实现菜单的隐藏与显示

如图片示意，网页由框架布局，主框架左侧还有一个控制条，点击可使左侧的导航菜单实现隐藏和显示的效果。目前有两种思路：使主框架向左浮动；隐藏左边导航菜单所在框架。请问这思路对吗？我没有代码基础，所以不懂怎么写代码，求好心人相助。另外想问，用Dreamweaver可以实现吗？非常感谢了

 <div class="top">title</div>
<div class="left" id="li_left"><iframe src="左边框架的url" width="100" height="300" frameborder="no" border="0" marginwidth="0"marginheight="0" scrolling="no" allowtransparency="yes"></iframe></div>
<div class="xianshi" id="sanjiao"></div>
<div class="right"><iframe src="右边框架的默认url" name="right" width="700" height="300" frameborder="no" border="0" marginwidth="0"marginheight="0" scrolling="no" allowtransparency="yes"></iframe></div>

结构大致如上，你自己编写样式

然后自己用JQ写一个脚本大致如下：

 $("#sanjiao").click(function(){
   var class_val=$(this).attr("class");
     if(class_val=='xianshi'){
                    $(this).removeClass().addClass("yincang");
         $("#li_left").hide();
     }
     else{
                    $(this).removeClass().addClass("xianshi");
         $("#li_left").show();
     }
});

把左边栏做在一个div里面，通过js控制显示或者隐藏

结构大致如上，你自己编写样式

然后自己用JQ写一个脚本大致如下：
$("#sanjiao").click(function(){
var class_val=$(this).attr("class");
if(class_val=='xianshi'){
$(this).removeClass().addClass("yincang");
$("#li_left").hide();
}
else{
$(this).removeClass().addClass("xianshi");
$("#li_left").show();
}
});

把左边的做成一个div 然后用js隐藏。或者是用jquary里面的属性隐藏。
$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

去看看easyui框架，轻松搞定。