[개발] 서브메뉴 만들기 - 자바 스크립트

아래의 소스 중에서 자바스크립트 부분은 HTML의 head 부분에 넣어주시면 됩니다.

메인 메뉴에서 해당 메뉴부분(이미지 또는 텍스트) 에 마우스를 올렸을 때 해당 메뉴의 서브메뉴가 레이어로 나타납니다. 그리고 메뉴의 위치에서 마우스가 벗어났을 경우 서브메뉴가 사라지도록 처리하였습니다.

메뉴를 더 추가하고자 하실 경우에는 먼저 메인메뉴를 추가한 다음 서브메뉴를 정의한 div 부분에 해당 서브메뉴를 추가하시면 됩니다.

여기서 div를 계속해서 추가하실 수 있으며, 각각 추가하실 때마다 div id="sm1" 이란 부분에서 다른이름으로 계속 추가하시면 됩니다.

예를 들어 div id="sm2" 다음은 div id="sm3" 등등등...

그리고 마우스 올리는 부분에서 정의한 레이어를 보여주도록 하며, 메뉴가 추가될 때마다 이어서 추가해 주시면 됩니다.

onMouseOver 일 때 onMouseOver="MM_showHideLayers('sm1','','show','sm2','','hide')" 와 같이 작성합니다.

이것은 마우스가 올라갔을 때 sm1은 show로 보여주고 나머지 레이어는 hide로 보여주지 않는다는 부분입니다.

그리고 마우스를 내렸을 때는 onMouseOut="MM_showHideLayers('sm1','','hide','sm2','','hide')"와 같이 작성하여 모든 레이어를 hide 시켜서 보여주지 않게합니다.


다음으로 수정하실 부분은 div 에서 각 서브메뉴의 위치를 조정하실 수 있는 부분입니다.

left = 서브메뉴의 가로 위치를 나타냅니다. 0일 경우에는 브라우져의 좌측 끝 부분입니다.
top = 서브메뉴의 세로 위치를 나타냅니다. 0일경우에는 브라우져의 최상단입니다.
width = 서브메뉴를 감싸고 있는 크기입니다.
height = 서브메뉴를 감싸고 있는 높이입니다.

 

★ 모양은 지우고 사용하세요..

<Script language="JavaScript">
<!--
function MM_showHideLayers() { //v6.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; }
}

function MM_findObj(n, d) { //v3.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); return x;
}
//-->
</Script>


<★!-- 메인메뉴가 들어갑니다. -->
<★table width="200" border="1" cellpadding="0" cellspacing="0" bgcolor="#EFEFEF">
<★tr height="30">
<★td align="center" onMouseOver="MM_showHideLayers('sm1','','show','sm2','','hide')" onMouseOut="MM_showHideLayers('sm1','','hide','sm2','','hide')">메뉴 1<★/td>
<★td align="center" onMouseOver="MM_showHideLayers('sm1','','hide','sm2','','show')" onMouseOut="MM_showHideLayers('sm1','','hide','sm2','','hide')">메뉴 2<★/td>
<★/tr>
<★/table>
<★!-- 메인메뉴 정의 끝 -->

<★!-- 서브메뉴가 들어갑니다. -->
<★div id="sm1" style="position:absolute; left:10px; top:54; width:200; height:200; z-index:1; visibility: hidden;" onMouseOver="MM_showHideLayers('sm1','','show','sm2','','hide')" onMouseOut="MM_showHideLayers('sm1','','hide','sm2','','hide')">
<★table width="200" border="0" cellpadding="0" cellspacing="0">
<★tr height="24">
<★td align="center">메뉴1-1<★/td>
<★td align="center">메뉴1-2<★/td>
<★td align="center">메뉴1-3<★/td>
<★/tr>
<★/table>
<★/div>

<★div id="sm2" style="position:absolute; left:100px; top:54; width:200; height:200; z-index:1; visibility: hidden;" onMouseOver="MM_showHideLayers('sm1','','show','sm2','','hide')" onMouseOut="MM_showHideLayers('sm1','','hide','sm2','','hide')">
<★table width="200" border="0" cellpadding="0" cellspacing="0">
<★tr height="24">
<★td align="center">메뉴2-1<★/td>
<★td align="center">메뉴2-2<★/td>
<★td align="center">메뉴2-3<★/td>
<★/tr>
<★/table>
<★/div>
<!-- 서브메뉴 정의 끝 -->

출처: http://blog.naver.com/iambig/20017776949