A cool JS menu

Source: Internet
Author: User
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
 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.