水平階層式選單script語法

function clipLayer(layer,clipleft,cliptop,clipright,clipbottom) {
if (isNS) {
layer.clip.left=clipleft;
layer.clip.top=cliptop;
layer.clip.right=clipright;
layer.clip.bottom=clipbottom;}
if (isIE) layer.style.clip='rect('+cliptop+' '+clipright+' '+clipbottom+' '+clipleft+')';}

function getClipLeft(layer) {
if (isNS) return layer.clip.left;
if (isIE) {

var str = layer.style.clip;
if (!str) return 0;
var clip = getIEClipValues(layer.style.clip);
return(clip[3]);}
return -1;}

function getClipTop(layer) {
if (isNS) return layer.clip.top;
if(isIE) {
var str = layer.style.clip;
if (!str) return 0;
var clip = getIEClipValues(layer.style.clip);
return clip[0];}
return -1;}

function getClipRight(layer) {
if (isNS) return layer.clip.right;
if (isIE) {
var str = layer.style.clip;
if (!str) return layer.style.pixelWidth;
var clip = getIEClipValues(layer.style.clip);
return clip[1];}
return -1;}

function getClipBottom(layer) {
if (isNS) return layer.clip.bottom;
if (isIE) {
var str = layer.style.clip;
if (!str) return layer.style.pixelHeight;
var clip = getIEClipValues(layer.style.clip);
return clip[2];}
return -1;}

function getIEClipValues(str) {
var clip = new Array();
var i;
i = str.indexOf("(");
clip[0] = parseInt(str.substring(i+1,str.length),10);
i = str.indexOf(" ",i+1);
clip[1] = parseInt(str.substring(i+1,str.length),10);
i = str.indexOf(" ",i+1);
clip[2] = parseInt(str.substring(i+1,str.length),10);
i = str.indexOf(" ",i+1);
clip[3] = parseInt(str.substring(i+1,str.length),10);
return clip;}

function setBgColor(layer,color) {
if (isNS) layer.bgColor=color;
if (isIE) layer.style.backgroundColor=color;}

function getLayer(name) {
if (isNS) return findLayer(name,document);
if (isIE) return eval('document.all.'+name);
return null;}

function findLayer(name,doc) {
var i,layer;
for (i=0;i<doc.layers.length;i++) {
layer = doc.layers[i];
if (layer.name==name) return layer;
if (layer.document.layers.length > 0)
if ((layer = findLayer(name,layer.document))!=null)
return layer;}
return null;}

function getWindowWidth() {
if (isNS) return window.innerWidth;
if (isIE) return document.body.clientWidth;
return -1;}

function getWindowHeight() {
if (isNS) return window.innerHeight;
if (isIE) return document.body.clientHeight;
return -1;}

function getPageWidth() {
if (isNS) return document.width;
if (isIE) return document.body.scrollWidth;
return -1;}

function getPageHeight() {
if (isNS) return document.height;
if (isIE) return document.body.scrollHeight;
return -1;}

function getPageScrollX() {
if (isNS) return window.pageXOffset;
if (isIE) return document.body.scrollLeft;
return -1;}

<span style="color:'+this.fgColor+';font-family:'+this.fontFamily+';font-size:'+this.fontSize+';

font-style:'+this.fontStyle+';font-weight:'+this.fontWeight+';">';
high = '<table border=0 cellpadding='+this.padding+' cellspacing=0 width="100%">

<tr valign=top><td><span style="color:'+this.hiFgColor+';font-family:'+this.fontFamily+';

font-size:'+this.fontSize+';font-style:'+this.fontStyle+';font-weight:'+this.fontWeight+';">';
end1 = '</span></td>';
end2 = '</tr></table>';
img1 = '';
img2 = '';
noimg = '';
if (hasSubmenus){
img1 = '<td align=right><img border=0 hspace=0 vspace=0 src="';
img2 = '" width='+this.imageWidth+' height='+this.imageHeight+'></td>';
noimg = this.noneImage;}
sep = '<table border=0 cellpadding='+this.spPadding+' cellspacing=0 width="100%">

