메뉴 보이기
Profile
이온디

2009.01.20

Script

롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐)

조회 수 6402 추천 수 0
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>

<!------------------------- 여기까지 ---------------------------------->
Profile
0
Lv

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
100 드롭다운 가로형 메뉴 2009.01.20 4772
99 탭메뉴형 자바스크립트 2009.01.20 4973
98 [HTML5] dl과 ul의 상하관계(?)에 대해서 질문드립니다. 1 2009.01.20 5121
97 Dolphin CSS Menu 2009.01.20 3785
96 Cut & Paste CSS Horizontal List Menu 2009.01.20 3859
95 [Script] 슬라이딩 레이어 1 2009.01.20 5815
94 [Script] 스크롤 따라다니는 레이어 2009.01.20 4881
93 [Script] 스크롤 따라다니는 레이어 2 2009.01.20 5746
92 [Script] 간단한 점프메뉴(selecter) 2009.01.20 4842
91 [Script] 화면 왼쪽에 숨겨진 레이어 꺼내기 1 2009.01.20 5608
90 [Script] 메뉴 슬라이딩(가로) 1 2009.01.20 7167
89 [Script] 클릭하면 슬라이드되면서 펼쳐지는 사이드 메뉴 2009.01.20 8242
88 [Script] 가로 세로가 호환되는 메뉴 2009.01.20 4127
87 [Script] 위의 메뉴에 마우스를 올리면 밑에 메뉴가 나오는 소스 2009.01.20 4734
[Script] 롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) 2 2009.01.20 6402
85 [Script] Show-Hide Layers (by 태그매니아) 3 2009.01.20 4934
84 [Script] Show-Hide Layers (by 신의키스) 2009.01.19 4644
83 [Script] div 높이 100% 맞추기 2009.01.18 6826
82 [Script] 롤오버 메뉴 만들기 1 2009.01.18 5880
81 주석 표시하기 2009.01.14 3506