http://oxtag.com/html/ex/menu/menu20041124.html
| <style> /* 메뉴판의 전체 테두리 설정 */ #main_panel { border:1px solid deeppink; position:relative; overflow:hidden; } /* 주메뉴의 스타일 설정 */ .head_item { background-color:pink; font-size:12px; font-family:굴림; font:bold; border-top:1px solid deeppink; border-bottom:1px solid deeppink; position:absolute; left:0px; text-align:left; } /* 부메뉴의 스타일 설정 */ .item { background-color:lightyellow; font-family:굴림; font-size:12px; left:0px; position:relative; text-align:left; } .item_panel { position:absolute; background-color:lightyellow; left:0px; } .item_panel a { text-decoration:none; color:deeppink; } </style> <script language="JavaScript"> var height = 200; //메뉴상자의 높이 var vwidth = 150; // 메뉴상자의 가로크기 var speed = 0; var step =2; var hheight = 20; // 메인메뉴 항목의 높이 var iheight = 15; // 각 부항목의 높이 var bgc = "lightyellow" // 배경색상 var tc = "black" // 글자색상 var over_bgc = "lightgreen"; // 마우스 오버시 부메뉴의 배경색상 var over_tc = "red"; // 마우스 오버시 부메뉴의 글자색상 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='cursor:hand;padding:3px;height:"+hheight+";width:"+vwidth+";top:"+(ntop-1)+";z-index:"+z+"' onMouseover='move("+cl+","+hnr+");this.style.backgroundColor=\"#2f4f4f\"' onMouseOut=\"this.style.backgroundColor=''\"> "+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='padding:3px;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+"') style='cursor:hand;'><div class='item' id='item"+i+"' style='padding:2px;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 return true; } function uncolor(obj) { document.getElementById(obj).style.backgroundColor = bgc; document.getElementById(obj).style.color = tc; } 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> <script language="JavaScript"> var Link = new Array(); // Link[번호] = "구분|제목:URL|타겟"; // 구분 : 0 = 주메뉴, 1 = 부메뉴 Link[0] = "0|태그피아"; Link[1] = "1|태그피아|http://oxtag.com|_blank"; Link[2] = "1|태그피아|http://oxtag.com|_blank"; Link[3] = "1|태그피아|http://oxtag.com|_blank"; Link[4] = "1|태그피아|http://oxtag.com|_blank"; Link[5] = "0|검색"; Link[6] = "1|야후|http://yahoo.co.kr|_blank"; Link[7] = "1|네이버|http://naver.com|_blank" Link[8] = "0|메일"; Link[9] = "1|다음|http://daum.net|_blank"; Link[10] = "1|다모임|http://damoim.net|_blank"; Link[11] = "0|태그피아"; Link[12] = "1|태그피아|http://oxtag.com|_blank"; Link[13] = "0|태그피아"; Link[14] = "1|태그피아|http://oxtag.com|_blank"; start(1); </script> |
'인터넷관련' 카테고리의 다른 글
| 갤러리 꾸미기 (0) | 2008.02.12 |
|---|---|
| 텍스트나 이미지에 마우스 올리면 알림 메시지 (0) | 2008.02.12 |
| 펼침 메뉴 만들기 (0) | 2008.02.12 |
| 체크박스 전체선택/해제 2 (0) | 2008.02.12 |
| 상하로 움직이는 메뉴 (0) | 2008.02.02 |
| 빙글빙글 도는 마우스 커서 (0) | 2008.02.02 |
| 튀어나와 보이는 글씨,들어가 보이는 글씨 (0) | 2008.02.02 |
| 튀어나와 보이는 글씨,들어가 보이는 글씨 (0) | 2008.02.02 |
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
)