<img border=0 hspace=0 vspace=0 src="'+this.noneImage+'" width=1

height='+(this.spSize-Math.round(this.spSize/2))+'></td></tr>';
if (this.spSize-Math.round(this.spSize/2)>0)
sep += '<tr bgcolor="'+this.spHiColor+'"><td>

<img border=0 hspace=0 vspace=0 src="'+this.noneImage+'" width=1

height='+Math.round(this.spSize/2)+'></td></tr>';
sep += '</table></td></tr></table>';
str = "";
if (isNS){
this.baseLayer = new Layer(this.width);
setBgColor(this.baseLayer,this.bdShColor);}
bevelLayers = new Array();
if (isNS){
for (i=0;i<this.border;i++){
bevelLayers[bevelLayers.length] = new Layer(this.width,this.baseLayer);
bevelLayers[bevelLayers.length-1].visibility = "inherit";
bevelLayers[bevelLayers.length] = new Layer(this.width,this.baseLayer);
bevelLayers[bevelLayers.length-1].visibility = "inherit";}}
if (isIE)
for (i=0;i<this.border;i++)
str += '<div id="popUpMenu'+this.index+'_bevel'+(2*i)+'"

style="position:absolute; width:'+this.width+'px; height:100%;">

</div>\n<div id="popUpMenu'+this.index+'_bevel'+(2*i+1)+'"

