A cool JS menu

Document directory

• HTML tags and JavaScript tutorial

HTML tags and JavaScript tutorial

A cool JS menu

<SCRIPT>
Function coolmenucontrol (){
// ----- Regular variables ---
This. lastscrollx = 0;
This. lastscrolly = 0;
This. lastscrollw = 0;
This. lastscrollh = 0;
This. td_x = 0;
This. td_y = 0;
This. td_w = 0;
This. td_h = 0;
This. TD = 0;
This. mouseon = 0;
This. Current = NULL
This.hk _ name;
This. hktable_name;
This. menudiv_name;
This. menutable_name;
This. ML = 0;
This. menuarray = new array ();
This. speed;
This. href = "";
// ----- Menu item ---
Function menuitem (type, value, URL, target ){
This. type = Type
This. value = Value
This. url = URL
This.tar get = Target
}
// ----- Insert menu ---
This. insertmenu = function (type, value, URL, target ){
This. menuarray [This. menuarray. Length] = new menuitem (type, value, URL, target)
}
// ----- Preliminary test of the program ---
This. init = function (name, BDC, BGC, speed, alpha ){
VaR inhtml = ""
VaR cellcount = 0
VaR lastcellcount = 0
This.hk _ name = Name + "HK"
This. hktable_name = Name + "hktable"
This. menudiv_name = Name + "menudiv"
This. menutable_name = Name + "menutable"
This. speed = speed
For (I = 0; I <this. menuarray. length; I ++)
{
If (this. menuarray [I]. type = "2") cellcount = cellcount + 1
If (this. menuarray [I]. type = "1" | this. menuarray [I]. type = "0") {cellcount = 0}
If (lastcellcount <cellcount) {lastcellcount ++}
 
}
// Alert (cellcount)
Stylecode = "cursor: hand; filter: alpha (style = 0, opacity =" + Alpha + "); background-color:" + BGC
Suspendcode = "<Div id =" + this.hk _ name + "style = 'position: absolute; 'onclick = '" + name + ". doclick ()'>"
+ "<Table id =" + this. hktable_name + "border = '1' width = '0' cellspacing = '0' style = 'border-collapse: Collapse 'bordercolor = '" + BDC + "'>"
+ "<Tr> <TD Height = '18' style = '" + stylecode + "'> </TD> </tr> </table> </div> ";
Document. Write (suspendcode );
VaR fcell = true
For (I = 0; I <this. menuarray. length; I ++)
{
Switch (this. menuarray [I]. type)
{
Case "0 ":
T = cellcount * 2
If (T <= 0)
{
Inhtml + = '<tr> <TD colspan = 2 class = HT onmouseover =/''+ name + '. href = "'{this.menuarray? I =.url=', '{this.menuarray= I }.tar get + '"/'> '+ this. menuarray [I]. value
}
Else
{
Inhtml + = '<tr> <TD colspan =' + T + 'class = HT onmouseover =/''+ name + '. href = "'{this.menuarray? I =.url=', '{this.menuarray= I }.tar get + '"/'> '+ this. menuarray [I]. value
}
Fcell = true
Break;
Case "1 ":
T = (cellcount-1) * 2
If (T <= 0)
{
Inhtml + = '<tr> <TD width = 6> <TD onmouseover =/''+ name + '. href = "'{this.menuarray? I =.url=', '{this.menuarray= I }.tar get + '"/'> '+ this. menuarray [I]. value
}
Else
{
Inhtml + = '<tr> <TD width = 6> <TD colspan =' + T + 'onmouseover =/'+ name + '. href = "'{this.menuarray? I =.url=', '{this.menuarray= I }.tar get + '"/'> '+ this. menuarray [I]. value
}
Fcell = true
Break;
 
Case "2 ":
If (fcell)
{
Inhtml + = '<tr> <TD width = 6> <TD onmouseover =/''+ name + '. href = "'{this.menuarray? I =.url=', '{this.menuarray= I }.tar get + '"/'> '+ this. menuarray [I]. value;
Fcell = false
}
Else
{
Inhtml + = '<TD width = 6> <TD onmouseover =/''+ name + '. href = "'{this.menuarray? I =.url=', '{this.menuarray= I }.tar get + '"/'> '+ this. menuarray [I]. value;
}
Break;
}
}
Inhtml = '<Div id =' + this. menudiv_name + 'onmousemove = "'+ name +'. doover ()">'
+ '<Table id =' + this. menutable_name + 'border = "0" cellpadding = "2" class = "menu" cellspacing = "4">'
+ Inhtml
+ '</Table> </div> ';
// Alert (inhtml)
Document. Write (inhtml );
This. lastscrollx = 0;
This. lastscrolly =-4;
This. posxy (eval (this. menutable_name). cells [0])
This. td_w = eval (this. menutable_name). cells [0]. scrollwidth + 6
This. td_h = eval (this. menutable_name). cells [0]. scrollheight
Setinterval (name + ". scrollback ()", 1)
}
// ----- Click hyper-connect ---
This. doclick = function (){
// Alert (this. url)
VaR url = This. href. Split (",")
// Alert (URL [0])
// Alert (URL [1])
If (URL [0] = "") Return
If (URL [1] = "_ blank ")
{Window. Open (URL [0])}
Else
{Location. href = URL [0]}
}
// ----- Slide processing ---
This. scrollback = function (){
Diffx = This. td_X-3
Diffy = This. td_Y-5
Diffw = This. td_w
Diffh = This. td_h
Percentx = This. Speed * (diffX-this.lastScrollX );
Percenty = This. Speed * (diffY-this.lastScrollY );
Percentw = This. Speed * (diffW-this.lastScrollW );
Percenth = This. Speed * (diffH-this.lastScrollH );
If (percentx> 0) percentx = math. Ceil (percentx );
Else percentx = math. Floor (percentx );
If (percenty> 0) percenty = math. Ceil (percenty );
Else percenty = math. Floor (percenty );
If (percentw> 0) percentw = math. Ceil (percentw );
Else percentw = math. Floor (percentw );
If (percenth> 0) percenth = math. Ceil (percenth );
Else percenth = math. Floor (percenth );
Eval (this.hk _ name). style. pixeltop + = percenty;
Eval (this.hk _ name). style. pixelleft + = percentx;
Eval (this. hktable_name). style. pixelwidth + = percentw;
Eval (this. hktable_name). style. pixelheight + = percenth;
This. lastscrollx = This. lastscrollx + percentx;
This. lastscrolly = This. lastscrolly + percenty;
This. lastscrollw = This. lastscrollw + percentw;
This. lastscrollh = This. lastscrollh + percenth;
}
// ----- Slide out ---
This. doover = function (){
If (event. srcelement. tagname = "TD "){
If (event. srcelement. innertext. Length = 0 | event. srcelement. innertext = "|") Return
This. posxy (event. srcelement)
This. td_w = event. srcelement. scrollwidth + 6
This. td_h = event. srcelement. scrollheight
}
}
// ----- Absolute positioning ---
This. posxy = function (OBJ ){
Hk_left = obj. offsetleft
Hk_top = obj. offsettop
Vparent = obj. offsetparent;
 
While (vparent. tagname. touppercase ()! = "Body ")
{
Hk_left + = vparent. offsetleft;
Hk_top + = vparent. offsettop;
Vparent = vparent. offsetparent;
}
 
This. td_x = hk_left
This. td_y = hk_top
}
// ----- About ---
This. About = function (){
Alert ("OK ")
}
}
</SCRIPT>
<Head>
<Meta http-equiv = "content-language" content = "ZH-CN">
<Style>
. B {color = #000066; cursor: hand}
. Menu {
Font-family: Arial;
Cursor: default;
Font-size: 12px;
Border: 1px #000000 solid;
Border-collapse: collapse;
Filter: progid: DXImageTransform. Microsoft. gradient (gradienttype = 0, startcolorstr = # ffffff, endcolorstr = # dddddddd)
Progid: DXImageTransform. Microsoft. Shadow (Direction = 135, color = # cccccc, strength = 3 );
}
. Ht {
Font-weight: bold
}
</Style>
<! --
Step 1: materialized X-menu class
Usage:
VaR <entity variable>. New coolmenucontrol ()
--->
<Script language = "JavaScript">
VaR coolmenu1 = new coolmenucontrol ()
VaR coolmenu2 = new coolmenucontrol ()
VaR coolmenu3 = new coolmenucontrol ()
VaR about = new array ()
About [0] = "for details about X-menu/n/nauthor: puterjam/ncopyright 2004/N, please notify me"
About [1] = "about the author/n/" This guy is very lazy, nothing left !! /"/N but welcome to talk with me JavaScript/nqq: 10644570/ne-mail: PuterJam@etang.com"
</SCRIPT>
</Head>
<Body>
<! --
Step 2: Create a menu project ---
 
Usage:
<Entity variable>. insertmenu (type, HTML code, link URL, target)
Type: 0 indicates the menu title, 1 indicates the tree menu sub-project, and 2 indicates the horizontal Menu Sub-project.
HTML code: HTML code displayed on the menu
Link URL: Needless to say, URL or Javascript script
Target: empty by default, which is not opened on this page; "_ blank" indicates opening on a new page
For example:
Coolmenu2.insertmenu ("2", " Sina", "http://www.sina.com.cn/", "_ blank ")
-->
<SCRIPT>
Coolmenu1.insertmenu ("0", "Welcome to X-menu (menu Demonstration) <br> & nbsp; <font style = 'font-weight: lighter; '> made by puterjam </font> ","","")
Coolmenu1.insertmenu ("0", "", "http://www.blueidea.com/", "_ blank ")
Coolmenu2.insertmenu ("0", " landscape menu ","","")
Coolmenu2.insertmenu ("2", " Sina", "http://www.sina.com.cn/", "_ blank ")
Coolmenu2.insertmenu ("2", " my Yahoo", "http://cn.yahoo.com/", "_ blank ")
Coolmenu2.insertmenu ("2", " Etang", "http://www.etang.com/", "_ blank ")
Coolmenu2.insertmenu ("2", " 21st Century", "http://www.21cn.com/", "_ blank ")
Coolmenu2.insertmenu ("2", " Ranger", "http://www.ali213.net/", "_ blank ")
Coolmenu3.insertmenu ("0", " tree menu ","","")
Coolmenu3.insertmenu ("0", "Coolmenu3.insertmenu ("1", "about X-menu", "javascript: Alert (about [0])", "")
Coolmenu3.insertmenu ("1", "about Author", "javascript: Alert (about [1])", "")
Coolmenu3.insertmenu ("1", "Contact Me", "mailto: PuterJam@etang.com ","")
Coolmenu3.insertmenu ("1", "your browser version", "javascript: Alert (navigator. appname )","")
</SCRIPT>
<! --
Step 3: Create a menu ---
 
Usage:
<Object variable>. INIT (object variable name, border color, background color, sliding speed, and translucent background)
'Object variable name' must be the same as <object variable>
If the background color = "Transparent" is completely transparent
For example:
Coolmenu1.init ("coolmenu1", "#002000", "#38 ffff", 0.1, 15)
-->
<SCRIPT> coolmenu1.init ("coolmenu1", "#002000", "#38 ffff", 0.1, 15) </SCRIPT>
<SCRIPT> coolmenu2.init ("coolmenu2", "#002000", "#00ff80", 0.2, 10) </SCRIPT>
<SCRIPT> coolmenu3.init ("coolmenu3", "#002000", "# f0ff00", 0.3, 25) </SCRIPT>
</Body> A cool JS menu