图示效果：
演示地址：http://demo.jb51.net/js/menu_jquery/index.html
下载地址：http://xiazai.jb51.net/201011/yuanma/menu_jquery.rar
outlookbar.js
复制代码 代码如下:
function outlookbar(targetname)//targetname:右侧iframe的name
{
//创建标题
this.addtitle=function(menuid,menutitle,openor){
$(body).append(+menutitle+
);
if(openor==false)
{
$(#child_+menuid).hide();
$(#+menuid).removeclass(menu_down);
$(#+menuid).addclass(menu_up);
}
$(#+menuid).click(function(){
if(openor==false){
$(#child_+menuid).slidedown(fast);
$(#+menuid).removeclass(menu_up);
$(#+menuid).addclass(menu_down);
openor=true;
}
else
{
$(#child_+menuid).slideup(fast);
$(#+menuid).removeclass(menu_down);
$(#+menuid).addclass(menu_up);
openor=false;
}
})
}
//创建子项
this.additem=function(menuid,menuchildtext,childurl){
$(#child_+menuid).append(+menuchildtext+);
}
}
使用创建导航条
复制代码 代码如下: