CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

프리랜서 커뮤니티

Show-Hide Layers (by 신의키스)

이온디
2009년 01월 19일

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

에 아래 소스를 넣습니다.

<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 값)를 가로메뉴바에 맞게 바꾸면 됩니다.