메뉴 보이기
Profile
이온디

2009.01.19

Script

Show-Hide Layers (by 신의키스)

조회 수 4644 추천 수 0
출처 및 URL http://kissofgod.net/wdi/dhtml/dhtml66.html 
소스 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--// 신의키스 -->
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.0
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=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(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>
</head>
<body>
<!-- s : mainmenu -->
<span onMouseOver="MM_showHideLayers('layer1','','hide','layer2','','hide','layer3','','hide')">Home</span>
<span onMouseOver="MM_showHideLayers('layer1','','show','layer2','','hide','layer3','','hide')">주메뉴1</span>
<span onMouseOver="MM_showHideLayers('layer1','','hide','layer2','','show','layer3','','hide')">주메뉴2</span>
<span onMouseOver="MM_showHideLayers('layer1','','hide','layer2','','hide','layer3','','show')">주메뉴3</span>
<!-- e : mainmenu -->

<!-- s : submenu -->
<div id="layer1" style="position:absolute; left:100; top:85; visibility:hidden; ">
부메뉴1a<br>
부메뉴1b
</div>

<div id="layer2" style="position:absolute; left:100; top:108; visibility:hidden; ">
부메뉴2a</a><br>
부메뉴2b</a>
</div>

<div id="layer3" style="position:absolute; left:100; top:108; visibility:hidden; ">
부메뉴3a</a><br>
부메뉴3b</a>
</div>
<!-- e : submenu -->
</body>
</html> 

복잡한 여러개의 메뉴로 구성된 홈페이지를 운영하시는 분들에게는 아주 유용합니다.
( 드림위버에서 추출할 수 있는 소스입니다. 드림위버가 있는 분들은 드림위버 강좌 사이트나 드림위버 관련 서적에서 비헤이버 관련부를 읽어보시면 쉽게 만들 수 있습니다. 드림위버가 없는 분들은 메모장 등의 텍스트에디터에서 아래처럼 따라하시면 되구요.)

에 아래 소스를 넣습니다.

<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.0
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=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(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>

, 주메뉴가 들어갈 자리에 아래 소스를 넣습니다.

<table>
  <tr>
    <td><span onMouseOver="MM_showHideLayers('layer1','','hide','layer2','','hide')"><a href="kissofgod.html">Home</a></span></td>
  </tr>
  <tr>
    <td><span onMouseOver="MM_showHideLayers('layer1','','show','layer2','','hide')" style="cursor:hand">주메뉴1</span></td>
  </tr>
  <tr>
    <td><span onMouseOver="MM_showHideLayers('layer1','','hide','layer2','','show')" style="cursor:hand">주메뉴2</span></td>
  </tr>
</table>

주메뉴가 들어가는 부분입니다. 여기서는 주메뉴를 세로형태로 만들었지만, 테이블을 수정해주시면 가로로 바꾸실 수도 있겠지요.

'layer1','','hide','layer2','','hide' 는 layer1 을 감춤, layer2를 감춤 (home 위에 마우스가 올라갔을 때)
'layer1','','show','layer2','','hide' 는 layer1을 보임, layer2를 감춤 (주메뉴1 위에 마우스가 올라갔을 때)
'layer1','','hide','layer2','','show' 는 layer1을 감춤, layer2를 보임 (주메뉴 2에 마우스가 올라갔을 때)

( 여기서는 레이어가 2개였구요. 레이어를 더 추가해서, 레이어가 3개이고 layer1을 보임, layer2와 layer3을 숨김으로 한다면 'layer1','','hide','layer2','','hide','layer3','','hide' 이렇게 하시면 됩니다. 4개 5개.... 쭈욱 이런 식으로 연결합니다.)

의 아무 곳에나 아래소스 (주메뉴 위에 마우스를 올렸을 때 나타나는 부메뉴 레이어)를 넣습니다.

<div id="layer1" style="position:absolute; left:100; top:85; visibility:hidden; width:100; z-index:3">
<table>
  <tr>
    <td><a href="#">부메뉴1a</a><br>
          <a href="#">부메뉴2b</a></td>
  </tr>
</table>
</div>

<div id="layer2" style="position:absolute; left:100; top:108; visibility:hidden; width:100; z-index:2">
<table>
  <tr>
    <td><a href="#">부메뉴2a</a><br>
          <a href="#">부메뉴2b</a></td>
  </tr>
</table>
</div>

layer1 과 layer2 는 레이어의 이름입니다. 계속 추가하실 수 있습니다. 물론, 레이어의 이름은 각각 달라야합니다.

left:100; top:85 는 레이어의 좌표값입니다. 왼쪽으로부터 100 (픽셀), 위쪽으로부터 (85 픽셀)
문서 전체, 주메뉴와의 위치 등을 고려해서 적당한 값으로 바꿔주시면 됩니다.

width:100 은 레이어의 폭입니다. 100 (픽셀)
부메뉴 안에 들어가는 내용에 따라 적당한 폭으로 바꿔주시면 됩니다.

visibility:hidden 레이어 보기-숨기기의 기본값을 '숨김'으로.
그래야 문서가 처음 열렸을 때 부메뉴가 감춰지고, 마우스를 주메뉴 위에 올라갔을 때만 보이게 되겠죠.

z-index 는 레이어의 층수입니다. 한 문서 안에 여러개의 레이어가 들어 있고, 레이어가 겹치게 될 수 있습니다. 이 때 레이어의 우선순위를 1층(z-index:1), 2층(z-index:2) ...이런 식으로 정해주는 겁니다. 1층보다는 2층이 위이므로 z-index:2 인 레이어가 z-index:1 인 레이어보다 위에 위치하게 되겠죠.

여기서는 세로로 된 주메뉴에 맞춰 부메뉴레이어를 세로형태로 정렬했지만, 가로형태의 메뉴바를 사용한다면 레이어의 위치(left, top 값)를 가로메뉴바에 맞게 바꾸면 됩니다.

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
86 [Script] 롤오버 메뉴에 하위 부메뉴 레이어..(아웃시 하위메뉴사라짐) 2 2009.01.20 6402
85 [Script] Show-Hide Layers (by 태그매니아) 3 2009.01.20 4934
[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