롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐)
2009.01.20 00:33
6630
0
이온디
첨부파일
https://imweb.eond.com/coding/163961 
1. 첫째..!! 아래의 소스코드를 <HEAD>와 </HEAD> 사이에 붙여 넣으세요
<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>
<!------------------------- 여기까지 ---------------------------------->
2. 두번째 <BODY> 태그안에 있는 코드를 복사 해 넣으세요
여기에서는 부메뉴 레이어를 6개로 설정 하였습니다
각자 메뉴갯수에 따라 설정하시면 됩니다.. 8개로 하시려면 'Layer7','','hide', 'Layer8','','hide' 을 추가하면 되곘죠??
<body topmargin="3" leftmargin="0" onLoad="Show_Hide('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide')">
<!------------------------- 여기까지 ---------------------------------->
3. 세번째..!! 아래의 방법으로 원하는 위치에 복사 해 넣으세요
하위(부)메뉴 설정 영역입니다
각각의 부메뉴의 위치, 배경색, 내용, 링크 등을 설정 합니다
부메뉴 레이어를 추가하려면 Layer9, Layer10 ... 처럼 순서대로 추가 하세요
left는 왼쪽에서 어느 위치에 시작할것인가. 한마디로 왼쪽여백이죠.. 만약 왼쪽 정렬을 하실분은 right대신 left로 하여서 수치를 설정해주심 되겠죠.. top도 마찬가지 홈 메뉴바 위치에 따라서 조절하세요..
제 홈을 예를들어서 하겠습니다.. 메뉴 글자 색깔을 바꾸시려면 여기서 바꾸셔야곘죠??
<!-- 첫번째 부메뉴 -->
<div id="Layer1" style="position:absolute; right:70px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 550px; height: 11px;">
<table><tr>
<td><a href="#">첫번째 메뉴</a> | <a href="#">첫번째 메뉴</a> | <a href="#">첫번째 메뉴</a></td>
</tr></table>
</div>
<!-- 두번째 부메뉴 -->
<div id="Layer2" style="position:absolute;right:15px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 600px; height: 11px;">
<table><tr>
<td><a href="#">두번째 메뉴</a> | <a href="#">두번째 메뉴</a> | <a href="#">두번째 메뉴</a></td>
</tr></table>
</div>
<!-- 세번째 부메뉴 -->
<div id="Layer3" style="position:absolute;right:30px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 580px; height: 11px;">
<table><tr>
<td><a href="#">세번째 메뉴</a> | <a href="#">세번째 메뉴</a> | <a href="#">세번째 메뉴</a></td>
</tr></table>
</div>
<!-- 네번째 부메뉴 -->
<div id="Layer4" style="position:absolute;right:100px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 380px; height: 11px;">
<table><tr>
<td><a href="#">네번째 메뉴</a> | <a href="#">네번째 메뉴</a> | <a href="#">네번째 메뉴</a></td>
</tr></table>
</div>
<!-- 다섯번째 부메뉴 -->
<div id="Layer5" style="position:absolute; right:13px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 481px; height: 11px;">
<table><tr>
<td><a href="#">다섯번째 메뉴</a> | <a href="#">다섯번째 메뉴</a> | <a href="#">다섯번째 메뉴</a></td>
</tr></table>
</div>
<!-- 여섯번째 부메뉴 -->
<div id="Layer6" style="position:absolute; right:20px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 330px; height: 11px;">
<table><tr>
<td><a href="#">여섯번째 메뉴</a> | <a href="#">여섯번째 메뉴</a> | <a href="#">여섯번째 메뉴</a> | <a href="#">여섯번째 메뉴</a> | <a href="#">여섯번째 메뉴</a></td>
</tr></table>
</div>
-------------- 잠깐 -----------------
여기서 하위메뉴에 마우스 온 한 다음 아웃했을때 하위메뉴가 나타났었는데 사라지게 수정해 보겠습니다..
<!-- 첫번째 부메뉴 -->
<div id="Layer1" style="position:absolute; right:70px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 550px; height: 11px;" onMouseOver="Show_Hide('Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide', 'Layer1','','show');" onMouseOut="Show_Hide('Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer1','','hide');">
<td></td></div>
위처럼 수정하시면 되겠죠?? 자세히 보시면 쉽습니다..
단 하위메뉴에서 마우스 아웃시 하위메뉴가 사라집니다
롤오버 이미지에서 아웃되더라도 하위메뉴 사라지지 않음 ㅡㅡ;
<!---- 메인메뉴 설정 영역입니다
자세히 보셔야 할 사항입니다...
마우스 오버시와 아웃시 레이어 설정입니다
이미지의 아이디 (id)와 이미지에 마우스를 대었을대 보일레이어(show)와 숨겨둘레이어(hide) 설정을 주의깊게 본 뒤 수정 하세요
--->
<a href="#">
<img src="롤오버이미지_1.jpg" id=aa style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer1','','show');trans('aa','롤오버이미지_1_on.jpg');" onMouseOut="trans('aa','롤오버이미지_1.jpg');" border=0></a></td>
<td>
<a href="#">
<img src="롤오버이미지_2.jpg" id=bb style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer2','','show');trans('bb','롤오버이미지_2_on.jpg');" onMouseOut="trans('bb','롤오버이미지_2.jpg');" border=0></a></td>
<td>
<a href="#">
<img src="롤오버이미지_3.jpg" id=cc style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer2','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer3','','show');trans('cc','롤오버이미지_3_on.jpg');" onMouseOut="trans('cc','롤오버이미지_3.jpg');" border=0></a></td>
<td>
<a href="#">
<img src="롤오버이미지_4.jpg" id=dd style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer5','','hide','Layer6','','hide','Layer4','','show');trans('dd','롤오버이미지_4_on.jpg');" onMouseOut="trans('dd','롤오버이미지_4.jpg');" border=0></a></td>
<td>
<a href="#">
<img src="롤오버이미지_5.jpg" id=ee style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer6','','hide','Layer5','','show');trans('ee','롤오버이미지_5_on.jpg');" onMouseOut="trans('ee','롤오버이미지_5.jpg');" border=0></a></td>
<td>
<a href="#">
<img src="롤오버이미지_6.jpg" id=ff style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','show');trans('ff','롤오버이미지_6_on.jpg');" onMouseOut="trans('ff','롤오버이미지_6.jpg');" border=0></a></td>
</tr>
</table>
<!------------------------- 여기까지 ---------------------------------->
<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>
<!------------------------- 여기까지 ---------------------------------->
2. 두번째 <BODY> 태그안에 있는 코드를 복사 해 넣으세요
여기에서는 부메뉴 레이어를 6개로 설정 하였습니다
각자 메뉴갯수에 따라 설정하시면 됩니다.. 8개로 하시려면 'Layer7','','hide', 'Layer8','','hide' 을 추가하면 되곘죠??
<body topmargin="3" leftmargin="0" onLoad="Show_Hide('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide')">
<!------------------------- 여기까지 ---------------------------------->
3. 세번째..!! 아래의 방법으로 원하는 위치에 복사 해 넣으세요
하위(부)메뉴 설정 영역입니다
각각의 부메뉴의 위치, 배경색, 내용, 링크 등을 설정 합니다
부메뉴 레이어를 추가하려면 Layer9, Layer10 ... 처럼 순서대로 추가 하세요
left는 왼쪽에서 어느 위치에 시작할것인가. 한마디로 왼쪽여백이죠.. 만약 왼쪽 정렬을 하실분은 right대신 left로 하여서 수치를 설정해주심 되겠죠.. top도 마찬가지 홈 메뉴바 위치에 따라서 조절하세요..
제 홈을 예를들어서 하겠습니다.. 메뉴 글자 색깔을 바꾸시려면 여기서 바꾸셔야곘죠??
<!-- 첫번째 부메뉴 -->
<div id="Layer1" style="position:absolute; right:70px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 550px; height: 11px;">
<table><tr>
<td><a href="#">첫번째 메뉴</a> | <a href="#">첫번째 메뉴</a> | <a href="#">첫번째 메뉴</a></td>
</tr></table>
</div>
<!-- 두번째 부메뉴 -->
<div id="Layer2" style="position:absolute;right:15px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 600px; height: 11px;">
<table><tr>
<td><a href="#">두번째 메뉴</a> | <a href="#">두번째 메뉴</a> | <a href="#">두번째 메뉴</a></td>
</tr></table>
</div>
<!-- 세번째 부메뉴 -->
<div id="Layer3" style="position:absolute;right:30px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 580px; height: 11px;">
<table><tr>
<td><a href="#">세번째 메뉴</a> | <a href="#">세번째 메뉴</a> | <a href="#">세번째 메뉴</a></td>
</tr></table>
</div>
<!-- 네번째 부메뉴 -->
<div id="Layer4" style="position:absolute;right:100px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 380px; height: 11px;">
<table><tr>
<td><a href="#">네번째 메뉴</a> | <a href="#">네번째 메뉴</a> | <a href="#">네번째 메뉴</a></td>
</tr></table>
</div>
<!-- 다섯번째 부메뉴 -->
<div id="Layer5" style="position:absolute; right:13px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 481px; height: 11px;">
<table><tr>
<td><a href="#">다섯번째 메뉴</a> | <a href="#">다섯번째 메뉴</a> | <a href="#">다섯번째 메뉴</a></td>
</tr></table>
</div>
<!-- 여섯번째 부메뉴 -->
<div id="Layer6" style="position:absolute; right:20px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 330px; height: 11px;">
<table><tr>
<td><a href="#">여섯번째 메뉴</a> | <a href="#">여섯번째 메뉴</a> | <a href="#">여섯번째 메뉴</a> | <a href="#">여섯번째 메뉴</a> | <a href="#">여섯번째 메뉴</a></td>
</tr></table>
</div>
-------------- 잠깐 -----------------
여기서 하위메뉴에 마우스 온 한 다음 아웃했을때 하위메뉴가 나타났었는데 사라지게 수정해 보겠습니다..
<!-- 첫번째 부메뉴 -->
<div id="Layer1" style="position:absolute; right:70px; top:84px; ; ; z-index:1; visibility: hidden; background-color:#EEEEEE; width: 550px; height: 11px;" onMouseOver="Show_Hide('Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide', 'Layer1','','show');" onMouseOut="Show_Hide('Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer1','','hide');">
<td></td></div>
위처럼 수정하시면 되겠죠?? 자세히 보시면 쉽습니다..
단 하위메뉴에서 마우스 아웃시 하위메뉴가 사라집니다
롤오버 이미지에서 아웃되더라도 하위메뉴 사라지지 않음 ㅡㅡ;
<!---- 메인메뉴 설정 영역입니다
자세히 보셔야 할 사항입니다...
마우스 오버시와 아웃시 레이어 설정입니다
이미지의 아이디 (id)와 이미지에 마우스를 대었을대 보일레이어(show)와 숨겨둘레이어(hide) 설정을 주의깊게 본 뒤 수정 하세요
--->
<a href="#">
<img src="롤오버이미지_1.jpg" id=aa style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer1','','show');trans('aa','롤오버이미지_1_on.jpg');" onMouseOut="trans('aa','롤오버이미지_1.jpg');" border=0></a></td>
<td>
<a href="#">
<img src="롤오버이미지_2.jpg" id=bb style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer2','','show');trans('bb','롤오버이미지_2_on.jpg');" onMouseOut="trans('bb','롤오버이미지_2.jpg');" border=0></a></td>
<td>
<a href="#">
<img src="롤오버이미지_3.jpg" id=cc style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer2','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer3','','show');trans('cc','롤오버이미지_3_on.jpg');" onMouseOut="trans('cc','롤오버이미지_3.jpg');" border=0></a></td>
<td>
<a href="#">
<img src="롤오버이미지_4.jpg" id=dd style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer5','','hide','Layer6','','hide','Layer4','','show');trans('dd','롤오버이미지_4_on.jpg');" onMouseOut="trans('dd','롤오버이미지_4.jpg');" border=0></a></td>
<td>
<a href="#">
<img src="롤오버이미지_5.jpg" id=ee style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer6','','hide','Layer5','','show');trans('ee','롤오버이미지_5_on.jpg');" onMouseOut="trans('ee','롤오버이미지_5.jpg');" border=0></a></td>
<td>
<a href="#">
<img src="롤오버이미지_6.jpg" id=ff style="filter:blendTrans(duration=0.5)" onMouseOver="Show_Hide('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','show');trans('ff','롤오버이미지_6_on.jpg');" onMouseOut="trans('ff','롤오버이미지_6.jpg');" border=0></a></td>
</tr>
</table>
<!------------------------- 여기까지 ---------------------------------->
글목록
코멘트 0
접기/펴기 | 댓글 새로고침
정말 이 글을 삭제하실건가요? -_-...
닫기
이온디
"롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐)"
"롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐)"
Total 235 articles in 5 / 12 pages
| 제목 |
날짜 |
|---|---|---|
 | 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) | 2018/01/03 |
