글 수 300
2006.04.17 15:25:31 (*.105.151.226)
23304
<style>
<!--
주석중 "무시..."부분은 변경 불가 소스거나
수정시 (예:크기지정) 아무런 변화가 없을시
그리고 주석 붙인이가 모를때.. ^^;;
//-->
<!--
.menu
{
<!--
## 메인 메뉴 ##
무시..
배경색
메뉴 테두리 색
가로 크기
글자 크기
글자체
글자 속성 (기본:none , 굵게:bold , 이탤릭:italic)
또 무시..
마우스 포인트 모양 (MEw님께서 하시는 웹페이지 팁 게시판 14번 게시물 참고)
//-->
position:relative;
background-color:gold;
border:1px solid darkblue;
width:150;
font-size:11px;
font-family:verdana;
font:bold;
position:absolute;
cursor:hand;
}
.item_panel
{
<!--
## 하위 메뉴 ##
무시...
왼쪽 테두리 색
오른쪽 테두리 색
무시...
무시...
//-->
width:150;
border-left:1px solid darkblue;
border-right:1px solid darkblue;
clip:rect(0,150,0,0);
position:absolute;
}
.item_panel a
{
text-decoration:none;
color:black;
cursor:hand;
<!--
## 하위 메뉴 A ## (↑)
밑줄, 윗줄 유무 (없음:none , 밑줄:underline , 윗줄:overline)
기본 글자 색
마우스 포인트 모양 (MEw님께서 하시는 웹페이지 팁 게시판 14번 게시물 참고)
//-->
}
.item
{
background-color:lightyellow;
width:148;
font-size:10px;
font-family:verdana;
<!--
## 하위 메뉴 B ## (↑)
배경색
무시...
글자 크기
글자 체
//-->
}
//-->
</style>
<script language="javascript">
<!--
var height = 20; // 메인 메뉴의 세로크기
var iheight = 15; // 하위 메뉴의 세로크기
var over_bgc = "silver"; // 하위 메뉴에 마우스 올렸을때 배경색
var over_tc = "red"; // 하위 메뉴에 마우스 올렸을때 글자 색
var bgc = "lightyellow"; // 하위 메뉴에 마우스 내렸을때 배경색
var tc = "#000000"; // 하위 메뉴에 마우스 내렸을때 글자색
var speed = 0;
var timerID = "";
var N = (document.all) ? 0 : 1;
var width = 152
var self_menu = new Array();
function write_menu()
{
smc = 0; // count the position of the self_menu - (해석 불가로 원본 주석으로.. ^^;;)
document.write("<div style='position:absolute'>");
mn = 0;
mni = 1;
start = -1;
for(i=0;i<Link.length;i++)
{
la = Link[i].split("|"); // 메뉴 구성 부분에서 메뉴 구분 기호
if (la[0] == "0")
{
if(start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn;
self_menu[smc] = new Array(tmn,h,0,-2);
smc++;
mn--;
}
csmc = 0;
document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");
self_menu[smc] = new Array(mn,height,0,mni);
smc++;
mni++;
mn+=height;
start = 1;
}
else
{
if(start == 1)
{
if(N)mn+=2;
document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
start = 0;
}
document.write("<a href='"+la[2]+"'");
if (la[3] != "") document.write(" target='" + la[3] + "' ");
document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
if (N) document.write(";width:150");
document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>");
csmc++;
}
}
if (start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn + 5;
self_menu[smc] = new Array(tmn,h,0);
name = "down" + (self_menu.length-1);
obj = document.getElementById(name);
obj.style.borderBottomColor = "darkblue";
obj.style.borderBottomWidth = 1;
obj.style.borderBottomStyle = "solid";
}
document.write("</div>");
}
function color(obj)
{
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc
}
function uncolor(obj)
{
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc
}
function pull_down(nr,c)
{
if (timerID == "")
{
to = self_menu[nr+1][1]
begin = nr + 2;
if (timerID != "") clearTimeout(timerID);
if (self_menu[nr+1][2] == 0)
{
self_menu[nr+1][2] = 1;
if(nr == self_menu.length-2)
{
to++;
}
epull_down(begin,to,0);
}
else
{
to = 0;
self_menu[nr+1][2] = 0;
name = "down"+(nr+2);
open_item = 0;
for(i=0;i<nr;i++)
{
if(self_menu[i][2] == 1)
{
open_item += self_menu[i][1];
}
}
if (N == false)
{
open_item-= (c*1);
}
if (nr== self_menu.length-2)
{
val = self_menu[self_menu.length-1][1];to=-1;
}
else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
epull_up(begin,to,val);
}
}
}
function epull_down(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
for (i=nr;i<self_menu.length;i++)
{
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)+1;
}
nowv++;
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}
function epull_up(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
for (i=nr;i<self_menu.length;i++)
{
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)-1;
}
nowv--;
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}
function startup(nr)
{
write_menu();
if (nr != 0)
{
for(i=0;i<self_menu.length;i++)
{
if(self_menu[i][3] == nr) pull_down(i,nr)
i==self_menu.length;
}
}
}
// 메뉴 구성 부분
// 메뉴 구성 방법 - ((Z)* : 번호 Z에 대한 참고사항)
// Link[X] = "형식|이름|경로|타겟";
// (1) (2) (3) (4) (5)
// 1 : 링크 번호로 X부분에 0부터 차례대로 나가면 됨
// 2 : 링크 형식으로 0은 메인 메뉴 1은 하위메뉴로 구분된다
// (2)* : 형식 0으로 했을시에는 경로와 타겟이 없어야 함 → "0|이름";
// 3 : 메뉴 이름으로 각 메뉴에 해당되는 이름을 적어준다.
// 4 : 해당 메뉴의 경로로 #_url_here을 지우고 해당 경로를 적으면 된다.
// 5 : 타겟을 정하는 부분이다.
// (5)* : 타겟은 _top(현재창에서 열기)와 _blank(새창으로) 그리고 프레임의 이름을 적어주면 된다.
// 하지만 아래 예제 메뉴처럼 타겟이 적혀지지 않았을때는 타겟 _top과 같은 역활을 함
var Link = new Array();
Link[0] = "0|Menu A";
Link[1] = "1|Menu A-a|#_url_here|";
Link[2] = "1|Menu A-b|#_url_here|";
Link[3] = "1|Menu A-c|#_url_here|";
Link[4] = "0|Menu B";
Link[5] = "1|Menu B-a|#_url_here|";
startup(1); // 로딩시 열리는 메뉴 (0:열리지 않음)
//-->
</script>
------------------------------------------------
<!--
주석중 "무시..."부분은 변경 불가 소스거나
수정시 (예:크기지정) 아무런 변화가 없을시
그리고 주석 붙인이가 모를때.. ^^;;
//-->
<!--
.menu
{
<!--
## 메인 메뉴 ##
무시..
배경색
메뉴 테두리 색
가로 크기
글자 크기
글자체
글자 속성 (기본:none , 굵게:bold , 이탤릭:italic)
또 무시..
마우스 포인트 모양 (MEw님께서 하시는 웹페이지 팁 게시판 14번 게시물 참고)
//-->
position:relative;
background-color:gold;
border:1px solid darkblue;
width:150;
font-size:11px;
font-family:verdana;
font:bold;
position:absolute;
cursor:hand;
}
.item_panel
{
<!--
## 하위 메뉴 ##
무시...
왼쪽 테두리 색
오른쪽 테두리 색
무시...
무시...
//-->
width:150;
border-left:1px solid darkblue;
border-right:1px solid darkblue;
clip:rect(0,150,0,0);
position:absolute;
}
.item_panel a
{
text-decoration:none;
color:black;
cursor:hand;
<!--
## 하위 메뉴 A ## (↑)
밑줄, 윗줄 유무 (없음:none , 밑줄:underline , 윗줄:overline)
기본 글자 색
마우스 포인트 모양 (MEw님께서 하시는 웹페이지 팁 게시판 14번 게시물 참고)
//-->
}
.item
{
background-color:lightyellow;
width:148;
font-size:10px;
font-family:verdana;
<!--
## 하위 메뉴 B ## (↑)
배경색
무시...
글자 크기
글자 체
//-->
}
//-->
</style>
<script language="javascript">
<!--
var height = 20; // 메인 메뉴의 세로크기
var iheight = 15; // 하위 메뉴의 세로크기
var over_bgc = "silver"; // 하위 메뉴에 마우스 올렸을때 배경색
var over_tc = "red"; // 하위 메뉴에 마우스 올렸을때 글자 색
var bgc = "lightyellow"; // 하위 메뉴에 마우스 내렸을때 배경색
var tc = "#000000"; // 하위 메뉴에 마우스 내렸을때 글자색
var speed = 0;
var timerID = "";
var N = (document.all) ? 0 : 1;
var width = 152
var self_menu = new Array();
function write_menu()
{
smc = 0; // count the position of the self_menu - (해석 불가로 원본 주석으로.. ^^;;)
document.write("<div style='position:absolute'>");
mn = 0;
mni = 1;
start = -1;
for(i=0;i<Link.length;i++)
{
la = Link[i].split("|"); // 메뉴 구성 부분에서 메뉴 구분 기호
if (la[0] == "0")
{
if(start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn;
self_menu[smc] = new Array(tmn,h,0,-2);
smc++;
mn--;
}
csmc = 0;
document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");
self_menu[smc] = new Array(mn,height,0,mni);
smc++;
mni++;
mn+=height;
start = 1;
}
else
{
if(start == 1)
{
if(N)mn+=2;
document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
start = 0;
}
document.write("<a href='"+la[2]+"'");
if (la[3] != "") document.write(" target='" + la[3] + "' ");
document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
if (N) document.write(";width:150");
document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>");
csmc++;
}
}
if (start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn + 5;
self_menu[smc] = new Array(tmn,h,0);
name = "down" + (self_menu.length-1);
obj = document.getElementById(name);
obj.style.borderBottomColor = "darkblue";
obj.style.borderBottomWidth = 1;
obj.style.borderBottomStyle = "solid";
}
document.write("</div>");
}
function color(obj)
{
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc
}
function uncolor(obj)
{
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc
}
function pull_down(nr,c)
{
if (timerID == "")
{
to = self_menu[nr+1][1]
begin = nr + 2;
if (timerID != "") clearTimeout(timerID);
if (self_menu[nr+1][2] == 0)
{
self_menu[nr+1][2] = 1;
if(nr == self_menu.length-2)
{
to++;
}
epull_down(begin,to,0);
}
else
{
to = 0;
self_menu[nr+1][2] = 0;
name = "down"+(nr+2);
open_item = 0;
for(i=0;i<nr;i++)
{
if(self_menu[i][2] == 1)
{
open_item += self_menu[i][1];
}
}
if (N == false)
{
open_item-= (c*1);
}
if (nr== self_menu.length-2)
{
val = self_menu[self_menu.length-1][1];to=-1;
}
else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
epull_up(begin,to,val);
}
}
}
function epull_down(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
for (i=nr;i<self_menu.length;i++)
{
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)+1;
}
nowv++;
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}
function epull_up(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
for (i=nr;i<self_menu.length;i++)
{
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)-1;
}
nowv--;
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}
function startup(nr)
{
write_menu();
if (nr != 0)
{
for(i=0;i<self_menu.length;i++)
{
if(self_menu[i][3] == nr) pull_down(i,nr)
i==self_menu.length;
}
}
}
// 메뉴 구성 부분
// 메뉴 구성 방법 - ((Z)* : 번호 Z에 대한 참고사항)
// Link[X] = "형식|이름|경로|타겟";
// (1) (2) (3) (4) (5)
// 1 : 링크 번호로 X부분에 0부터 차례대로 나가면 됨
// 2 : 링크 형식으로 0은 메인 메뉴 1은 하위메뉴로 구분된다
// (2)* : 형식 0으로 했을시에는 경로와 타겟이 없어야 함 → "0|이름";
// 3 : 메뉴 이름으로 각 메뉴에 해당되는 이름을 적어준다.
// 4 : 해당 메뉴의 경로로 #_url_here을 지우고 해당 경로를 적으면 된다.
// 5 : 타겟을 정하는 부분이다.
// (5)* : 타겟은 _top(현재창에서 열기)와 _blank(새창으로) 그리고 프레임의 이름을 적어주면 된다.
// 하지만 아래 예제 메뉴처럼 타겟이 적혀지지 않았을때는 타겟 _top과 같은 역활을 함
var Link = new Array();
Link[0] = "0|Menu A";
Link[1] = "1|Menu A-a|#_url_here|";
Link[2] = "1|Menu A-b|#_url_here|";
Link[3] = "1|Menu A-c|#_url_here|";
Link[4] = "0|Menu B";
Link[5] = "1|Menu B-a|#_url_here|";
startup(1); // 로딩시 열리는 메뉴 (0:열리지 않음)
//-->
</script>
------------------------------------------------