求阿信的XP MENU源代码！

Question

www.9949.net有类似的，还有qq样的。

Answer 1

图片自己去阿信的网站自己下，
以下是3个文件:
###########xp menu.html:##################<link rel="stylesheet" href="dmenu.css" type="text/css">
<script language="JavaScript" src="layout.js"></script>
<script language="JavaScript" src="dmenu.js"></script>
<div class="main">
<div class="content">
<div id="test"></div>
<script language="JavaScript" defer>
<!--
var bIcon = "images/new.gif";
var main = new DMenu();
main.add(new DMenuItem("我的电脑"));
var p = main.add(new DMenuItem("程序(P)"));
var pc = p.add(new DMenu());
var f = pc.add(new DMenuItem("附件",null,bIcon));
var mf = f.add(new DMenu());
var of = mf.add(new DMenuItem("Microsoft Office",null,bIcon));
var mof = of.add(new DMenu());
mof.add(new DMenuItem("Microsoft Word"));
mof.add(new DMenuItem("Microsoft Excel"));
mof.add(new DMenuItem("Microsoft Access"));
mf.add(new DMenuItem("Microsft SQL Server"));
mf.add(new DMenuItem("Mozilla"));
mf.add(new DMenuItem("Java 2"));
mf.add(new DMenuItem("JBuilder 7",null,bIcon,new DMenu()));
pc.add(new DMenuItem("启动",null,bIcon));
pc.add(new DMenuItem("金山词霸"));
pc.add(new DMenuItem("腾讯QQ"));
main.add(new DMenuItem("文档(D)"));
main.add(new DMenuItem("设置(S)"));
main.add(new DMenuItem("运行(R)"));
main.add(new Separator());
var sd = main.add(new DMenuItem("关闭(U)"));
var msd = sd.add(new DMenu());
msd.add(new DMenuItem("重新启动"));
msd.add(new DMenuItem("关闭计算机"));
main.create(document.getElementById("test"));
//-->
</script>
</div>
</div>##################dmenu.css
.DMenu {
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #1665CB;
border-left: 6px solid #307FE5;
z-index: 99999;
filter: blendTrans(duration=0.30) progid:DXImageTransform.Microsoft.Shadow(color=#444444, Direction=135, Strength=3)
}.DMenu-top {
position: static;
}.DMenu-top .DMenuItem-label-cell {
padding: 7px 15px;
}.DMenuItem {
background: window;
color: windowText;
cursor: default;
}.DMenuItem.DMenuItem-hover {
background: #1665CB;
color: HighLightText;
}.DMenuItem-label-cell {
font: Menu;
height: 23px;
padding: 0px 8px;
vertical-align: middle;
text-align: left;
cursor: default;
}.DMenuItem-icon-cell {
width: 22px;
vertical-align: middle;
text-align: center;
}.DMenuItem-icon-cell img{
width: 16px;
height: 16px;
}.DMenuItem-more-cell {
width: 20px;
vertical-align: middle;
text-align: center;
}.DMenuItem-separator {
height: 2px;
background: window;
font: 0px;
vertical-align: middle;
text-align: center;
padding: 1px 5px;
}.DMenuItem-separator div {
border: 0px;
border-top: 1px solid #1665CB;
overflow: hidden;
height: 1px;
}

Answer 2

###############dmenu.js
/*
 * XP Menu
 * Create By Fason
 * http://fason.nease.net/
 */var DMenuConfig = {
imagePath: "images/",//这里更改图片路径
moreIcon: "more.right.gif",//更改图片名称
defaultText: "New",
defaultAction: null,
defaultIcon: null,
defaultEmptyText: '[Empty]',
showDelay: 200,
hideDelay: 200
};var ua = window.navigator.userAgent;
var ie = /msie/ig.test(ua);
var ie55up = /msie (5\.5|6)/ig.test(ua);function DMenu() {
this.level = 0;
this.parentMenu = null;
this.childNodes = new Array();
this.visible = false;
this.root = this;
this.onshow = null;
this.onhide = null;
};DMenu.prototype.drawMenu = function (oWhere) {
var oThis = this;
if (this.parentMenu) {
this.level = this.parentMenu.level + 1;
this.root = this.parentMenu.root;
}
var oTable = document.createElement("table");
oTable.className = "DMenu";
oTable.style.zIndex = 9999 + this.level;
oTable.style.visibility = "hidden";
oTable.cellSpacing = oTable.cellPadding = oTable.border = 0;
oTable.appendChild(document.createElement("tbody"));
var oBody = oTable.tBodies[0];
for (var i=0; i<this.childNodes.length; i++) {
var o = this.childNodes[i];
if (o instanceof DMenuItem) {
var oRow = document.createElement("tr");
oRow.className = "DMenuItem";
oRow.style.MozUserSelect = "none";
oRow.onselectstart = oRow.oncontextmenu = function(){ return false; };
oRow.onmouseover = function(x){ return (function(){ oThis.MenuOver(x); }) }(i);
oRow.onmouseout = function(x){ return (function(){ oThis.MenuOut(x); }) }(i);
oRow.onclick = function(x, e) { return (function(e){ oThis.MenuClick(x, e); }) }(i);
var oIcon = document.createElement("td");
oIcon.className = "DMenuItem-icon-cell";
if (o.icon) {
var m = document.createElement("img");
m.src = o.icon;
oIcon.appendChild(m);
}
var oLabel = document.createElement("td");
oLabel.className = "DMenuItem-label-cell";
oLabel.innerHTML = o.text;
var oMore = document.createElement("td");
oMore.className = "DMenuItem-more-cell";
if (o.hasMenu()) {
var m = document.createElement("img");
m.src = DMenuConfig.imagePath + DMenuConfig.moreIcon;
oMore.appendChild(m);
}
oRow.appendChild(oIcon);
oRow.appendChild(oLabel);
oRow.appendChild(oMore);
o.element = oRow;
oBody.appendChild(oRow);
if (o.hasMenu()) {
o.subMenu.drawMenu(document.body);
}
} else {
var oRow = document.createElement("tr");
var oSeparator = document.createElement("td");
oSeparator.colSpan = 3;
oSeparator.className = "DMenuItem-separator";
oSeparator.appendChild(document.createElement("div"));
oRow.appendChild(oSeparator);
oBody.appendChild(oRow);
}
}
oWhere.appendChild(oTable);
this.element = oTable;
this.body = oBody;
};DMenu.prototype.add = function (oItem) {
this.childNodes[this.childNodes.length] = oItem;
oItem.thisMenu = this;
if (oItem instanceof DMenuItem) {
if (oItem.hasMenu()) {
oItem.subMenu.parentMenu = this;
}
}
return oItem;
};DMenu.prototype.MenuOver = function (x) {
//clearTimeout(this.root._hideTimeout);
var c = this.childNodes[x];
var o = this.body.childNodes[x];
for (var i=0; i<this.childNodes.length; i++) {
var cc = this.childNodes[i];
if(cc instanceof Separator) continue;
if (i != x) {
if (cc.hasMenu()) {
if (cc.subMenu.visible) 
cc.subMenu.hide();
}
}
}
if (c.hasMenu()) {
var ref = function(){ c.subMenu.show(); };
this.root._showTimeout = setTimeout(ref, DMenuConfig.showDelay);
}
o.className = "DMenuItem DMenuItem-hover";
};DMenu.prototype.MenuOut = function (x) {
clearTimeout(this.root._showTimeout);
var c = this.childNodes[x];
var o = this.body.childNodes[x];
var oThis = this;
//var ref = function(){ oThis._hideAll(); }
//this.root._hideTimeout = setTimeout(ref, DMenuConfig.hideDelay);
if (c.hasMenu()) {
if (!c.subMenu.visible) o.className = "DMenuItem";
} else {
o.className = "DMenuItem";
}
};DMenu.prototype.MenuClick = function (x, e) {
e = e || window.event;
var o = this.childNodes[x];
if (typeof o.action == "function") {
o.action();
} else {
eval(o.action);
}
this.hideAll();
if (ie) e.cancelBubble = true;
else e.stopPropagation();
};DMenu.prototype.setVisible = function (v) {
this.visible = v;
var o = this.element;
if (ie55up) {
if (o.filters[0]) {
o.filters[0].Stop();
o.filters[0].Apply();
o.style.visibility = v ? "visible" : "hidden";
o.filters[0].Play();
} else {
o.style.visibility = v ? "visible" : "hidden";
}
} else {
o.style.visibility = v ? "visible" : "hidden";
}
};DMenu.prototype.show = function () {
var s = this.element.style;
var p = this.parentMenu;
var o = this.parentNode;
var b = p.getBoundary();
var t = this.getBoundary();
var y = b.top + o.element.offsetTop;
var x = b.left + b.width;
var docwidth = ie ? document.body.clientWidth : window.innerWidth;
var docheight = ie ? document.body.clientHeight : window.innerHeight;
var scrollX = ie ? document.body.scrollLeft : window.pageXOffset;
var scrollY = ie ? document.body.scrollTop : window.pageYOffset;
if (t.width + x - docwidth - scrollX> 0) 
x = b.left - t.width;
if (x < scrollX) x = scrollX;
if (t.height + y - docheight - scrollY > 0) 
y = docheight + scrollY - t.height;
if (y < scrollY) y = scrollY;
s.left = x + "px";
s.top = y + "px";
this.setVisible(true);
this.parentNode.element.className = "DMenuItem DMenuItem-hover";
this.hideSubs();
if (typeof this.onshow == 'function')
this.onshow();
else
eval(this.onshow);
};DMenu.prototype.hideAll = function () {
var o = this;
while (o.parentMenu) 
o = o.parentMenu;
o.hideSubs();
};DMenu.prototype.hide = function () {
var o = this.parentNode;
o.element.className = "DMenuItem";
this.setVisible(false);
this.hideSubs();
if (typeof this.onhide == 'function')
this.onhide();
else
eval(this.onhide);
};DMenu.prototype.hideSubs = function () {
for (var i=0; i<this.childNodes.length; i++) {
var c = this.childNodes[i]
if( c instanceof Separator) continue;
c.element.className = "DMenuItem";
if (c.hasMenu()) 
if (c.subMenu.visible) c.subMenu.hide();
}
};DMenu.prototype.getBoundary = function () {
var o = el = this.element;
var x = o.offsetLeft, y = o.offsetTop;
while (o = o.offsetParent) {
x += o.offsetLeft;
y += o.offsetTop;
}
return {
"left": x,
"top": y,
"width": el.offsetWidth,
"height": el.offsetHeight
};
};DMenu.prototype.create = function (oTarget) {
this.drawMenu(oTarget);
this.element.className = "DMenu DMenu-top";
this.element.style.visibility = "visible";
var o = this;
if (ie) {
window.attachEvent("onresize", function() { o.hideSubs(); });
document.attachEvent("onclick", function() { o.hideAll(); });
} else {
window.addEventListener("resize", function() { o.hideSubs(); }, false);
document.addEventListener("click", function(){ o.hideAll();}, false);
}
};function DMenuItem(sText, fAction, sIcon, sMenu) {
this.text = sText ? sText : DMenuConfig.defaultText;
this.action = fAction ? fAction : DMenuConfig.defaultAction;
this.icon = sIcon ? sIcon : DMenuConfig.defaultIcon;
this.subMenu = null;
this.thisMenu = null;
if (sMenu) this.add(sMenu);
};DMenuItem.prototype.add = function (sMenu) {
this.subMenu = sMenu;
sMenu.parentNode = this;
sMenu.parentMenu = this.thisMenu;
return sMenu;
};DMenuItem.prototype.hasMenu = function () {
var s = this.subMenu;
if (s) {
if (s.childNodes.length == 0) s.add(new DMenuItem(DMenuConfig.defaultEmptyText));
return true;
}
return false;
};function Separator() { };