|
| jQuery를 배울수 있는 동네들입니다. | 2013/08/09 |
|
| 관련 링크 [1] | 2010/05/23 |
| 155 | 주석 표시하기 | 2009/01/14 |
| 154 | [Script] 롤오버 메뉴 만들기 [1] | 2009/01/18 |
| 153 | [Script] div 높이 100% 맞추기 | 2009/01/18 |
| 152 |
[Script] Show-Hide Layers (by 신의키스)
| 2009/01/19 |
| 151 |
[Script] Show-Hide Layers (by 태그매니아)
[3]
| 2009/01/20 |
 | [Script] 롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) [2] | 2009/01/20 |
| 149 | [Script] 위의 메뉴에 마우스를 올리면 밑에 메뉴가 나오는 소스 | 2009/01/20 |
| 148 |
[Script] 가로 세로가 호환되는 메뉴
| 2009/01/20 |
| 147 |
[Script] 클릭하면 슬라이드되면서 펼쳐지는 사이드 메뉴
| 2009/01/20 |
| 146 |
[Script] 메뉴 슬라이딩(가로)
[1]
| 2009/01/20 |
| 145 |
[Script] 화면 왼쪽에 숨겨진 레이어 꺼내기
[1]
| 2009/01/20 |
| 144 | [Script] 간단한 점프메뉴(selecter) | 2009/01/20 |
| 143 | [Script] 스크롤 따라다니는 레이어 [2] | 2009/01/20 |
| 142 | [Script] 스크롤 따라다니는 레이어 | 2009/01/20 |
| 141 |
[Script] 슬라이딩 레이어
[1]
| 2009/01/20 |
| 140 | Cut & Paste CSS Horizontal List Menu | 2009/01/20 |
| 139 | Dolphin CSS Menu | 2009/01/20 |
| 138 | [HTML5] dl과 ul의 상하관계(?)에 대해서 질문드립니다. [1] | 2009/01/20 |
| 137 | 탭메뉴형 자바스크립트 | 2009/01/20 |
| 136 | 드롭다운 가로형 메뉴 | 2009/01/20 |
태그
설정
글쓰기