style="position:absolute; width:'+this.width+'px; height:100%;"></div>\n';
width = this.width-2*this.border;
for (i=0;i<this.items.length;i++){
if (this.items[i].subMenu==null) imgsrc = noimg;
else imgsrc = this.normImage;
if (this.items[i].isSeparator) text = sep;
else text = norm+this.items[i].text+end1+img1+imgsrc+img2+end2;
if (isNS){
this.items[i].normLayer = new Layer(width,this.baseLayer);
this.items[i].normLayer.document.open();
this.items[i].normLayer.document.write(text);
this.items[i].normLayer.document.close();
this.items[i].normLayer.visibility = "inherit";
setBgColor(this.items[i].normLayer,this.bgColor);}
if (isIE)
str += '<div id="popUpMenu'+this.index+'_norm'+i+'" style="position:absolute;

background-color:'+this.bgColor+'; width:'+width+'px;">'+text+'</div>\n';
if (this.items[i].subMenu==null) imgsrc = noimg;
else imgsrc = this.highImage;
if (this.items[i].isSeparator) text = sep;
else text = high+this.items[i].text+end1+img1+imgsrc+img2+end2;
if (isNS){
this.items[i].highLayer = new Layer(width,this.baseLayer);
this.items[i].highLayer.document.open();
this.items[i].normLayer.document.write(text);
this.items[i].highLayer.document.close();
this.items[i].highLayer.visibility = "hide";
setBgColor(this.items[i].highLayer,this.hiBgColor);}
if (isIE)
str += '<div id="popUpMenu'+this.index+'_high'+i+'"

style="position:absolute; background-color:'+this.hiBgColor+';

width:'+width+'px; visibility:hidden;">'+text+'</div>\n';
if (isNS){
this.items[i].dmmyLayer = new Layer(width,this.baseLayer);
this.items[i].dmmyLayer.visibility = "inherit";}
if (isIE)
str += '<div id="popUpMenu'+this.index+'_dmmy'+i+'" style="position:absolute; width:'+width+'px;"></div>\n';}
if (isIE&&!isIE5){
x = getPageScrollX();
y = getPageScrollY();
window.scrollTo(getPageWidth(),getPageHeight());}
if (isIE){
str = '<div id="popUpMenu'+this.index+'_base" style="position:absolute;

left:0px; top:0px; width:'+this.width+'px; overflow:hidden; visibility:hidden;">'+str+'</div>\n';
document.body.insertAdjacentHTML("beforeEnd",str);
if (!isIE5) window.scrollTo(x,y);
this.baseLayer = getLayer("popUpMenu"+this.index+"_base");
for (i=0;i<2*this.border;i++){
bevelLayers[bevelLayers.length] = getLayer("popUpMenu"+this.index+"_bevel"+(2*i));
bevelLayers[bevelLayers.length] = getLayer("popUpMenu"+this.index+"_bevel"+(2*i+1));}}
x = this.border;
y = this.border;
height = 0;
for (i=0;i<this.items.length;i++){
if (this.items[i].subMenu){
this.items[i].subMenu.parentItem = this.items[i];
this.items[i].subMenu.offsetX = this.width-(this.border+this.padding);
this.items[i].subMenu.offsetY = y;}
if (isIE){
this.items[i].normLayer = getLayer("popUpMenu"+this.index+"_norm"+i);
this.items[i].highLayer = getLayer("popUpMenu"+this.index+"_high"+i);
this.items[i].dmmyLayer = getLayer("popUpMenu"+this.index+"_dmmy"+i);}
moveLayerTo(this.items[i].normLayer,x,y);
moveLayerTo(this.items[i].highLayer,x,y);
moveLayerTo(this.items[i].dmmyLayer,x,y);
height = getHeight(this.items[i].normLayer);
y += height;
clipLayer(this.items[i].normLayer,0,0,width,height);
clipLayer(this.items[i].highLayer,0,0,width,height);
if (isIE){
this.items[i].dmmyLayer.style.pixelWidth = width;
this.items[i].dmmyLayer.style.pixelHeight = height;}
clipLayer(this.items[i].dmmyLayer,0,0,width,height);
if (!this.items[i].isSeparator){
this.items[i].dmmyLayer.index = this.index;
this.items[i].dmmyLayer.itemIndex = i;
this.items[i].dmmyLayer.onmouseover = popUpMenuItemOn;
this.items[i].dmmyLayer.onmouseout = popUpMenuItemOff;
if (isNS){
this.items[i].dmmyLayer.document.index = this.index;
this.items[i].dmmyLayer.document.itemIndex = i;
this.items[i].dmmyLayer.document.captureEvents(Event.MOUSEUP);
this.items[i].dmmyLayer.document.onmouseup = popUpMenuItemClick;}
if (isIE)
this.items[i].dmmyLayer.onclick = popUpMenuItemClick;}}
this.height = y+this.border;
if (isIE) this.baseLayer.style.height = this.height;
setBgColor(this.baseLayer,this.bdShColor);
clipLayer(this.baseLayer,0,0,this.width,this.height);
this.baseLayer.index = this.index;this.baseLayer.onmouseout=popUpMenuOff;
for (i=0;i<this.border;i++){
clipLayer(bevelLayers[2*i],i,i,this.width-i,this.height-i);
setBgColor(bevelLayers[2*i],this.bdHiColor);
clipLayer(bevelLayers[2*i+1],(i+1),(i+1),this.width,this.height);
setBgColor(bevelLayers[2*i+1],this.bdShColor);
if (isIE){
bevelLayers[i].index = this.index;bevelLayers[i].onmouseout=popUpMenuOff;}}
this.created = true;
for (i=0;i<this.items.length;i++)
if (this.items[i].subMenu&&!this.items[i].subMenu.created)
this.items[i].subMenu.create();
window.status = "PopUpMenu: Done.";
if (this.parentMenu==null)
setTimeout('window.status = window.defaultStatus',500);}

