iget
2001-06-07, 11:56 AM
範例網頁：
http://home.pchome.com.tw/home/iget1/dhtml_menu.html
原始檔下載：一個是HTML，另一個是.JS檔，都必須下載，且在同目錄
http://home.pchome.com.tw/home/iget1/dhtml_menu.zip
說明：在HTML裡有部分重要的中文說明，包括這個DHTML選單的顏色，寬度，寬度，位置等
原始碼：
步驟一：把以下的原始碼放在<head></head>
<link rel="STYLESHEET" type="text/css" href="style.css">
<style>
SPAN.copytext {font-family: verdana; font-size: 12px;}
SPAN.HeaderText {font-family: verdana; font-size: 12px;}
SPAN.SideHeader {font-family: times; font-size: 14px; font-weight: bold;}
SPAN.BodyHeader {font-family: verdana; font-size: 12px; font-weight: bold;}
SPAN.ArtHeader {font-family: verdana; font-size: 12px;}
SPAN.ArtCapt {font-family: verdana; font-size: 12px;}
</style>
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a];}}
}
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
步驟二：在<body>之後加入以下Javascript
<script LANGUAGE="JavaScript1.2" SRC="dhtml_menu.js"></script>
<script>
//Making a menu object
oMenu=new menuObj('oMenu') //name for the menu Must be unique for each menu
oMenu.clMain='padding:0px; font-family:Geneva, Verdana; font-size:10px; font-weight:normal' //tyle for the main menus
oMenu.clSub='padding:0px; font-family:Geneva, Verdana; font-size:10px' //style for the submenus
oMenu.clSubSub='padding:3px; font-family:verdana; font-size:10px' //style for the subsubmenus
oMenu.clAMain='text-decoration:none; color:#000000' //主選單內的字型設定
oMenu.clASub='text-decoration:none; color:#000000' //下拉後子選單的文字設定
oMenu.clASubSub='text-decoration:none; color:white' //style for the subsub links
oMenu.makeStyle()
//選單的背景顏色設定
oMenu.backgroundbar=0 //0 if no backgroundbar
oMenu.backgroundbarfromleft=0 //left placement of the backgroundbar in pixel or %
oMenu.backgroundbarfromtop=0 //top placement of the backgroundbar in pixel or %
oMenu.backgroundbarsize="100%" //size of the bar in pixel or %
oMenu.backgroundbarcolor="White" //backgroundcolor of the bar
oMenu.mainheight=22 //各主選單的高度(可用pixel or %顯示)
oMenu.mainwidth=120 //各主選單的寬度(可用pixel or %顯示)
oMenu.subwidth=120 //各次選單的寬度(可用pixel or %顯示)
oMenu.subheight=20 //各次選單的每個選項的高度(可用pixel or %顯示)
oMenu.subsubwidth=87 //width of the subsubmenus in pixel or %
oMenu.subsubheight=15 //height if the subsubitems in pixel or %
oMenu.subplacement=oMenu.mainheight //height of the subsub Relative to the main item
oMenu.subsubXplacement=110 //X placement of the subsubmenus, relative to the sub item
oMenu.subsubYplacement=0 //Y placement of the subsubmenus, relative to the sub item
oMenu.mainbgcoloroff='#6699FF' //主選單的背景設定
oMenu.mainbgcoloron='#F0B148' //當滑鼠移到主選單時的背景變換顏色
oMenu.subbgcoloroff='#ffffd5' //次選單的背景設定
oMenu.subbgcoloron='#6699ff' //當滑鼠移到次選單時的背景變換顏色
oMenu.subsubbgcoloroff='#7EBEBE' //backgroundcolor of the subsub menuitems
oMenu.subsubbgcoloron='#E1D8C3' //backgroundcolor on mouseover of the subsub menuitems
oMenu.stayoncolor=0 //0 to stay on the mouseovered color when clicked
oMenu.menuspeed=8 //speed of the clipping in px
oMenu.menusubspeed=8 //speed of the submenus clipping in px
oMenu.menurows=1 //0 if you want rows and to 1 if you want columns
oMenu.menueventon="mouse" //Set to "mouse" for the menus to appear onmouseover, "click" appear onclick
oMenu.menueventoff="mouse" //Set to "mouse" to disappear onmouseout, not "click"
//Placement of the menuitems
//right beside eachother (only adding the pxbetween variable)
oMenu.menuplacement=0
//"right beside eachother" you count how many pixel there should be between each here
oMenu.pxbetween=2 //各主選單之間的間距(in pixel or %)
//start from the left here
oMenu.fromleft=125 //和網頁左方的距離(in pixel or %)
//from the top the menu should be.
oMenu.fromtop=5 //和網頁上方的距離(in pixel or %)
/********************
Construct menus below
*********************/
//MAIN 1 技術文件
oMenu.makeMain(0,' 技術文件','tech/index.html')
oMenu.makeSub(0,0,' 常見問題','tech/faq.html',6)
oMenu.makeSub(0,1,' 多台電腦上網','tech/many_pc.html',6)
oMenu.makeSub(0,2,' MAC上網','tech/mac.html',6)
oMenu.makeSub(0,3,' Linux上網','tech/linux.html',6)
oMenu.makeSub(0,4,' 網路卡選購','tech/lancard.html',6)
oMenu.makeSub(0,5,' 其他','tech/others.html',6)
//MAIN 2 教學文件
oMenu.makeMain(1,' 教學文件','teaching/index.html')
oMenu.makeSub(1,0,' ADSL軔體更新','teaching/firmware.html',3)
oMenu.makeSub(1,1,' PPPoE安裝','teaching/pppoe.html',3)
oMenu.makeSub(1,2,' 其他','teaching/others.html',3)
//MAIN 3 軟體下載
oMenu.makeMain(2,' 軟體下載','software/index.html')
oMenu.makeSub(2,0,' WWW工具','software/www.html',3)
oMenu.makeSub(2,1,' 多媒體','software/multimedia.html',3)
oMenu.makeSub(2,2,' OFFICE系統','software/office.html',3)
//MAIN 4 編程下載
oMenu.makeMain(3,' 編程下載','source/index.html')
oMenu.makeSub(3,0,' PHP下載','source/php.html',6)
oMenu.makeSub(3,1,' ASP下載','source/asp.html',6)
oMenu.makeSub(3,2,' CGI下載','source/cgi.html',6)
oMenu.makeSub(3,3,' JSP下載','source/jsp.html',6)
oMenu.makeSub(3,4,' JavaScript下載','source/js.html',6)
oMenu.makeSub(3,5,' 其他下載','source/others.html',6)
/*********************
End menu construction
**********************/
//When all the menus are written out we initiates the menu
oMenu.construct()
</script>
<!-- END OF DYNAMIC MENU -->
贊助商連結
http://home.pchome.com.tw/home/iget1/dhtml_menu.html
原始檔下載：一個是HTML，另一個是.JS檔，都必須下載，且在同目錄
http://home.pchome.com.tw/home/iget1/dhtml_menu.zip
說明：在HTML裡有部分重要的中文說明，包括這個DHTML選單的顏色，寬度，寬度，位置等
原始碼：
步驟一：把以下的原始碼放在<head></head>
<link rel="STYLESHEET" type="text/css" href="style.css">
<style>
SPAN.copytext {font-family: verdana; font-size: 12px;}
SPAN.HeaderText {font-family: verdana; font-size: 12px;}
SPAN.SideHeader {font-family: times; font-size: 14px; font-weight: bold;}
SPAN.BodyHeader {font-family: verdana; font-size: 12px; font-weight: bold;}
SPAN.ArtHeader {font-family: verdana; font-size: 12px;}
SPAN.ArtCapt {font-family: verdana; font-size: 12px;}
</style>
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a];}}
}
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
步驟二：在<body>之後加入以下Javascript
<script LANGUAGE="JavaScript1.2" SRC="dhtml_menu.js"></script>
<script>
//Making a menu object
oMenu=new menuObj('oMenu') //name for the menu Must be unique for each menu
oMenu.clMain='padding:0px; font-family:Geneva, Verdana; font-size:10px; font-weight:normal' //tyle for the main menus
oMenu.clSub='padding:0px; font-family:Geneva, Verdana; font-size:10px' //style for the submenus
oMenu.clSubSub='padding:3px; font-family:verdana; font-size:10px' //style for the subsubmenus
oMenu.clAMain='text-decoration:none; color:#000000' //主選單內的字型設定
oMenu.clASub='text-decoration:none; color:#000000' //下拉後子選單的文字設定
oMenu.clASubSub='text-decoration:none; color:white' //style for the subsub links
oMenu.makeStyle()
//選單的背景顏色設定
oMenu.backgroundbar=0 //0 if no backgroundbar
oMenu.backgroundbarfromleft=0 //left placement of the backgroundbar in pixel or %
oMenu.backgroundbarfromtop=0 //top placement of the backgroundbar in pixel or %
oMenu.backgroundbarsize="100%" //size of the bar in pixel or %
oMenu.backgroundbarcolor="White" //backgroundcolor of the bar
oMenu.mainheight=22 //各主選單的高度(可用pixel or %顯示)
oMenu.mainwidth=120 //各主選單的寬度(可用pixel or %顯示)
oMenu.subwidth=120 //各次選單的寬度(可用pixel or %顯示)
oMenu.subheight=20 //各次選單的每個選項的高度(可用pixel or %顯示)
oMenu.subsubwidth=87 //width of the subsubmenus in pixel or %
oMenu.subsubheight=15 //height if the subsubitems in pixel or %
oMenu.subplacement=oMenu.mainheight //height of the subsub Relative to the main item
oMenu.subsubXplacement=110 //X placement of the subsubmenus, relative to the sub item
oMenu.subsubYplacement=0 //Y placement of the subsubmenus, relative to the sub item
oMenu.mainbgcoloroff='#6699FF' //主選單的背景設定
oMenu.mainbgcoloron='#F0B148' //當滑鼠移到主選單時的背景變換顏色
oMenu.subbgcoloroff='#ffffd5' //次選單的背景設定
oMenu.subbgcoloron='#6699ff' //當滑鼠移到次選單時的背景變換顏色
oMenu.subsubbgcoloroff='#7EBEBE' //backgroundcolor of the subsub menuitems
oMenu.subsubbgcoloron='#E1D8C3' //backgroundcolor on mouseover of the subsub menuitems
oMenu.stayoncolor=0 //0 to stay on the mouseovered color when clicked
oMenu.menuspeed=8 //speed of the clipping in px
oMenu.menusubspeed=8 //speed of the submenus clipping in px
oMenu.menurows=1 //0 if you want rows and to 1 if you want columns
oMenu.menueventon="mouse" //Set to "mouse" for the menus to appear onmouseover, "click" appear onclick
oMenu.menueventoff="mouse" //Set to "mouse" to disappear onmouseout, not "click"
//Placement of the menuitems
//right beside eachother (only adding the pxbetween variable)
oMenu.menuplacement=0
//"right beside eachother" you count how many pixel there should be between each here
oMenu.pxbetween=2 //各主選單之間的間距(in pixel or %)
//start from the left here
oMenu.fromleft=125 //和網頁左方的距離(in pixel or %)
//from the top the menu should be.
oMenu.fromtop=5 //和網頁上方的距離(in pixel or %)
/********************
Construct menus below
*********************/
//MAIN 1 技術文件
oMenu.makeMain(0,' 技術文件','tech/index.html')
oMenu.makeSub(0,0,' 常見問題','tech/faq.html',6)
oMenu.makeSub(0,1,' 多台電腦上網','tech/many_pc.html',6)
oMenu.makeSub(0,2,' MAC上網','tech/mac.html',6)
oMenu.makeSub(0,3,' Linux上網','tech/linux.html',6)
oMenu.makeSub(0,4,' 網路卡選購','tech/lancard.html',6)
oMenu.makeSub(0,5,' 其他','tech/others.html',6)
//MAIN 2 教學文件
oMenu.makeMain(1,' 教學文件','teaching/index.html')
oMenu.makeSub(1,0,' ADSL軔體更新','teaching/firmware.html',3)
oMenu.makeSub(1,1,' PPPoE安裝','teaching/pppoe.html',3)
oMenu.makeSub(1,2,' 其他','teaching/others.html',3)
//MAIN 3 軟體下載
oMenu.makeMain(2,' 軟體下載','software/index.html')
oMenu.makeSub(2,0,' WWW工具','software/www.html',3)
oMenu.makeSub(2,1,' 多媒體','software/multimedia.html',3)
oMenu.makeSub(2,2,' OFFICE系統','software/office.html',3)
//MAIN 4 編程下載
oMenu.makeMain(3,' 編程下載','source/index.html')
oMenu.makeSub(3,0,' PHP下載','source/php.html',6)
oMenu.makeSub(3,1,' ASP下載','source/asp.html',6)
oMenu.makeSub(3,2,' CGI下載','source/cgi.html',6)
oMenu.makeSub(3,3,' JSP下載','source/jsp.html',6)
oMenu.makeSub(3,4,' JavaScript下載','source/js.html',6)
oMenu.makeSub(3,5,' 其他下載','source/others.html',6)
/*********************
End menu construction
**********************/
//When all the menus are written out we initiates the menu
oMenu.construct()
</script>
<!-- END OF DYNAMIC MENU -->
贊助商連結