묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
서브 레이어요
2003.06.13 18:03
어떻게 만드는지 알려주세요
<!-- 롤오버 적용 시작 -->
<script language=javascript>
function trans(id,after)
{
eval(id+'.filters.blendTrans.stop();');
eval(id+'.filters.blendTrans.Apply();');
eval(id+'.src="'+after+'";');
eval(id+'.filters.blendTrans.Play();');
}
function Find_Obj(n, d) {
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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=Find_Obj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function Show_Hide() {
var i,p,v,obj,args=Show_Hide.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=Find_Obj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
<!-- 롤오버 적용 마침 -->
이번엔 <body>에 레이어를 적용 시켜야 겠지요..
<body onLoad="Show_Hide('Layer1','','hide'+ '+ ','Layer2','','hide','Layer3','','hide','Layer4','','hide')">
이렇게 수정해주세요.. 모두..숨김이라는 말이예요..
메뉴가 더 늘었다면.. ,'Layer5','','hide',...추가 시켜주셔야 해요 ^^;
요거 잘못하믄 오류생기니깐 눈 크으~게에 뜨고 하셔요 ^^;
이제 서브 메뉴를 만들어봅시다 ^^
아래 소스를 잘 봐주세요
<!-- 서브 메뉴 시작 -->
<div id="Layer1" style="background-color:white; width:레이어가로px; height:레이어세로px; position:absolute; left:레이어 시작 위치(왼쪽)px; top:레이어 시작 위치(위)px; z-index:2; visibility:hidden; layer-background-color:레이어 배경 색; ">
<table>
<tr>
<td>
<a href="링크경로">서브 메뉴 1</a></td>
</tr></table>
</div>
<div id="Layer2" style="background-color:white; width:200px; height:200px; position:absolute; left:420px; top:65px; z-index:3; visibility:hidden; layer-background-color:white; ">
<table><tr>
<td><a href="#">서브메뉴 2-1</a> <a href="#">서브메뉴 2-2</a></td>
</tr></table>
</div>
<div id="Layer3" style="background-color:white; width:200px; height:200px; position:absolute; left:490px; top:65px; z-index:4; visibility:hidden; layer-background-color:white; ">
<table><tr>
<td><a href="#">서브메뉴3-1</a> <a href="#">서브메뉴3-2</a></td>
</tr></table>
</div>
<div id="Layer4" style="background-color:white; width:200px; height:200px; position:absolute; left:560px; top:65px; z-index:5; visibility:hidden; layer-background-color:white; ">
<table><tr>
<td><a href="#">서브메뉴4-1</a> <a href="#">서브메뉴4-2</a></td>
</tr></table>
</div>
<!-- 서브 메뉴 마침-->
이해하셨나요??
그럼 이제 주메뉴를.. 만들께요..
주메뉴는 롤오버가 되야겠죠?
<!-- 주 메뉴 시작 -->
<a href="#">
<img src="제일 처음 보일 이미지" id=menu1 style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','show','Layer2','','hide','Layer3','','hide','Layer4','','hide');trans('menu1','마우스 올렸을때 나타날 이미지');" onMouseOut="trans('menu1','마우스 내렸을때 나타날 이미지');" border=0></a>
<a href="#">
<img src="제일 처음 보일 이미지" id=menu2 style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer2','','show','Layer3','','hide','Layer4','','+ 'hide');trans('menu2','마우스 올렸을때 나타날 이미지');" onMouseOut="trans('menu2'+ ','마우스 내렸을때 나타날 이미지');" border=0></a>
<a href="#">
<img src="제일 처음 보일 이미지" id=menu3 style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer2','','hide','Layer3','','show','Layer4','','hide');trans('menu3','마우스 올렸을때 나타날 이미지');" onMouseOut="trans('menu3','마우스 내렸을때 나타날 이미지');" border=0></a>
<a href="#">
<img src="제일 처음 보일 이미지" id=menu4 style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','+ '','hide','Layer2','','hide','Layer3','','hide','Layer4','','+ 'show');trans('menu4','마우스 올렸을때 나타날 이미지');" onMouseOut="trans('menu4','마우스 내렸을때 나타날 이미지');" border=0></a>
<!-- 주메뉴 마침 -->
약간 번거롭긴 한데요 ^^;;
소스만 잘 파악 해주신다면..어렵지 않을 것 같아요 ^^;;
그럼 이쁜 홈페이지 만드세요..