function popUpMenuOpen(x,y){
var maxX,maxY;
if (this.created){
maxX = getPageScrollX()+getWindowWidth()-this.width;
maxY = getPageScrollY()+getWindowHeight()-this.height;
if (isNS&&getWindowHeight()<getPageHeight()) maxX -= popUpMenuScrollbarSize;
if (isNS&&getWindowWidth()<getPageWidth()) maxY -= popUpMenuScrollbarSize;
if ((x==null||y==null)){
if (this.isStatic&&!this.isSubmenu){
x = this.left;
y = this.top;
} else {
x = mouseX-(this.border+this.padding);
y = mouseY-(this.border+this.padding);}}
if (this.isSubmenu){
x = this.parentMenu.left+this.offsetX;
y = this.parentMenu.top+this.offsetY;
if (x>maxX) maxX = this.parentMenu.left+this.parentMenu.border-this.width;
this.parentMenu.openChild = this;}
if (this.isSubmenu||!this.isStatic){
x = Math.max(0,Math.min(maxX,x));
y = Math.max(0,Math.min(maxY,y));}
moveLayerTo(this.baseLayer,x,y);
showLayer(this.baseLayer);
this.isOpen = true;
this.left = x;
this.top = y;
this.right = x+this.width;
this.bottom = y+this.height;}}

function popUpMenuClose(){
if (this.created){
if (this.openChild!=null){
this.openChild.close();
this.openChild = null;}
hideLayer(this.baseLayer);
this.isOpen = false;
if (this.isSubmenu){
hideLayer(this.parentItem.highLayer);
this.parentMenu.openChild = null;}}}

function popUpMenuSetStatic(flag){
if (!this.isSubmenu) this.isStatic = flag;}

function popUpMenuMoveTo(x,y){
if (this.created) moveLayerTo(this.baseLayer,x,y);
this.left = x;
this.top = y;
this.right = this.left+this.width;
this.bottom = this.top+this.height;}

function popUpMenuMoveBy(dx,dy){
if (this.created) moveLayerBy(this.baseLayer,dx,dy);
this.left += dx;
this.top += dy;
this.right += dx;
this.bottom += dy;}

function popUpMenuGetzIndex(){
if (this.created) return(getzIndex(this.baseLayer));
else return(0);}

function popUpMenuSetzIndex(z){
var i;
if (this.created){
setzIndex(this.baseLayer,z);
for (i=0;i<this.items.length;i++)
if (this.items[i].subMenu!=null)
this.items[i].subMenu.setzIndex(z);}}

function popUpMenuOff(e){
var menu;
var wasClosed;
menu = popUpMenus[this.index];
if (isIE){
mouseX = window.event.clientX+document.body.scrollLeft;
mouseY = window.event.clientY+document.body.scrollTop;
if (mouseX>menu.left&&mouseX<menu.right&&mouseY>menu.top&&mouseY<menu.bottom)
return true;}
wasClosed = false;
if (menu.openChild==null){
if (!menu.isStatic){
menu.close();
wasClosed = true;}
} else {
if (mouseX<menu.openChild.left||mouseX>menu.openChild.right||mouseY

<menu.openChild.top||mouseY>menu.openChild.bottom){
if (!menu.isStatic){
menu.close();
wasClosed = true;
} else {
menu.openChild.close();}}}
while (wasClosed&&menu.isSubmenu&&!menu.parentMenu.isStatic){
wasClosed = false;
if (mouseX<menu.parentMenu.left||mouseX>menu.parentMenu.right||mouseY

<menu.parentMenu.top||mouseY>menu.parentMenu.bottom){
menu.parentMenu.close();
wasClosed = true;
menu = menu.parentMenu;}}
return true;}
function popUpMenuItemOn(e){
var menu,item;
menu = popUpMenus[this.index];
item = menu.items[this.itemIndex];
if (menu.openChild) menu.openChild.close();
showLayer(item.highLayer);
if (item.subMenu) item.subMenu.open(null,null);}
function popUpMenuItemOff(e){
var menu,item;
menu = popUpMenus[this.index];
item = menu.items[this.itemIndex];
if (item.subMenu!=null&&item.subMenu.isOpen) return;
hideLayer(item.highLayer);}
function popUpMenuItemClick(e){
var menu,item;
menu = popUpMenus[this.index];
item = menu.items[this.itemIndex];
if (item.link=="") return true;
hideLayer(item.highLayer);
while (menu.isSubmenu) menu = menu.parentMenu;
if (!menu.isStatic) menu.close();
else if (menu.openChild!=null) menu.openChild.close();
if (item.link.indexOf("javascript:")==0) eval(item.link);
else window.location.href = item.link;
return true;}

