이 기사에서는 JS를 사용하여 메뉴를 숨기기 위해 아래쪽으로 슬라이드하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<html>
<헤드>
<title> 웹 페이지의 왼쪽 상단에 숨겨져있는 숨겨진 메뉴, 마우스 미끄러짐을 감지 </title>
<스타일>#d1 {
배경색 : 파란색;
국경-바닥 : 흰색 2px 처음;
왼쪽 경계 : 흰색 2px 처음;
경계-오른쪽 : 흰색 2px 시작;
테두리 : 흰색 2px 시작;
왼쪽 : 0px; 위치 : 절대;
상단 : 0px; 가시성 : 숨겨진;
너비 : 300px;
레이어백 컬러 : Lightgreen
}
a {font-size : 9pt; color :#000000}
A : Link {Text-Decoration : None}
A : 호버 {텍스트 설명 : 없음; 색상 : #ffffff}
A : 방문 {Text-Decoration : None}
.40pt {font-size : 40pt; color :#ub39a1; font-family : Wending Amber 전통}}
</스타일>
<script language = "javaScript">
함수 menuin () // 메뉴 숨기기
{
if (n4) {
클리어 타임 아웃 (out_id)
if (menu.top> menuh*-1+20+10) {
메뉴 -= 8
in_id = settimeout ( "menuin ()", 1)
}
else if (menu.top> menuh*-1+20) {
MEN.TOP--
in_id = settimeout ( "menuin ()", 1)
}
}
또 다른 {
클리어 타임 아웃 (out_id)
if (menu.pixeltop> menuh*-1+20+10) {
메뉴 .pixeltop- = 8
in_id = settimeout ( "menuin ()", 1)
}
else if (menu.pixeltop> menuh*-1+20) {
menu.pixeltop-
in_id = settimeout ( "menuin ()", 1)
}
}
}
함수 menuout () // 메뉴 디스플레이
{
if (n4) {
클리어 타임 아웃 (in_id)
if (menu.top <-10) {
메뉴 += 4
out_id = settimeout ( "menuout ()", 1)
}
else if (menu.top <0) {
메뉴 .top ++
out_id = settimeout ( "menuout ()", 1)
}
}
또 다른 {
클리어 타임 아웃 (in_id)
if (menu.pixeltop <-10) {
메뉴 .pixeltop += 2
out_id = settimeout ( "menuout ()", 1)
}
else if (menu.pixeltop <0) {
메뉴 .pixeltop ++
out_id = settimeout ( "menuout ()", 1)
}
}
}
기능 fireover () {
클리어 타임 아웃 (f_out)
f_over = settimeout ( "menuout ()", 10)
}
function fireout () {
클리어 타임 아웃 (f_over)
f_out = settimeout ( "menuin ()", 10)
}
함수 init () {
if (n4) {
메뉴 = document.d1
menuh = menu.document.height
menu.top = menu.document.height*-1+20
menu.onmouseOver = 메뉴 아웃
MEN.ONMOUSEOUT = MENOIN
menu.visibility = "Visible"
}
else if (e4) {
메뉴 = D1.Style
menuh = d1.offsetheight
d1.style.pixeltop = d1.offsetheight*-1+20
D1.OnMouseOver = FireOver
D1.OnMouseOut = Fireout
d1.style.visibility = "Visible"
}
}
f_over = f_out = in_id = out_id = null
n4 = (document.layers)? 1 : 0
e4 = (document.all)? 1 : 0;
</스크립트>
</head>
<body onload = "init ()">
<div id = "d1">
<테이블>
<tbody>
<tr>
<td align = "middle"bgcolor = "ub39a1"rowspan = "2"> <b style = "color : ub39a1">
m <br>
e <br>
n <br>
u </b> </td>
<td> <br> <br> <ul>
<li> <a href = "#nogo">
옵션 1 </a>
</li>
<li> <a href = "li#nogo">
옵션 2 </a>
</li>
<li> <a href = "#nogo">
옵션 3 </a>
</li>
<li> <a href = "#nogo">
옵션 4 </a>
</li>
<li> <a href = "#nogo">
옵션 5 </a>
</li>
</ul>
</td>
<td> <br> <br> <ul>
<li> <a href = "#nogo">
옵션 6 </a>
</li>
<li> <a href = "#nogo">
옵션 7 </a>
</li>
<li> <a href = "#nogo">
옵션 8 </a>
</li>
<li> <a href = "#nogo">
옵션 9 </a>
</li>
<li> <a href = "#nogo">
옵션 10 </a>
</li>
</ul>
</td>
</tr>
<tr>
<td align = "right"colspan = "2">
</td>
</tr>
</tbody>
</테이블>
</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.