부드럽게 스크롤 되는 트리구조형 메뉴 스크립트
주메뉴를 클릭하면 하위메뉴가 열리고, 다른 메뉴를 클릭하면 이전 부메뉴들은 닫히게 됩니다
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="expires" content="-1">
<meta http-equiv="pragma" content="no-cache">
<title> jasko sample script </title>
<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 --->
<style>
/* 메뉴판의 전체 테두리 설정 */
#main_panel
{
border:1px solid darkblue;
position:relative;
overflow:hidden;
}
/* 주메뉴의 스타일 설정 */
.head_item
{
background-color:gold;
font-size:12px;
font-family:굴림;
font:bold;
border-top:1px solid darkblue;
border-bottom:1px solid darkblue;
position:absolute;
left:0px;
text-align:left;
}
/* 부메뉴의 스타일 설정 */
.item
{
background-color:lightyellow;
font-family:굴림;
font-size:12px;
left:0px;
position:relative;
text-align:left;
}
.item_panel
{
position:absolute;
background-color:lightyellow;
left:0px;
}
.item_panel a
{
text-decoration:none;
color:black;
}
</style>
<script language="JavaScript" src="menu_09.js"></script>
<!------------------------- 여기까지 ------------------------------------>
</head>
<body>
<!---- [2단계] 아래의 방법으로 원하는 위치에 붙여 넣으세요 --->
<script language="JavaScript">
var Link = new Array();
// Link[번호] = "구분|제목:URL|타겟";
// 구분 : 0 = 주메뉴, 1 = 부메뉴
Link[0] = "0|자바스크립트";
Link[1] = "1|홈페이지|http://www.sir.co.kr|_blank";
Link[2] = "1|자바스크립트|www.sir.co.kr|_blank";
Link[3] = "1|자바 애플릿|http://www.sir.co.kr|_blank";
Link[4] = "1|CGI 스크립트|http://www.sir.co.kr|_blank";
Link[5] = "0|게시판들";
Link[6] = "1|묻고 답하고|http://www.sir.co.kr|_blank";
Link[7] = "1|자유 게시판|http://www.sir.co.kr|_blank"
Link[8] = "0|링크 사이트";
Link[9] = "1|다음 커뮤니케이션즈|http://www.sir.co.kr|_blank";
Link[10] = "1|야후 코리아|http://www.sir.co.kr|_blank";
Link[11] = "0|미디어 페이지";
Link[12] = "1|엠비씨 홈페이지|http://www.sir.co.kr|_blank";
Link[13] = "0|신문사 페이지";
Link[14] = "1|조선일보|http://www.sir.co.kr|_blank";
start(1);
</script>
</body>
</html>
<!--- [3단계] menu_09.js 파일을 같은 경로에 업로드 하세요 ---><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="expires" content="-1">
<meta http-equiv="pragma" content="no-cache">
<title> jasko sample script </title>
<!---- [1단계] 아래 코드를 <HEAD> 와 <HEAD> 태그 사이에 붙여 넣으세요 --->
<style>
/* 메뉴판의 전체 테두리 설정 */
#main_panel
{
border:1px solid darkblue;
position:relative;
overflow:hidden;
}
/* 주메뉴의 스타일 설정 */
.head_item
{
background-color:gold;
font-size:12px;
font-family:굴림;
font:bold;
border-top:1px solid darkblue;
border-bottom:1px solid darkblue;
position:absolute;
left:0px;
text-align:left;
}
/* 부메뉴의 스타일 설정 */
.item
{
background-color:lightyellow;
font-family:굴림;
font-size:12px;
left:0px;
position:relative;
text-align:left;
}
.item_panel
{
position:absolute;
background-color:lightyellow;
left:0px;
}
.item_panel a
{
text-decoration:none;
color:black;
}
</style>
<script language="JavaScript" src="menu_09.js"></script>
<!------------------------- 여기까지 ------------------------------------>
</head>
<body>
<!---- [2단계] 아래의 방법으로 원하는 위치에 붙여 넣으세요 --->
<script language="JavaScript">
var Link = new Array();
// Link[번호] = "구분|제목:URL|타겟";
// 구분 : 0 = 주메뉴, 1 = 부메뉴
Link[0] = "0|자바스크립트";
Link[1] = "1|홈페이지|http://www.sir.co.kr|_blank";
Link[2] = "1|자바스크립트|www.sir.co.kr|_blank";
Link[3] = "1|자바 애플릿|http://www.sir.co.kr|_blank";
Link[4] = "1|CGI 스크립트|http://www.sir.co.kr|_blank";
Link[5] = "0|게시판들";
Link[6] = "1|묻고 답하고|http://www.sir.co.kr|_blank";
Link[7] = "1|자유 게시판|http://www.sir.co.kr|_blank"
Link[8] = "0|링크 사이트";
Link[9] = "1|다음 커뮤니케이션즈|http://www.sir.co.kr|_blank";
Link[10] = "1|야후 코리아|http://www.sir.co.kr|_blank";
Link[11] = "0|미디어 페이지";
Link[12] = "1|엠비씨 홈페이지|http://www.sir.co.kr|_blank";
Link[13] = "0|신문사 페이지";
Link[14] = "1|조선일보|http://www.sir.co.kr|_blank";
start(1);
</script>
</body>
</html>
<!--- [3단계] menu_09.js 파일을 같은 경로에 업로드 하세요 ---><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 2개
죄송합니다..ㅎㅎ