左側的浮動選單

特別注意:
 為了避免在複製貼上時產生錯誤 (尤其是使用 FrontPage 系列的網友, 常會因 FrontPage 的"雞婆", 而把 HTML 控制碼也複製上去, 而不是僅貼上純文字資料), 所以強烈建議各位先把這些複製資料貼在『計事本』這類的純文字處理器上, 再重新於『計事本』複製一遍, 這時再貼在網頁編輯程式上便不會產生錯誤了!

說明 : 會產生一個固定於左側的浮動選單, 不會因移動捲軸而變化

需下載的圖形及檔案 :

圖形
1.
  
2.
  
3.
註解 :

1.

 圖形部份按滑鼠右鍵選擇另存圖片; 檔案部份則按磁片圖形直接下載。
2. 上述圖片及檔案請勿變更檔名, 並與使用此 Java Script 的網頁同一目錄。
 
插在 <head> 與 </head> 之間 :

<style type="text/css">
<!--
.j_menu { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 9pt}
.j_menu1 { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 9pt; color: #FF6600; text-align: center}
a:active { text-decoration: none}
a:hover { text-decoration: none}
a:link { text-decoration: none}
a:visited { text-decoration: none}
-->
</style>
<SCRIPT language=javascript>
document.write("<style type=text/css>#master {LEFT: -100px; POSITION: absolute; TOP: 25px; VISIBILITY: visible; WIDTH: 200px; Z-INDEX: 2}#menu {LEFT: 100px; POSITION: absolute; TOP: 25px; VISIBILITY: visible; WIDTH: 18px; Z-INDEX: 5}#top {LEFT: 0px; POSITION: absolute; TOP: 25px; VISIBILITY: visible; WIDTH: 100px; Z-INDEX: 5}#screen {LEFT: 0px; POSITION: absolute; TOP: 31px; VISIBILITY: visible; WIDTH: 100px; Z-INDEX: 5}#screenlinks {LEFT: 0px; POSITION: absolute; TOP: 31px; VISIBILITY: visible; WIDTH: 100px; Z-INDEX: 5}</style>")
var ie = document.all ? 1 : 0
var ns = document.layers ? 1 : 0

if(ie){
document.write('<style type="text/css">')
document.write("#screen {filter:Alpha(Opacity=50);}")
document.write("</style>")
}

if(ns){
document.write('<style type="text/css">')
document.write("#master {clip:rect(0,150,250,0);}")
document.write("</style>")
}


var ie = document.all ? 1 : 0
var ns = document.layers ? 1 : 0


var master = new Object("element")
master.curLeft = -100; master.curTop = 10;
master.gapLeft = 0; master.gapTop = 0;
master.timer = null;

function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop){
clearTimeout(eval(layerName).timer)

if(eval(layerName).curLeft != fromLeft){
if((Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft){eval(layerName).curLeft = fromLeft}
else if(eval(layerName).curLeft < fromLeft){eval(layerName).curLeft = eval(layerName).curLeft + paceLeft}
else if(eval(layerName).curLeft > fromLeft){eval(layerName).curLeft = eval(layerName).curLeft - paceLeft}
if(ie){document.all[layerName].style.left = eval(layerName).curLeft}
if(ns){document[layerName].left = eval(layerName).curLeft}
}

if(eval(layerName).curTop != fromTop){
if((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop){eval(layerName).curTop = fromTop}
else if(eval(layerName).curTop < fromTop){eval(layerName).curTop = eval(layerName).curTop + paceTop}
else if(eval(layerName).curTop > fromTop){eval(layerName).curTop = eval(layerName).curTop - paceTop}
if(ie){document.all[layerName].style.top = eval(layerName).curTop}
if(ns){document[layerName].top = eval(layerName).curTop}
}


eval(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30)
}

function setPace(layerName, fromLeft, fromTop, motionSpeed){
eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft))/motionSpeed
eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop))/motionSpeed

moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop)
}

var expandState = 0

function expand(){
if(expandState == 0){setPace("master", 0, 10, 10); if(ie){document.menutop.src = "menub.gif"}; expandState = 1;}
else{setPace("master", -100, 10, 10); if(ie){document.menutop.src = "menu.gif"}; expandState = 0;}
}

document.write("<div id=master><div id=menu onmouseover=javascript:expand()><table border=0 cellpadding=0 cellspacing=0 width=18><tbody><tr><td width=100%><a href=javascript:expand() onFocus=this.blur()><img alt=點選這裡展開/關閉快捷選單 border=0 height=70 name=menutop src=menu.gif width=18></a></td></tr></tbody></table></div><div id=top><table border=0 cellpadding=0 cellspacing=0 width=100><tbody><tr><td width=100%><img border=0 height=6 src=top-m.gif width=100></td> </tr></tbody></table></div><div id=screen onmouseout=javascript:expand()><table border=0 cellpadding=5 cellspacing=0 width=100><tbody><tr><td bgcolor=#8FC0E0 width=100%><table bgcolor=#0090DF border=0 cellpadding=0 cellspacing=0 width=100% height=196><tbody><tr><td width=100%><table border=0 cellpadding=5 cellspacing=1 width=100%><tbody><tr> <td bgcolor=#B0CFDF width=100%><br><br><br><br><br></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div><div id=screenlinks ><table border=0 cellpadding=6 cellspacing=0 width=100><tbody><tr><td style=FILTER: alpha(opacity=90) width=100%><table bgcolor=#0090DF border=0 cellpadding=0 cellspacing=0 width=100% ><tbody> <tr><td width=100%><table border=0 cellpadding=6 cellspacing=1 width=100%><tbody class=j_menu><tr><td bgcolor=#E3E3E3 width=100%><div class=j_menu1>左側浮動選單</div><br>追根究柢<br><a href=http://easylearn.bhes.tpc.edu.tw/name/hardware/name_hardware.htm target=_blank>&nbsp;硬體</a><br><a href=http://easylearn.bhes.tpc.edu.tw/name/software/name_software.htm target=_blank>&nbsp;軟體</a><br>JAVA 特效<br><a href=http://easylearn.bhes.tpc.edu.tw/java/script.htm target=_blank>&nbsp;Script</a><br><a href=http://easylearn.bhes.tpc.edu.tw/java/applet.htm target=_blank>&nbsp;Applet</a><br>學生作品<br><a href=http://easylearn.bhes.tpc.edu.tw/student/homepage/stu_web.htm target=_blank>&nbsp;網頁設計</a><br><a href=http://easylearn.bhes.tpc.edu.tw/student/picture/stu_picture.htm target=_blank>&nbsp;童趣童話</a><br><a href=http://easylearn.bhes.tpc.edu.tw/student/study/study.htm target=_blank>&nbsp;電腦研習</a><br></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></div></div>");


if(ie){var sidemenu = document.all.master;}
if(ns){var sidemenu = document.master;}

function FixY(){
if(ie){sidemenu.style.top = document.body.scrollTop+10}
if(ns){sidemenu.top = window.pageYOffset+10}
}

setInterval("FixY()",100);
</SCRIPT>
註解 :

1.

 建議插在 </head> 的上一行
2.

紅色部份連結資訊的說明及網址
3.

連結資訊的多寡, 各位可自行增加

4. 藍色部份為底部表格大小, 請自行隨著連結資訊的多寡而增減
5. &nbsp;為半形空白, 可利用來分隔連結項目的層次
6. 紫色部份為 CSS 樣式定義, 各位可自行更改
 
插在 <body> 之中 :
 
註解 :

無
 
插在 <body> 與 </body> 之間 :
 
註解 :

無