토글 메뉴

인터넷관련 2008. 2. 2. 09:38
<script language="Javascript">
<!-- //////////////////////////////////////////////////////////////
//*****************************************************************
// Web Site: http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ webmaster@CginJs.Com
// C.n.J 자바스크립트 자동 생성 마법사 ☞ http://www.CginJs.Com
// Editer : Web Site: http://www.CginJs.Com
//*****************************************************************
/////////////////////////////////////////////////////////////// -->
//참고로 표에 id 적용시는 와 같이 <tr id='menu추가숫자'> 에 적용하면 됩니다.
//적용 범위는 <tr> ~ </tr> 사이
//일반적으로 적용 할때는 <span id='menu추가숫자'> ~~ </span> 부분이 적용 됩니다.
/*
부가적으로 페이지에 로딩할때 기본적으로 특정 메뉴를 열려면
BODY 부분에 onLoad 이벤트를 사용하면 됩니다.
예를 들어 아래와 같이 4번 메뉴를 기본으로 가지고 오려면..
<body onload="toggleMenu('menu4')">
응용은 사용자에 몫입니다.
*/
// 토글 메뉴
var cnj_lineheigh = '200%'; // 셀안의 글자 라인 간격
document.write('<style>');
document.write('A:link,A:active,A:visited{text-decoration:none;font-size:12PX;color:#333333;}');
document.write('A:hover {text-decoration:none; color:ff9900}');
document.write('#cnj_td { line-height:'+cnj_lineheigh+'; }');
/// 메뉴 추가시 동일해야 함 //////////
document.write('#menu1 {display:none; margin-left:10px}');
document.write('#menu2 {display:none; margin-left:10px}');
document.write('#menu3 {display:none; margin-left:10px}');
document.write('#menu4 {display:none; margin-left:10px}');
/* 추가시
document.write('#menu추가숫자 {display:none; margin-left:10px}');
*/
/// 메뉴 추가시 동일해야 함 //////////
document.write('</style>');
function toggleMenu(currMenu){
if (document.all){
thisMenu = eval('document.all.' + currMenu + '.style')
if (thisMenu.display == 'block') {
document.all.menu1.style.display = 'none'
document.all.menu2.style.display = 'none'
document.all.menu3.style.display = 'none'
document.all.menu4.style.display = 'none'
/* 추가시
document.all.menu추가숫자.style.display = 'none'
*/
thisMenu.display = 'none'
}
else {
document.all.menu1.style.display = 'none'
document.all.menu2.style.display = 'none'
document.all.menu3.style.display = 'none'
document.all.menu4.style.display = 'none'
/* 추가시
document.all.menu추가숫자.style.display = 'none'
*/
thisMenu.display = 'block'
}
return false
}
else {
return true
}
}

function linkblur(){ // 링크에 점선 없애기

if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=linkblur;
document.write('<body>');
</script>

<table width="150" border="0" cellspacing="1" cellpadding="1" bgcolor="#cccccc" id='cnj_td'>
<!-- 주 메뉴1 시작 -->
<tr><td bgcolor="#f2f2f2" height="25"><a href="#" onClick="return toggleMenu('menu1')">C.n.J 메뉴1</a></td></tr>
<!-- 주 메뉴1 끝 -->

<!-- 서브 메뉴1 시작 -->
<tr id='menu1'><td bgcolor='#ffffff'> <a href="http://www.CginJs.Com" target="_blank"><img src='http://www.CginJs.Com/img/cnj-logo-90.gif' border='0'></a></td></tr>
<!-- 서브 메뉴1 끝 -->

<!-- 주 메뉴2 시작 -->
<tr><td bgcolor="#f2f2f2" height="25"><a href="#" onClick="return toggleMenu('menu2')">C.n.J 메뉴2</a></td></tr>
<!-- 주 메뉴2 끝 -->

<!-- 서브 메뉴2 시작 -->
<tr id='menu2'>
<td bgcolor='#ffffff'>
<a href="javascript:;">^ 서브메뉴2-1</a><br>
<a href="javascript:;">^ 서브메뉴2-2</a>
</td>
</tr>
<!-- 서브 메뉴2 끝 -->

<!-- 주 메뉴3 시작 -->
<tr><td bgcolor="#f2f2f2" height="25"><a href="#" onClick="return toggleMenu('menu3')">C.n.J 메뉴3</a></td></tr>
<!-- 주 메뉴3 끝 -->

<!-- 서브 메뉴3 시작 -->
<tr id='menu3'>
<td bgcolor='#ffffff'>
<a href="javascript:;">^ 서브메뉴3-1</a><br>
<a href="javascript:;">^ 서브메뉴3-2</a>
</td>
</tr>
<!-- 서브 메뉴3 끝 -->

<!-- 주 메뉴4 시작 -->
<tr><td bgcolor="#f2f2f2" height="25"><a href="#" onClick="return toggleMenu('menu4')">C.n.J 메뉴4</a></td></tr>
<!-- 주 메뉴4 끝 -->

<!-- 서브 메뉴4 시작 -->
<tr id='menu4'>
<td bgcolor='#ffffff'>
<a href="javascript:;">^ 서브메뉴4-1</a><br>
<a href="javascript:;">^ 서브메뉴4-2</a>
</td>
</tr>
<!-- 서브 메뉴4 끝 -->

<!--
<tr><td bgcolor="#f2f2f2" height="25"><a href="#" onClick="return toggleMenu('menu추가숫자')">C.n.J 메뉴 추가</a></td></tr>

<tr id='menu추가숫자'>
<td bgcolor='#ffffff'>
<a href="javascript:;">^ 추가 서브메뉴 1</a><br>
<a href="javascript:;">^ 추가 서브메뉴 2</a>
</td>
</tr>
참고로 표에 id 적용시는 와 같이 <tr id='menu추가숫자'> 에 적용하면 됩니다.
적용 범위는 <tr> ~ </tr> 사이
일반적으로 적용 할때는 <span id='menu추가숫자'> ~~ </span> 부분이 적용 됩니다.
-->
</table>

'인터넷관련' 카테고리의 다른 글

해상도에따른 브라우저 크기조절  (0) 2008.02.02
글쓰기폼 늘리기 - 확장, 축소  (0) 2008.02.02
투명한 textarea  (0) 2008.02.02
텍스트 밑줄 긋기  (0) 2008.02.02
웹페이지에 삽입된 동영상 및 음악 제어  (0) 2008.02.02
이미지 안쓰고 모서리(테두리) 둥근 테이블 만들기  (0) 2008.02.02
스포트라이트 효과  (0) 2008.02.02
PNG 그림파일 알파값 살리기  (0) 2008.02.02
Posted by 알 수 없는 사용자
,

티스토리툴바