하부메뉴가 보였다가 숨겨졌다 하는 토글버튼이 있는 메뉴 스크립트
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> jasko sample script </title>
<!---- [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><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> jasko sample script </title>
<!---- [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><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
게시글 목록
| 번호 | 제목 |
|---|---|
| 10331 | |
| 28724 |
HTML
싸이월드 둥근 테두리 만드는 방법
2
|
| 10329 | |
| 10328 | |
| 10326 |
JavaScript
히스토리 브러시 툴(History Brush Tool, 단축키 - Y)
1
|
| 10324 | |
| 10323 | |
| 28723 | |
| 10322 |
JavaScript
슬라이스 툴- Slice Tool (단축키 K)
|
| 10321 | |
| 10320 | |
| 28722 | |
| 10318 | |
| 28719 |
HTML
포토샵 레이어의 이해
2
|
| 10317 |
JavaScript
포토샵 해상도의 종류
|
| 10314 | |
| 10312 | |
| 28716 |
HTML
점선 그리는 법...
2
|
| 10308 |
Flash
포토샵에서 쓰이는 파일정보 입니다.
3
|
| 10307 |
JavaScript
♣ 영문으로 보이는 한글폰트를 한글명으로
|
| 10306 | |
| 10305 | |
| 28715 |
HTML
일러스트 단축키2
|
| 10304 |
JavaScript
일러스트 단축키
|
| 10303 | |
| 28714 | |
| 10302 |
Flash
자동으로 창크기 변환
|
| 28713 |
HTML
XP서비스팩2 무시하고 새창 띄우기
|
| 10301 |
MySQL
mysql table 유뮤 확인 코딩[펌]
|
| 10300 |
PHP
php환경 변수 출력
|
| 10299 | |
| 10296 |
기타
연합뉴스 뉴스티커
2
|
| 10294 | |
| 10293 | |
| 10292 | |
| 10291 |
JavaScript
ls 명령에서 LS_COLOR 환경변수로 확장자별 색 바꾸기
|
| 10289 |
JavaScript
php 날짜, 시간 함수 관련 팁
1
|
| 10285 |
PHP
PHP팁 (보안 등)
3
|
| 28711 |
HTML
개행문자 없애기[펌]
1
|
| 10281 |
Flash
swf 바탕빼서 적용하기
3
|
| 10279 |
Flash
mp3 play 플래시 소스입돠~
1
|
| 28710 | |
| 10278 | |
| 10277 | |
| 10276 | |
| 28709 | |
| 10273 | |
| 10270 |
JavaScript
돌맹이로 글자쓰기 ㅡㅡ;; 강좌...
2
|
| 10269 |
JavaScript
주소 보여주기 시를 때 제가 자주 쓰는 방법 이건 조회수 빵이다 ㅡ0ㅡ;
|
| 10267 | |
| 28708 | |
| 10266 | |
| 10264 | |
| 10263 |
JavaScript
마우스 오버시에 텍스트 버튼느낌 style.css 와 자동 스크롤 기능
|
| 10261 | |
| 28707 |
HTML
웹 폰트 적용 시키기 - 초보자용 -
|
| 10260 |
JavaScript
접속때마다 음악 다르게 나오기
|
| 10256 |
JavaScript
img 태그에 border=0을 넣지 않고 적용
3
|
| 10255 | |
| 28706 |
HTML
페이지 자동 이동 방법 3가지!!!
|
| 10253 | |
| 28704 |
HTML
body옆의 스크롤바흔적없애기
1
|
| 10250 |
기타
소스훔쳐보기
2
|
| 28703 |
HTML
마우스 오른쪽 버튼 사용금지
|
| 28702 |
HTML
마우스 룰오버시 여러가지 효과내기
|
| 10249 |
Flash
스위시 무비를 플래시에서 들여오기할 때
|
| 10247 |
Flash
SWF 파일 용량 줄이기
1
|
| 10245 | |
| 10243 | |
| 10240 |
Flash
4. 자주 쓰는 플래시 액션스크립트 용어
2
|
| 10239 | |
| 10238 |
Flash
2. 무비 크기를 줄이기 위한 10가지 방법
|
| 10237 |
Flash
1. 메뉴보다 빠른 단축키(Hot Key)들
|
| 10235 |
Flash
여러가지팁
1
|
| 10225 | |
| 28700 |
HTML
포토샾 팁 72가지
1
|
| 10213 | |
| 10210 | |
| 10207 | |
| 10205 | |
| 10204 | |
| 28693 | |
| 10198 |
Flash
실시간채팅창 붙이기 플래시 버튼액션..
5
|
| 10195 |
JavaScript
php폼메일로 일본어 메일 보내기
2
|
| 10191 |
JavaScript
원하는 부분만 프린트하기.
3
|
| 24785 | |
| 28674 |
HTML
디렉토리 이미지 뷰어
18
|
| 24784 | |
| 10189 | |
| 10187 | |
| 10182 | |
| 28669 | |
| 10181 | |
| 10175 | |
| 24779 | |
| 24772 | |
| 10173 | |
| 10168 |
JavaScript
웹호스팅서버 보안 - Open DNS 막기
4
|
| 10163 | |
| 10160 |
JavaScript
자동 스크롤 메뉴 (끄기 기능)
2
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기