function popUpMenuReload(){
if (isNS&&origWidth==window.innerWidth&&origHeight==window.innerHeight) return;
if(isIE) setTimeout('window.location.href = window.location.href',2000);
else window.location.href=window.location.href;}
var mouseX = 0;
var mouseY = 0;
if (isNS) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = popUpMenuGetMousePosition;
var origWidth;
var origHeight;
if (isNS){
origWidth = window.innerWidth;
origHeight = window.innerHeight;}

window.onresize = popUpMenuReload;

// 建立選單物件模型
var menu = new PopUpMenu(120);

// 宣告第一子選單項目
var part1 = new PopUpMenu(120);
part1.copyAttributes(menu);
part1.addItem(new PopUpMenuItem("小恐龍的世界", "http://skr.hypermart.net/"));
part1.addSeparator();
part1.addItem(new PopUpMenuItem("小恐龍工作坊", "http://www.skrnet.com/"));
part1.addSeparator();
part1.addItem(new PopUpMenuItem("小恐龍留言板", "http://www.skrnet.com/skrgb/"));

// 宣告次目錄項目
var sub1 = new PopUpMenu(120);
sub1.copyAttributes(menu);
sub1.addItem(new PopUpMenuItem("環境說明", "http://www.skrnet.com/skrjs/index01.htm"));
sub1.addSeparator();
sub1.addItem(new PopUpMenuItem("新的訊息", "http://www.skrnet.com/skrjs/index.htm"));
sub1.addSeparator();
sub1.addItem(new PopUpMenuItem("問題討論", "http://www.skrnet.com/skrtalk/"));
sub1.addSeparator();
sub1.addItem(new PopUpMenuItem("示範展示", "http://www.skrnet.com/skrjs/index02.htm"));

// 宣告第二子目錄項目
var part2 = new PopUpMenu(120);
part2.copyAttributes(menu);
part2.addSubmenu(new PopUpMenuItem("JavaScript 示範", "#"),sub1);
part2.addSeparator();
part2.addItem(new PopUpMenuItem("選項一", "#"));
part2.addSeparator();
part2.addItem(new PopUpMenuItem("選項二", "#"));
part2.addSeparator();
part2.addItem(new PopUpMenuItem("選項三", "#"));

// 建立主目錄項目
menu.addSubmenu(new PopUpMenuItem("小恐龍網站群", "#"), part1);
menu.addSeparator();
menu.addSubmenu(new PopUpMenuItem("本站資源", "#"), part2);
menu.addSeparator();
menu.addItem(new PopUpMenuItem("Google 搜尋", "http://www.google.com/"));

//選單X、Y位置
var minX = 450;
var minY = 300;

function initMenu() {
menu.create();
menu.setStatic(true);
menu.open(minX, minY);
repositionMenu();}

function repositionMenu() {
var viewTop, viewBottom;
var dy;
viewTop = getPageScrollY();
viewBottom = viewTop + getWindowHeight();
if (menu.bottom < viewTop) menu.moveTo(minX, viewTop - menu.height);
if (menu.top > viewBottom) menu.moveTo(minX, viewBottom);
dy = Math.round(Math.abs(viewTop + minY - menu.top) / 2);
if (viewTop + minY < menu.top) dy = -dy;
menu.moveBy(0, dy);
setTimeout("repositionMenu()", 20);}

window.onload = initMenu;
</script>

註：用「●」此色標起來的數值及字能應自己所需做改變。

程式碼參考自→「小恐龍的世界」http://skr.hypermart.net/