草鞋

Blog grass shoes
posts - 1, comments - 4, trackbacks - 0, articles - 27
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

JS菜单

Posted on 2007-10-23 09:42 草 鞋 阅读(198) 评论(0)  编辑  收藏 所属分类: JavaScript

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>菜单</title>
<style>
.menu_table {background-color: #ffffff; color: #000000; border: 1 solid #717685;}
.menu_td_on {background-color: #CFD7EA; border: 1 solid #717685; color: #000000; cursor: hand; font-size: 9pt; text-indent: 10;  width: 70; height: 18}
.menu_td_off {background-color: #ffffff; border: 1 solid  #ffffff; color: #000000 cursor: hand; font-size: 9pt;  text-indent: 10;  width: 70; height: 18}
</style>
</head>
<body bgcolor="#D0DCE0" align="center">
<br><br>
<script>
<!--
//-------------  Menu Action ----------------//
function off_td()
{
event.srcElement.className = "menu_td_off";
}
function on_td()
{
event.srcElement.className = "menu_td_on";
}

var time_num = new Array();
var temp_num = null;
function parent_show_son(num,l,t,w)
{
clearTimeout(time_num[num]);
if(temp_num)
{
  hide_son(temp_num);
}

with(document.getElementById("son_"+num).style)
{
  pixelLeft = 1+w+10;
  pixelTop  = t+15;
  display = "block";
}

temp_num = num;
}
function parent_hide_son(num)
{
time_num[num] = setTimeout("hide_son("+num+")",600);
}
function hide_son(num)
{
document.getElementById("son_"+num).style.display = "none";
}
function son_on(num)
{
clearTimeout(time_num[num]);
}
//-------------- Make   Menu --------------//
var parent_char = '<table border="0" cellspacing="1" cellpadding="0" class="menu_table">'
var son_num = 0;
var son_menu = new Array();

function Have_menu(word)
{
  parent_char+='<tr><td class="menu_td_off"  onmousemove="on_td();parent_show_son(this.son,this.offsetLeft,this.offsetTop,this.offsetWidth)" onmouseout="off_td();parent_hide_son(this.son)" son="'+son_num+'">'+word+'</td></tr>';
 
  son_menu[son_num] = '<div id="son_'+son_num+'" style="position: absolute; top: 0; left: 0; display: none" son="'+son_num+'" onmouseover="son_on(this.son)" onmouseout="parent_hide_son(this.son)"><table border="0" cellspacing="1" cellpadding="0" class="menu_table">'
 
  this.son = son_num;
  this.Additem = Additem;
  this.Enditem = Enditem;
  son_num++;
}

function Additem(word,link,target)
{
  son_menu[this.son]+= '<tr><a href="'+link+'" target="'+target+'"><td  class="menu_td_off"  onmousemove="on_td()" onmouseout="off_td()">'+word+'</td></a></tr>'
}

function Enditem()
{
  son_menu[this.son]+= '</table></div>'
}

function No_menu(word,link,target)
{
  parent_char+='<tr><a href="'+link+'" target="'+target+'">gg<td  class="menu_td_off"  onmousemove="on_td()" onmouseout="off_td()">'+word+'</td></a></tr>';
}

function End_menu()
{
  parent_char+='</table>';
 
  for(i=0;i<son_menu.length;i++)
  {
   parent_char+=son_menu[i]
  
  }
}


function Show_Good_Menu()
{
  return parent_char;
}

//-->
</script>
<script>
<!--
var BM = new Array();

BM[0] = new Have_menu("父菜单一");

  BM[0].Additem("子菜单一","#","main");
  BM[0].Additem("子菜单一","#","main");
  BM[0].Additem("子菜单一","#","main"); 
  BM[0].Enditem();
BM[1] = new Have_menu("父菜单二");

  BM[1].Additem("子菜单一","/worker/legend_user","main");
  BM[1].Additem("子菜单一","/worker/legend_user/add.php","main");
  BM[1].Additem("子菜单一","#","main"); 
  BM[1].Enditem(); 
BM[2] = new No_menu("父菜单三","/worker/add.php","main");

BM[3] = new No_menu("父菜单四","/worker/mysql","_blank");

End_menu();

document.body.innerHTML += Show_Good_Menu();
//-->
</script>
</body>
</html>