<style> #main_panel { border:1px solid darkblue; position:relative; overflow:hidden; } .head_item { background-color:ffccff; font-size:8px; font-family:Ms Sans Serif; font:bold; border-top:1px solid darkblue; border-bottom:1px solid darkblue; position:absolute; left:0px; cursor:hand; text-align:left; } .item { background-color:ffffcc; font-family:Ms Sans Serif; font-size:8px; left:0px; position:relative; text-align:left; } .item_panel { position:absolute; background-color:ffffcc; left:0px; } .item_panel a { text-decoration:none; color:black; cursor:hand; } </style> <script language="JavaScript" > var height = 125; var vwidth = 150; var speed = 0; var step =2; var hheight = 16; // heigth of a header item var iheight = 15; // heigth of a item var bgc = "ffffcc" // background color of the item var tc = "000000" // text color of the item var textdec = "none"; var over_bgc = "ccccff"; var over_tc = "ff6633"; var over_textdec = "none"; // underline var open = -1; var N = (document.all) ? 0 : 1; var Link_count = 0; var ntop = 0; var items = false var z = 0; var hnr = 1; var timerID = null; var link_array = new Array(); function write_menu() { document.write("<div id=main_panel style='height:") if (N) document.write(height); else document.write(height-2); document.write(";width:"); if (N) document.write(vwidth) else document.write(vwidth-2) document.write("'>"); cl =0; for(i=0;i<Link.length;i++) { la = Link[i].split("|"); if(la[0] == "0") { if (items == true) {document.write("</div>");items = false;} document.write("<div class='head_item' id='move"+cl+"' style='height:"+hheight+";width:"+vwidth+";top:"+(ntop-1)+";z-index:"+z+"' onclick='move("+cl+","+hnr+")'> "+la[1]+"</div>"); link_array[cl] = new Array("up",0,hnr); cl++;hnr++; ntop += hheight-1; z++; } else { cheight = height - ntop + 1; if (items == false) {document.write("<div class='item_panel' id='move"+cl+"' style='height:"+cheight+"px;width:"+vwidth+";top:") if (N) document.write(ntop+2); else document.write(ntop); document.write(";z-index:"+z+"'>"); z++; link_array[cl] = new Array("up",0,""); cl++; } document.write("<a href='"+la[2]+"'"); if (la[3] != "") document.write(" target='" + la[3] + "' "); document.write(" onmouseover=color('item"+i+"') onmouseout=uncolor('item"+i+"') ><div class='item' id='item"+i+"' style='height:"+iheight+";width:"+vwidth+"'>  "+la[1]+"</div></a>"); items = true; } } document.write("</div>"); if (items == true) {document.write("</div>");} } function color(obj) { document.getElementById(obj).style.backgroundColor = over_bgc; document.getElementById(obj).style.color = over_tc document.getElementById(obj).style.textDecoration = over_textdec; } function uncolor(obj) { document.getElementById(obj).style.backgroundColor = bgc; document.getElementById(obj).style.color = tc; document.getElementById(obj).style.textDecoration = textdec; } function move(idnr,hid) { if ((idnr != open)&& (timerID == null)) { if(link_array[idnr][0] == "up") { down = height - (hid * hheight) - ((hnr -(hid+1))* hheight) + 2; if(N) down+=2; dmover(idnr+2,down); } else { up = height - ((hid -1) * hheight) -((hnr - (hid))* hheight) +2; if(N) up+=2; umover(idnr,up); } open = idnr; } } function dmover(idnr,down) { for (i=idnr;i<link_array.length;i++) { if(link_array[i][0] == "up") { txt_obj = "move" + i document.getElementById(txt_obj).style.top = parseInt(document.getElementById(txt_obj).style.top) + step; } } down-= step; if(down > 0)timerID = setTimeout("dmover("+idnr+","+down+")",speed); else { for (i=idnr;i<link_array.length;i++) {link_array[i][0] = "down";} timerID = null; } } function umover(idnr,up) { for (i=0;i<(idnr+2);i++) { if(link_array[i][0] == "down") { txt_obj = "move" + i document.getElementById(txt_obj).style.top = parseInt(document.getElementById(txt_obj).style.top) - step; } } up-=step; if(up > 0)timerID = setTimeout("umover("+idnr+","+up+")",speed); else { for (i=0;i<(idnr+2);i++) {link_array[i][0] = "up";} timerID = null; } } function start(idnr) { write_menu(); for(i=0;i<link_array.length;i++) { if (link_array[i][2] == idnr) { pull = i; i = link_array.length; } } move(pull,idnr); } </script>

<!-- เลข 0 คือหัวข้อใหญ่ และ เลข 1 คือหัวข้อย่อยครับ (เลข 0 และ 1 จะอยู่หน้า l ครับ) และ คุณสามารถเพิ่มหัวข้อของ MENU ได้เองด้วยนะครับ --> <script language="JavaScript"> var Link = new Array(); Link[0] = "0|หน้าภาษา JAVASCRIPT"; Link[1] = "1|รวม CODE JS|http://www.geocities.com/namkiatv/java|_blank"; Link[2] = "1|วิธีการนำ CODE JS ไปใช้|http://www.geocities.com/namkiatv/java/stepforcopycode|_blank"; Link[3] = "1|แจ้งเรื่อง CODE JS มีปัญหา|http://www.geocities.com/namkiatv/reporterror|_blank"; Link[4] = "0|เล่นเกมผ่าน Internet"; Link[5] = "1|เป็นเกมที่ต้องใช้ความไว|http://www.geocities.com/namkiatv/playgame/fast|_blank"; Link[6] = "1|เป็นเกมที่ไม่ต้องใช้ความไว|http://www.geocities.com/namkiatv/playgame/slow|_blank" Link[7] = "0|ที่นียังมีอย่างอื่นอีก"; Link[8] = "1|เป็นเรื่องที่ใช้ในการเรียนได้|http://www.geocities.com/namkiatv/more/knowledge|_blank"; Link[9] = "1|เป็นเรื่องที่บันเทิง|http://www.geocities.com/namkiatv/more/entertainment|_blank"; Link[10] = "1|เป็นเรื่องของการบริการ|http://www.geocities.com/namkiatv/more/service|_blank"; Link[11] = "0|DOWNLOAD"; Link[12] = "1|DOWNLOAD ICON รูปต่างๆ|http://www.geocities.com/namkiatv/download/downloadicon|_blank"; Link[13] = "1|DOWNLOAD SKIN WINAMP|http://www.geocities.com/namkiatv/download/downloadskinwinamp|_blank"; Link[14] = "1|DOWNLOAD MIDI|http://www.geocities.com/namkiatv/download/downloadmidi|_blank"; start(1); </script>