테스트 사이트 - 개발 중인 베타 버전입니다
SIR

하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다.

혀니천사
프로필 보기이 회원 글보기
 · 9년 전 · 675

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">

<!---- [1단계] 아래 코드를 <HEAD> 와 </HEAD> 태그 사이에 붙여 넣으세요 --->

<style>

#view{
border: 1px solid silver;
background-color: white;
padding: 13px;
font-size: 13px;
font-family: 굴림;
position: absolute;
width: auto;
height: auto;
}

#select_bar{
border: 0px;
background-color: white;
padding: 13px;
font-size: 13px;
font-family: 굴림;
position: absolute;
width: auto;
height: auto;
}

</style>

<!------------------------- 여기까지 ------------------------------------>

</head>

<body>

<!---- [2단계] 아래의 방법으로 <BODY> 와 </BODY> 태그 사이에 붙여 넣으세요 --->

<!-------- 메뉴를 열고닫는 토글 버튼 레이어 입니다. ------->

<div id="select_bar"><a href="#" onClick="moveOnMenu();moveOffselector()"><b>메뉴 열기</b></a></div>

<!-------- 부메뉴를 설정하는 곳입니다 ------->

<div id="view">

<center>
<a href="#" onClick="moveOffMenu();moveOnselector()"><b>메뉴 닫기</b></a></center>
<table border="0" cellspacing="1" width="140" bgcolor="silver" style="font-size:12px">
    <tr bgColor=white>
        <td>
            <p><a href="#">자바스크립트</a></p>
        </td>
    </tr>
    <tr bgColor=white>
        <td>
            <p><a href="#">야후! 코리아</a></p>
        </td>
    </tr>
    <tr bgColor=white>
        <td>
            <p><a href="#">네이버 홈페이지</a></p>
        </td>
    </tr>
    <tr bgColor=white>
        <td>
            <p><a href="#">드림위버 홈</a></p>
        </td>
    </tr>
    <tr bgColor=white>
        <td>
            <p><a href="#">다음 커뮤니케이션</a></p>
        </td>
    </tr>
    <tr bgColor=white>
        <td>
            <p><a href="#">엠파스</a></p>
        </td>
    </tr>
    <tr bgColor=white>
        <td>
            <p><a href="#">라이코스 코리아</a></p>
        </td>
    </tr>
</table>

</div>

<!------------------------- 여기까지 ------------------------------------>

<script language="javascript">
<!--

// 초기에 부메뉴를 보이게 할지 여부를 설정 합니다(yes/no)
Show ="no";

var OffX = -180;

// 메뉴의 위치를 설정 합니다

var PosX =  500; // 왼쪽에서 10픽셀
var PosY =  10; // 위에서 10픽셀 떨어진 곳에 메뉴가 보입니다

var speed        = 1;
var increment    = 20; // 속도를 조절하실 수 있습니다
var incrementNS4 = 5; // 네스케이프용 속도조절 기능입니다


var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;

var MenuX = OffX;
var SelX = PosX;
var sPosX = PosX;
var sOffX = OffX;

if (Show == "yes") {
sPosX = OffX;
sOffX = PosX;
MenuX = sOffX;
SelX = sPosX;
}

if (is_NS4) {
increment = incrementNS4;
Lq = "document.layers.";
Sq = "";
eval(Lq+'select_bar'+Sq+'.left=sPosX');
eval(Lq+'view'+Sq+'.left=sOffX');
eval(Lq+'select_bar'+Sq+'.top=PosY');
eval(Lq+'view'+Sq+'.top=PosY');
} else {
Lq = "document.all.";
Sq = ".style";
document.getElementById('select_bar').style.left = sPosX+"px";
document.getElementById('view').style.left = sOffX+"px";
document.getElementById('select_bar').style.top = PosY+"px";
document.getElementById('view').style.top = PosY+"px";
} 

function moveOnMenu() {
if (MenuX < PosX) {
MenuX = MenuX + increment;
if (is_NS5up) {
document.getElementById('view').style.left = MenuX+"px";
} else {
eval(Lq+'view'+Sq+'.left=MenuX');
}
setTimeout('moveOnMenu()',speed);
  }
}

function moveOffMenu() {
if (MenuX > OffX) {
MenuX = MenuX - increment;
if (is_NS5up) {
document.getElementById('view').style.left = MenuX+"px";
} else {
eval(Lq+'view'+Sq+'.left=MenuX');
}
setTimeout('moveOffMenu()',speed);
  }
}

function moveOffselector() {
if (SelX > OffX) {
SelX = SelX - increment;
if (is_NS5up) {
document.getElementById('select_bar').style.left = SelX+"px";
} else {
eval(Lq+'select_bar'+Sq+'.left=SelX');
}
setTimeout('moveOffselector()',speed);
  }
}

function moveOnselector() {
if (SelX < PosX) {
SelX = SelX + increment;
if (is_NS5up) {
document.getElementById('select_bar').style.left = SelX+"px";
} else {
eval(Lq+'select_bar'+Sq+'.left=SelX');
}
setTimeout('moveOnselector()',speed);
  }
}
//-->
</script>

<!------------------------- 여기까지 ------------------------------------>

</body>
</html> 

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
18013
PHP [알고리즘]퀵 정렬(Quick Sort)
18012
PHP php로 옥션 지마켓 11번가 쿠팡 위메프 등의 발주내역서 파일을
18011
PHP array_unique 배열중복값 제거
18010
JavaScript 콤보스타일 메뉴 입니다.
18009
JavaScript 쿠키를 이용한 레이어 공지창 입니다.
18008
JavaScript 효과있는 텍스트 틱커 입니다.
18007
PHP [알고리즘]힙 정렬(Heap Sort)
18006
PHP HTTP 인증 하기 입니다.
18005
JavaScript 외부 문서 불러오기 입니다.
18004
JavaScript 지정한 날짜까지 New 이미지를 띄워주기 입니다.
18003
MySQL Common MySQL Queries 다양한 MySQL 쿼리 예제
18002
JavaScript 메일 주소 검사하기 체크박스 입니다.
18001
JavaScript 무단링크 금지하기 입니다.
18000
PHP 간단하게 마우스,드래그,복사 등 막기 입니다.
17999
MySQL DB백업 및 복원
17998
JavaScript 페이지가 다른 사이트의 프레임에 갇히는 것을 막기 입니다.
17997
PHP 다른 사이트로 이동시 또는 창 닫을 시에 자동 로그아웃 하기 입니다.
17996
PHP PHP에 MYSQL 와 자바스크립트 연동 예제 입니다.
17995
jQuery input text 대문자만 받는 Jquery
17994
PHP 현재 페이지 URL 출력하기 입니다.
17993
JavaScript 이미지 업로드와 미리보기 입니다.
17992
JavaScript 배경음악 랜덤 재생 하기 입니다.
17991
JavaScript css 지원 여부 확인해서 다른 페이지로 이동하기 입니다.
17990
JavaScript 하부메뉴가 보였다가 숨겨졌다 하는 토글버튼 입니다. 현재글
17989
JavaScript 개별 페이지에 인덱스로 거쳐 들어오게 하기 입니다.
17988
JavaScript 랜덤으로 이미지 출력 되기 입니다.
17987
JavaScript 사용자 해상도 알아내기 입니다.
17986
JavaScript 붙여넣기 금지하기 입니다.
17985
MySQL 대소문자 데이터 조회하기
17984
JavaScript 퇴장시 팝업창 한번한 띄우기 입니다.
이전 다음
전체 목록