웹마스터 팁

  2. Support
  3. 웹마스터 팁

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

2003.08.18 01:07

미니

미리보기: http://withok.com
상단 메뉴에 마우스를 갖다대 보세요..


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>

<!------------------------- 여기까지 ---------------------------------->



후후후 .. 쉽게 설명한다구 했는데.. 참.. 그게 잘 안되네요..
그럼 유용하게 쓰시길..
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
MS홈에 쓰이는 오른쪽메뉴 툴바 [13] file Kortion 2003.02.22
슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 ) [8] 이남두 2003.02.26
엔지오식 좌측이동메뉴 레이어 가운데기준정렬 [11] 스티치 2003.03.29
간단한 점프메뉴(selecter) [14] 박재현 2003.04.14
메뉴이동입니다. [5] 데빌스텔스 2003.04.20
메뉴 옆에서 화살표가 스크롤되는.. [2] 힘찬연못 2003.05.29
[스크립트]오른쪽 버튼 누르면 메뉴나오기^^ [1] 처절초보 2003.06.16
[스크립트] 메뉴에 마우슬 데면 서브 메뉴가 나온다 [2] 처절초보 2003.06.16
마우스 오른쪽 버튼 누르면 원하는 메뉴 뜨게 만들기(다른사이트) [3] 김주형 2003.07.03
[수정]롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) [24] 미니 2003.08.18
플레쉬 메뉴를 표방한..=ㅁ= 자바스크립트의 수작 버튼 밑으로 스크롤 되는 아이콘입니다. [47] beMax 2003.09.14
플래시느낌의 유동적인 메뉴 [9] jabusim 2003.11.13
오른버튼 누를때 메뉴 뜨게하기(깔끔버전) [5] file 럽 2003.12.09
화면 오른쪽 아래부분에 떠있는 메뉴 레이어(마우스 오버시 부메뉴 펼쳐짐) [7] 봉팀장 2003.12.30
[초간단 자바스크립트!] 색깔바뀌는 메뉴 [3] ∑Ztxy 2004.01.19
[초간단 자바스크립트!] 서브메뉴 만들기...~ [11] ∑Ztxy 2004.03.10
허접한 풀다운 메뉴 소스입니다. (유용한 팁 일지는 모르겠네요.) [9] file tintintm 2004.03.23
클릭하거나, 바탕을 더블클릭하면 나타나는 작은(크기조절가능) 메뉴 ☺심심 2004.05.17
[StylishJAVA]레이어를 이용한 슬라이드 메뉴 [5] ∑Ztxy 2004.06.05
레이어 3 - 메뉴판때기. [1] 미친개 2004.07.04
태그 쓰기