In the previous period of time project used, the project has been released, today to organize a issued out.
No frame, pure javascript+css made two-level telescopic menu, easy to understand, with strong customization and repeat the exploitation.
Program Description:
Page Invoke method:
The following are the referenced contents:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>javascript Scalable Menu-oncoding Code Camp original </title>
<!--to introduce JS file-->
<script type= "Text/javascript" src= "Jsmenu.js" ></script>
.....
<!--loader-->
<body onload = "Initmenu ()" >
<!--must be defined here id-->
<div class= "Jsmenu" id= "Pm_menu" >
The first level classification of <!--expansion-->
<div>
<span class= "Fath" > Industry information </span>
<p class= "Son" >
<!--class= "Current" is currently located at level two classification-->
<a class= "Current" href= "http://p5s8.cnblogs.com/index.php#" > Industry news </a>
<a href= "http://p5s8.cnblogs.com/index.php#" > Technical Trends </a>
<a href= "http://p5s8.cnblogs.com/index.php#" > Gossip review </a>
</p>
</div>
<!--closed First class classification-->
<div class= "collapsed" >
....
</div>
<!--independent First class classification-->
<div><span class= "single" ><a href= "http://p5s8.cnblogs.com/index.php#" > Cool station </a></span ></div>
....
Program Description:
The following are the referenced contents:
Start a program in a div with id "js_menu"
function Initmenu () {
var pm_menu = new Jsmenu ("Js_menu");
Pm_menu.init ();
}
Defining the main function
function Jsmenu (ID) {
if (!document.getelementbyid | |!document.getelementsbytagname)
return false;
This.menu = document.getElementById (ID);
This.submenus = This.menu.getElementsByTagName ("div");
}
Introduce a function to get all spans
JSMenu.prototype.init = function () {
var maininstance = this;
for (var i = 0; i < this.submenus.length; i++)
This.submenus[i].getelementsbytagname ("span") [0].onclick = function () {
Maininstance.togglemenu (This.parentnode);
};
This.expandone ();
};
Expand the menu with "current"
JSMenu.prototype.expandOne = function () {
for (var i = 0; i < this.submenus.length; i++) {
var links = this.submenus[i].getelementsbytagname ("a");
for (var j = 0; J < Links.length; J + +) {
if (Links[j].classname = = "current")
This.expandmenu (This.submenus[i]);
}
}
};
Transform Menu State function
JSMenu.prototype.toggleMenu = function (submenu) {
if (Submenu.classname = = "collapsed")
This.expandmenu (submenu);
Else
This.collapsemenu (submenu);
};
Expand All Menu Functions
JSMenu.prototype.expandMenu = function (submenu) {
var fullheight = Submenu.getelementsbytagname ("span") [0].offsetheight;
var links = submenu.getelementsbytagname ("a");
for (var i = 0; i < links.length; i++)
Fullheight + = Links[i].offsetheight;
var moveby = Math.Round (5 * links.length);
var maininstance = this;
var intId = setinterval (function () {
var curheight = submenu.offsetheight;
var newheight = curheight + moveby;
if (Newheight < fullheight)
Submenu.style.height = newheight + "px";
else {
Clearinterval (INTID);
Submenu.style.height = "";
Submenu.classname = "";
}
}, 30);
This.collapseothers (submenu);
};
Collapse Menu function
JSMenu.prototype.collapseMenu = function (submenu) {
var minheight = Submenu.getelementsbytagname ("span") [0].offsetheight;
var moveby = Math.Round (5 * submenu.getelementsbytagname ("a"). length);
var maininstance = this;
var intId = setinterval (function () {
var curheight = submenu.offsetheight;
var newheight = Curheight-moveby;
if (Newheight > MinHeight)
Submenu.style.height = newheight + "px";
else {
Clearinterval (INTID);
Submenu.style.height = "";
Submenu.classname = "collapsed";
}
}, 30);
};
Collapse other menu functions
JSMenu.prototype.collapseOthers = function (submenu) {
for (var i = 0; i < this.submenus.length; i++)
if (This.submenus[i]!= submenu && this.submenus[i].classname!= "collapsed")
This.collapsemenu (This.submenus[i]);
};