웹마스터 팁
[StylishJAVA]레이어를 이용한 슬라이드 메뉴
2004.06.05 22:14
//크기가 작은 홈페이지에 이용하는게 좋을듯 싶네요...
왼쪽에 작은 메뉴로...//
<html>
<!--~=========================== DOCUMENT HEADER ===========================~-->
<head>
<title>Slide-In Menu Bar 1 </title>
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
left:-155px;
width:160px;
top:25px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>
</head>
<!--~========================= END DOCUMENT HEADER =========================~-->
<body bgcolor="#000033">
<script language="JavaScript1.2">
/*
Sliding Menu Bar Script-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
if (document.all)
document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">')
</script>
<!--~============ LAYER ============~-->
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
<script language="JavaScript1.2">
var sitems=new Array()
var sitemlinks=new Array()
//extend or shorten this list
sitems[0]="메뉴에 나올 말"
sitems[1]="메뉴에 나올 말"
sitems[2]="메뉴에 나올 말"
sitems[3]="메뉴에 나올 말"
sitems[4]="메뉴에 나올 말"
sitems[5]="메뉴에 나올 말"
sitems[6]="메뉴에 나올 말"
sitems[7]="메뉴에 나올 말"
sitems[8]="메뉴에 나올 말"
sitems[9]="메뉴에 나올 말"
//These are the links pertaining to the above text.
sitemlinks[0]="메뉴의 링크"
sitemlinks[1]="메뉴의 링크"
sitemlinks[2]="메뉴의 링크"
sitemlinks[3]="메뉴의 링크"
sitemlinks[4]="메뉴의 링크"
sitemlinks[5]="메뉴의 링크"
sitemlinks[6]="메뉴의 링크"
sitemlinks[7]="메뉴의 링크"
sitemlinks[8]="메뉴의 링크"
sitemlinks[9]="메뉴의 링크"
sitemlinks[10]="메뉴의 링크"
sitemlinks[11]="메뉴의 링크"
sitemlinks[12]="메뉴의 링크"
for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>')
</script>
</layer>
<!--~========== END LAYER ==========~-->
<script language="JavaScript1.2">
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",50)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",50)
}
function pullengine(){
if (document.all&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5
else if(document.layers&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (document.all&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if(document.layers&&themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}
</script>
</body>
</html>
//질문이나 에러는 리플로 달아주세요.
미리보기 : http://myhome.naver.com/frankpkg/slidem(1).htm
왼쪽에 작은 메뉴로...//
<html>
<!--~=========================== DOCUMENT HEADER ===========================~-->
<head>
<title>Slide-In Menu Bar 1 </title>
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
left:-155px;
width:160px;
top:25px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>
</head>
<!--~========================= END DOCUMENT HEADER =========================~-->
<body bgcolor="#000033">
<script language="JavaScript1.2">
/*
Sliding Menu Bar Script-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
if (document.all)
document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">')
</script>
<!--~============ LAYER ============~-->
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
<script language="JavaScript1.2">
var sitems=new Array()
var sitemlinks=new Array()
//extend or shorten this list
sitems[0]="메뉴에 나올 말"
sitems[1]="메뉴에 나올 말"
sitems[2]="메뉴에 나올 말"
sitems[3]="메뉴에 나올 말"
sitems[4]="메뉴에 나올 말"
sitems[5]="메뉴에 나올 말"
sitems[6]="메뉴에 나올 말"
sitems[7]="메뉴에 나올 말"
sitems[8]="메뉴에 나올 말"
sitems[9]="메뉴에 나올 말"
//These are the links pertaining to the above text.
sitemlinks[0]="메뉴의 링크"
sitemlinks[1]="메뉴의 링크"
sitemlinks[2]="메뉴의 링크"
sitemlinks[3]="메뉴의 링크"
sitemlinks[4]="메뉴의 링크"
sitemlinks[5]="메뉴의 링크"
sitemlinks[6]="메뉴의 링크"
sitemlinks[7]="메뉴의 링크"
sitemlinks[8]="메뉴의 링크"
sitemlinks[9]="메뉴의 링크"
sitemlinks[10]="메뉴의 링크"
sitemlinks[11]="메뉴의 링크"
sitemlinks[12]="메뉴의 링크"
for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>')
</script>
</layer>
<!--~========== END LAYER ==========~-->
<script language="JavaScript1.2">
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",50)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",50)
}
function pullengine(){
if (document.all&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5
else if(document.layers&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (document.all&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if(document.layers&&themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}
</script>
</body>
</html>
//질문이나 에러는 리플로 달아주세요.
미리보기 : http://myhome.naver.com/frankpkg/slidem(1).htm
댓글 5
-
woni
2004.06.23 04:00
에러나요.. '_' 미리보기페쥐에 인는 소스로 퍼감니다.. ^_^ 감사감사~ -
woni
2004.06.23 04:09
질문이요'_'/
여기선 메뉴가 하나만 슬라이드되서 나오잖아요.. 두개이상 나오게하려면.. ~_~ 어떻게해야하나요? -
∑Ztxy
2004.06.27 00:03
woni//레이어 부분을 하나 더 추가하면 됩니다. -
(-_ㅡ*)
2004.07.09 19:51
메뉴가 나오는 속도도 조절 할수 있었으면 좋겠는데요..
어디서 설정하나요? -
귀연곰팅v
2004.10.11 10:22
text 대신 이미지를 넣을 수는 없나요??
그러니깐 이미지를 클릭하면 레이어가 뜰 수 있게.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
throttle-me를 이용한 계정 트래픽 나타내기
[39]
 | 旻天 | 2003.11.27 |
| 제로보드회원의 포인트 랭킹 체크하기 sql 정리 [4] | 한꼬마 | 2003.11.26 |
| 한꼬마의 제로보드 이용법 (sql로 테이블 호출) [2] | 한꼬마 | 2003.11.26 |
|
[Lotto 6/45] 로또 추첨 구현하기~
[5]
| 전원주 | 2003.11.21 |
| 한꼬마의 제로보드 활용방법 (로그인 값 알아 보기) [3] | 한꼬마 | 2003.11.20 |
|
회원 포인트 랭킹(중복 -_-a)
[4]
| weky | 2003.11.15 |
|
제로보드회원의 포인트 랭킹 체크하기
[13]
| 전원주 | 2003.11.15 |
| 지금은 시스템 점검중 만들기... [8] | zentoo.com | 2003.11.11 |
| 접속자의 IP를 화일로 저장(기능추가) [27] | 전원주 | 2003.11.06 |
| 호스팅업체에서 GD를 지원하는지 여부를 알 수 있게해주는 소스 [12] | Wizard | 2003.11.05 |
|
홈페이지 관리자 모드 구축하기 (HTTP 인증, 중복 맞음)
[10]
| 9000㎒ | 2003.11.01 |
| include, onload, <span id=...> 다계층메뉴 활용 강좌 [2] | 김병희 | 2003.10.25 |
| 신문기사 긁어오기 [28] | horizon | 2003.10.20 |
| 공지사항|일기장 4강 - notice.php 간단한 글보이기 | 시루바 | 2003.10.16 |
| 최신인기가요 순위 한방에 뽑아오기 [10] | 제누스 | 2003.10.16 |
| 알기쉬운 웹용 MySQL 관리도구, phpMyAdmin 설치하기 [10] | 허창원 | 2003.10.11 |
|
MSN Messenger Class -
| HungryMania | 2003.10.10 |
| 공지사항|일기장 3장 write_ok.php //간단한 입력쿼리문//수정 [5] | 시루바 | 2003.10.08 |
|
내 홈페이지의 방문자 어디서 접속했을까 알아봅시다
[21]
| 버찌소년 | 2003.10.08 |
| 공지사항|일기장 프로그램 2장:코딩구조와write.php [2] | 시루바 | 2003.10.02 |