A OutlookBar class based on jquery, dynamically creating a navigation bar _jquery

Diagram Effect:

Demo Address: http://demo.jb51.net/js/menu_jquery/index.html
Download Address: Http://xiazai.jb51.net/201011/yuanma/menu_jquery.rar
Outlookbar.js

Copy Code code as follows:

function OutlookBar (targetName)//targetname: Name of the right IFrame
{
Create a title
This. Addtitle=function (Menuid,menutitle,openor) {
$ ("Body"). Append ("<div id=" +menuid+ "class= ' Menu_down ' ><span>" +menutitle+ "</span></div> <div id=child_ "+menuid+" class= ' menuchild ' ></div><div class= ' jiange ' ></div> ');
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;
}
})
}
To create the subkey
This. Additem=function (Menuid,menuchildtext,childurl) {
$ ("#child_" +menuid). Append ("<li><a target= '" +targetname+ "' href= '" +childurl+ "' >" +menuchildtext+ "< /a></li> ");
}
}

Using the Create navigation bar

Copy Code code as follows:

<script type= "Text/javascript" >
$ (function () {
var cc=new outlookbar (' boardlist ');//targetname: Name of the right IFrame
Cc. AddTitle (' A ', ' Search engine ', true);//id name, display name, open state
Cc. AddItem (' A ', ' Baidu ', ' http://baidu.com ');
Cc. AddItem (' A ', ' Google ', ' http://google.com ');
Cc. AddTitle (' B ', ' Portal ', false);
Cc. AddItem (' B ', ' Script programming ', ' http://www.jb51.net ');
Cc. AddItem (' B ', ' material ', ' http://sc.jb51.net ');
$ ("div"). addclass ("Divwidth");
});
</script>