간편한 자바스크립트 서브메뉴 출력 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 메뉴 관련 > 간편한 자바스크립트 서브메뉴 출력 상세정보

클라우드태그

Javascript

PHP

HTML

ASP

mysql

CSS

mobile

jquery

image

slide

占쌨댐옙

占쏙옙占쏙옙占쏙옙트

메뉴

현재접속자 명

간편한 자바스크립트 서브메뉴 출력

해피팀

네티즌

소스분류

메뉴 관련

다운로드 횟수

1270 회

간단설명

제목을 클릭하면 아래쪽에 서브메뉴가 출력됩니다.

평가하기

메인메뉴의 제목을 클릭하면 제목 바로아래에 서브 메뉴들이 펼쳐집니다.
이걸 이용하여 간단한 메뉴를 제작할 수 있습니다.

-소스-
<script language="javascript">

</script>
<table border="1" width="300" cellspacing="0" cellpadding="0">
<tr>
<th width="300" height="30"><a href="#" onclick="ShowContent(0);">메뉴 1</a></th>
</tr>
<tr id="dis0" style="display:none;">
<td align="center" width="300" height="120">서브메뉴1-1<br>서브메뉴1-2<br>서브메뉴1-3<br>서브메뉴1-4</td>
</tr>
<tr>
<th width="300" height="30"><a href="#" onclick="ShowContent(1);">메뉴 2</a></th>
</tr>
<tr id="dis1" style="display:none;">
<td align="center" width="300" height="120">서브메뉴2-1<br>서브메뉴2-2<br>서브메뉴2-3<br>서브메뉴2-4</td>
</tr>
</table>

스크립트 소스를 <head></head>사이에 넣어주시고 메뉴에 위에 노란색으로 색칠되어있는 부분처럼 링크를 걸어주시면 바로아래의 셀(<tr><td></td></tr>)부분이 숨겨져있다가 펼쳐지게 됩니다. 분홍색으로 칠해진부분은 이부분의 셀을 숨겨라고 지정해주는 태그 입니다. 여러개를 만들때에는 노란색으로 칠해진부분의 onclick="ShowContent(0); 이부분을 0 , 1 , 2 ,3 .... 으로 숫자를 바꿔가며 만들어가면 됩니다.