웹마스터 팁

  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>

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



후후후 .. 쉽게 설명한다구 했는데.. 참.. 그게 잘 안되네요..
그럼 유용하게 쓰시길..
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
홈에 TT WEB FTP 달기 [12] PHASE 2003.09.03
frame으로 홈페이지 구성시 한쪽 페이지는 유동성있는 파일 대입법(?) monozzang 2003.09.02
주어진 값이 한글,영어,숫자인지 체크 [2] 한승진 2003.08.29
전화번호 유효성 검사(핸폰,집전화 몽땅) [4] 한승진 2003.08.29
변수에서 숫자만 리턴합니다. 한승진 2003.08.29
변수의 실제 바이트 수를 리턴하는 팁 [2] 한승진 2003.08.29
메인 접속하면 할아버지 나오는... [6] 공유 2003.08.28
마우스 움직임에 따라 속도도, 방향도 자유자재 스크롤 소스 [1] RedEye(kaist) 2003.08.24
경우에 따라 공지가 새창에서도 보여야 하고, 일반 페이지에서도 보여야 할때 조은하루 2003.08.22
[수정]롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) [24] 미니 2003.08.18
재미있는놀이 [ 숫자맞추기] [3] NzeoZen 2003.08.16
배경도 이제 선택한다!!? [2] NzeoZen 2003.08.16
편리한 컴내꺼 포트개방 (com.ne.kr FTP Port Open) [1] phase 2003.08.16
Marquee 태그를 이용한 간단한 스크립트 [7] 뒹굴리스트 2003.08.06
나름대로 만들어본 가운데 팝업 스크립트 [3] phase 2003.07.31
HTML경고창 [수정#2] [14] [락위듀]아렌티 2003.07.26
초강력 울트라..매가톤 간단...랜덤이미지.. [6] 김한샘 2003.07.24
노프레임 홈페이지 수정 편리하게 &용량줄이기. [9] 세죠위그이 2003.07.15
한줄씩 올라가는 뉴스티거용 인데요....제로보드하구는 어케...쩝 [12] 하나비 2003.07.08
이미지 필터를 사용한 간단한 소스 [3] NzeoZen 2003.07.06
태그 쓰기