아래의 예제 소스를 응용하시면 제작이 가능합니다.
레이어를 보였다 안보였다 하는 방법 입니다.
▶ 소스
아래의 --------- 사이의 파란 글씨의 내용이 소스입니다..
------------------------------------------------------------
<style type="text/css">
<!--
A:link {font-family: 굴림체; font-size:9pt; text-decoration: none;}
A:visited {font-family: 굴림체; font-size:9pt; text-decoration: none;}
A:hover {font-family: 굴림체; font-size:9pt;text-decoration:overline underline;}
-->
</style>
<script language="JavaScript">
<!--
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;
}
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 width="600" border="0" cellspacing="0" cellpadding="0">
<tr><td height="25">
<A href="문서1의 주소" onmouseover="MM_showHideLayers('menu1','','show','menu2','','hide')">메뉴1</A>
<A href="문서5의 주소" onmouseover="MM_showHideLayers('menu1','','hide','menu2','','show')">메뉴2</A>
</td></tr>
</table>
<div id="menu1" style="position:
<A href="문서1의 주소">문서1</a>
<A href="문서2의 주소">문서2</a>
<A href="문서3의 주소">문서3</a>
<A href="문서4의 주소">문서4</a>
</div>
<div id="menu2" style="position:
<A href="문서5의 주소">문서5</a>
<A href="문서6의 주소">문서6</a>
</div>
------------------------------------------------------------
▶ 소스 설명
1.
<style ~~> 부터 </style> 태그까지는 링크된 글씨폰트, 글씨크기, 밑줄, 윗줄 등에 대한 스타일 지정입니다.
2.
<table ~~> 부터 </table> 태그까지는 메뉴로 사용하는 레이어와 테이블을 이용한 부메뉴 부르기입니다.
참고) 레이어?
HTML 문서에서 레이어(Layer)란 화면 어디든 사용자가 나타나는 위치를 지정할 수 있는 문단을 말합니다. 레이어는 화면에서 안보이게 숨기거나 나타낼 수 있으며 크기도 지정할 수 있습니다.
3.
<script ~~> 부터 </script> 태그까지는 상위 메뉴를 눌렀을 때 상위 메뉴의 아래에 가로로 부메뉴 나타나게 하는 자바스크립트입니다.
4.
<A href="문서1" onmouseover="MM_showHideLayers('menu1','','show','menu2','','hide')">메뉴1</A>
주메뉴의 부메뉴를 부르는 명령입니다.
menu1이라는 부메뉴(<div> ~ </div> 태그로 만든 레이어의 내용들)를 보여주고(show) id가 "menu2"인 부메뉴 레이어는
감추라는(hide) 명령입니다.
주메뉴에 마우스를 올렸을 때 부메뉴로 나타내고 싶은 레이어를 MM_showHideLayers()에서 '레이어 ID','','show'처럼
지정을 하고 다른 부메뉴 레이어들은 화면에 안보이게 '레이어 ID','','hide'로 숨겨줍니다.
만약 주메뉴와 부메뉴가 각각 3개이고 각 부메뉴 레이어의 id가 menu1, menu2, menu3이라면 마우스가 주메뉴나
부메뉴 중 어느 곳에 위치해 있다가 다른 주메뉴를 선택할 때 항상 선택한 주메뉴의 부메뉴만이 화면에 나타나야 합니다.
안그러면 레이어들이 화면에 겹쳐서 잘 안보일 수 있기 때문입니다.
이런 경우에는 MM_showHideLayers()에서 '레이어 ID','','hide','레이어 ID','','hide'처럼
다른 부메뉴 레이어들은 모두 숨깁니다.(hide)
그런 후 '레이어 ID','','show'로 화면에 나타낼 부메뉴 레이어를 show를 해줍니다. show와 hide 하는 것은
어느 것을 먼저 하느냐는 상관없습니다.
예)
| onmouseover="MM_showHideLayers('menu1','','show','menu2','','hide','menu3','','hide')" 이것과 onmouseover="MM_showHideLayers('menu2','','hide'.'menu3','','hide','menu1','','show')" 이것처럼 show 되는 부메뉴를 먼저 써줘두 되고 hide 되는 부메뉴를 먼저 써주든 상관 없습니다. 단, '레이어 ID', '', 'show 또는 hide' 라는 형식은 지켜야 합니다. |
부메뉴는 div 태그를 이용하여 레이어로 각각 만듭니다. 레이어의 id는 주 메뉴에서 show를 한 id와 같아야 합니다.
5.
<div id="menu1" style="position:
<font size="2" color="white">
<A href="문서1의 주소">문서1</a> |
...........
<A href="문서4의 주소">문서4</a></font></div>
부메뉴의 내용을 레이어에 지정하는 것입니다.
id="menu1"은 이 부메뉴 레이어의 id(아이디)가 menu1이라는 것입니다. id는 부메뉴를 화면에 보여주거나(show) 숨겨줄 때(hide) 사용합니다.
style=은 부메뉴 레이어에 대한 설정을 해주는 것입니다.
위의 style의 left와 top의 위치를 조정해서 부메뉴가 나타나는 위치는 조절할 수 있구요.
메뉴를 추가할 때에는 주메뉴 먼저 추가로 만들어 주고 부메뉴 레이어 중 하나를 복사한 후 id를 고쳐주고 위치도 조절하고 하면 됩니다.
다른 주메뉴를 선택했을 때 나머지 주메뉴들에 딸린 부메뉴 레이어들은 모두 숨겨지도록 hide 시켜주는 것 잊지 말구요..
부메뉴가 없는 주메뉴가 필요하다면 show 시켜줄 부메뉴 레이어가 없으니 MM_showHideLayers()에서 '레이어 ID', '', 'hide'만 써주면 되겠죠.
부메뉴 레이어도 따로 만들 필요도 없구요.
댓글 없음:
댓글 쓰기