JavaScript 經典代碼（6）

<script language="JavaScript">
/*
All Files are Designed & Writen by Windy_sk, you can use it freely but ...
YOU MUST KEEP THIS ITEM !
Email: <a href="mailto:windy_sk@126.com">windy_sk@126.com</a>
*/

var ie  = (document.getElementById && document.all);
var ns  = (document.getElementById && !document.all);
var load_end = false;

function MenuItem(name) {
 this.Menu_name = name;
 this.Item_list = new Array();
 this.add = function(title, link) {
  this.Item_list.push([title,link]);
 }
}

var Menu_list = new Array();
var n = 0;
Menu_list[n] = new MenuItem("test1");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("444","#");
Menu_list[n].add("555","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test2");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test3");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test4");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test5");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test6");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
n++;
Menu_list[n] = new MenuItem("test7");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("444","#");
Menu_list[n].add("555","#");
Menu_list[n].add("666","#");
Menu_list[n].add("777","#");
n++;
Menu_list[n] = new MenuItem("test8");
Menu_list[n].add("111","#");
Menu_list[n].add("222","#");
Menu_list[n].add("333","#");
Menu_list[n].add("444","#");
Menu_list[n].add("555","#");
Menu_list[n].add("666","#");
Menu_list[n].add("777","#");
Menu_list[n].add("888","#");
Menu_list[n].add("999","#");
n++;

var css_menu  = "padding:0px; color:#000000; position:absolute; borde:0px; overflow-y:visible; display:none; zIndex: 999; filter:alpha(opacity=100);";
var css_menu_tbl = "padding:0px; width:100%; background-color:#eeeeee; border: 1px #999999 dotted; border-collapse:collapse;";
var css_menu_itm = "padding:5px; cursor:pointer;";
var css_menu_list = "padding:0px; width:100%; border-collapse:collapse; background-color:black; BORDER: #999999 1px solid;";

menu   = document.createElement("div");
menu.innerHTML  = "";
menu.style.cssText = css_menu;

function Build_Menu_List() {
 var content = "";
 content += "<table border='1' cellPadding='2' style='"+css_menu_list+"'><tr bgColor='#ffcc00'>\n";
 for(var i=0; i<Menu_list.length; i++) {
  content += "<td style='cursor:pointer; padding: 2px' onMouseOver=\"showMenu(event,"+i+")\">"+Menu_list[i].Menu_name+"</td>\n";
 }
 content += "</tr></table>\n";
 document.writeln(content);
}

var step = 5;
var step_alpha = Math.ceil(100/step);
var step_heigh = 0;

function showMenu(e, n) {
 if(!load_end) return;
 var obj = ie?e.srcElement:e.target;
 if(obj.tagName.toLowerCase() != "td") return;
 menu.innerHTML    = "";
 menu.style.display  = "none";
 menu.style.overflowY   = "visible";
 menu.style.height  = "0px";
 if(ie)menu.filters.alpha.opacity = 0;
 if(ns)menu.style.MozOpacity  = "0%"
 
 var pos   = new get_Pos(obj);
 var content  = "";
 content  += "<table border='1' style='"+css_menu_tbl+"'>";
 for(i=0; i<Menu_list[n].Item_list.length; i++) {
  content += "<tr><td style='"+css_menu_itm+"' onMouseOver=\"this.bgColor='#BEC5DE'\" onMouseOut=\"this.bgColor=''\"><a href='" + Menu_list[n].Item_list[i][1] + "'>" + Menu_list[n].Item_list[i][0] + "</a></td></tr>";
 }
 content  += "</table>";
 step = i;
 menu.innerHTML  = content;
 with(menu.style){
  left   = pos["left"];
  top   = pos["top"] + parseInt(obj.offsetHeight);
  width   = obj.offsetWidth;
  display   = "";
  step_alpha = Math.ceil(60 / step);
  step_heigh = menu.offsetHeight / step;
  borderBottom = "1px #999999 dotted";
  height   = "1px";
  overflowY = "hidden";
 }
 fadeOut_menu();
 return;
}

var timer = null;
function fadeOut_menu() {
 clearTimeout(timer);
 var cur_level  = parseInt(ie?menu.filters.alpha.opacity:menu.style.MozOpacity);
 cur_level += step_alpha;
 if(cur_level>60) cur_level=60;
 if(ie) menu.filters.alpha.opacity = cur_level;
 if(ns) menu.style.MozOpacity = cur_level + "%";
 menu.style.height = parseInt(menu.style.height) + step_heigh;
 if(cur_level!=60){
  timer=setTimeout("fadeOut_menu()",150);
 } else {
  menu.style.borderBottom = "";
 }
}

function get_Pos(the_obj){
 the_top = the_obj.offsetTop;
 the_left = the_obj.offsetLeft;
 while(the_obj=the_obj.offsetParent){
  the_top += the_obj.offsetTop;
  the_left += the_obj.offsetLeft;
 }
 this.top = the_top;
 this.left = the_left;
}

window.onload = function() {
 load_end = true;
 document.body.appendChild(menu);
}

document.onclick = function() {
 menu.style.display = "none";
}

Build_Menu_List();
</script>
<body bgcolor="#ffffee"></body>