웹마스터 팁

  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>

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



후후후 .. 쉽게 설명한다구 했는데.. 참.. 그게 잘 안되네요..
그럼 유용하게 쓰시길..
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
[타키의 초보강좌]PHP 기초 강좌 제 2탄[mysql로 들어가보자.] [2] 타키 2004.10.24
소수[솟수] 쉽게 구하기[에라토스테네스의 해 알고리즘사용] , 경우의 수 구하기 [5] 타키 2004.10.23
[타키의 초보강좌]PHP 기초 강좌 제 1탄[패스워드 인증] [8] 타키 2004.10.23
www자동 붙히기 [8] 미오유 2004.10.22
IP to 정수변환(;) [4] 플로렐라 2004.10.21
한글자르는 문제 PHP차원에서 해결된 건가? [5] 겜방 2004.10.20
MySQL의 패턴 매칭 맛보기 [2] 손상모 2004.10.19
그래프 만들어주는 소스 [10] 미친개 2004.10.15
윈도우XP 서비스팩2 사용자인지 아닌지 판별하기 [22] file 天高馬肥[쉬드] 2004.10.09
echo 안에 더블쿼테이션을 사용하기 [15] 토토루 2004.10.05
trim 과 addslashes를 일괄처리하는 함수 [7] BigStone 2004.10.02
'' -> ""로 만들기(?) [2] 플로렐라 2004.09.17
crontab 실제 사용 예제, 온라인 웹 게임 운영하기 (팁 + 오픈 소스 게임 소개 ^^;) [1] 박용구 2004.09.14
날씨별로 다양한 말이나 음악 보여주기[수정] [4] 로크 2004.09.13
-긴급소스 수정본- winamp 방송정보 알아내기 file 이승원 2004.09.11
랜덤으로 파일 가져와서 재생하고, 끝나면 다른 랜덤파일 또 재생하기.. 겜방 2004.09.10
썸네일 생성시 unsharp mask활용할수 있는 팁..소스 file 앗싸~~ 곰세마리 2004.09.06
Echo 여러번호출? 할때 깜빡임 없애기 [5] file 신희돈 2004.09.03
서브디렉토리,파일까지 모두 삭제하는 함수. [5] Lepas 2004.08.24
4. include, require 그리고 뽀나쓰~ [8] 티다 2004.08.19
태그 쓰기