Artikel ini menjelaskan metode menggunakan JS untuk meluncur ke bawah untuk menyembunyikan menu. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<Html>
<head>
<title> Menu tersembunyi tersembunyi di sudut kiri atas halaman web, merasakan mouse meluncur ke bawah </iteme>
<tyle>#d1 {
Latar Belakang: Biru;
Border-Bottom: White 2px Eartset;
Border-left: White 2px Eartset;
Border-Right: White 2px Eartset;
Border-Top: White 2px Eartset;
Kiri: 0px; Posisi: Absolute;
Atas: 0px; Visibilitas: Tersembunyi;
Lebar: 300px;
Lapisan-Background-Color: Lightgreen
}
A {font-size: 9pt; color:#000000}
A: Link {Text-Decoration: None}
A: Hover {Text-Decoration: None; Color: #FFFFFF}
A: Dikunjungi {Text-Decoration: None}
.40pt {font-size: 40pt; color:#ub39a1; font-family: wending amber tradisional}
</tyle>
<bahasa skrip = "javascript">
function menuin () // menu sembunyikan
{
if (n4) {
clearTimeout (out_id)
if (menu.top> meneh*-1+20+10) {
menu.top -= 8
in_id = setTimeout ("menuin ()", 1)
}
lain if (menu.top> meneh*-1+20) {
menu.top--
in_id = setTimeout ("menuin ()", 1)
}
}
kalau tidak {
clearTimeout (out_id)
if (menu.pixeltop> menuH*-1+20+10) {
menu.pixeltop -= 8
in_id = setTimeout ("menuin ()", 1)
}
lain jika (menu.pixeltop> menuH*-1+20) {
menu.pixeltop--
in_id = setTimeout ("menuin ()", 1)
}
}
}
Menu Fungsi () // Menu Display
{
if (n4) {
ClearTimeout (in_id)
if (menu.top <-10) {
menu.top += 4
out_id = setTimeout ("menuout ()", 1)
}
lain jika (menu.top <0) {
menu.top ++
out_id = setTimeout ("menuout ()", 1)
}
}
kalau tidak {
ClearTimeout (in_id)
if (menu.pixeltop <-10) {
menu.pixeltop += 2
out_id = setTimeout ("menuout ()", 1)
}
lain if (menu.pixeltop <0) {
menu.pixeltop ++
out_id = setTimeout ("menuout ()", 1)
}
}
}
function fireover () {
clearTimeout (f_out)
F_over = setTimeout ("menuout ()", 10)
}
function fireout () {
ClearTimeout (f_over)
F_out = setTimeout ("menuin ()", 10)
}
fungsi init () {
if (n4) {
Menu = Document.d1
meneh = menu.document.height
menu.top = menu.document.height*-1+20
menu.onmouseover = menuout
menu.onmouseout = menuin
menu.visibility = "visible"
}
lain jika (e4) {
Menu = D1.Style
meneh = d1.offsetHeight
D1.style.pixeltop = d1.offsetHeight*-1+20
D1.onmouseover = pemadam kebakaran
D1.onmouseout = pemadam kebakaran
D1.style.visibility = "visible"
}
}
F_over = f_out = in_id = out_id = null
n4 = (Document.layers)? 1: 0
e4 = (document.all)? 1: 0;
</script>
</head>
<body onload = "init ()">
<Div id = "d1">
<able>
<tbody>
<tr>
<td align = "tengah" 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">
Opsi 1 </a>
</li>
<li> <a href = "li#nogo">
Opsi 2 </a>
</li>
<li> <a href = "#nogo">
Opsi 3 </a>
</li>
<li> <a href = "#nogo">
Opsi 4 </a>
</li>
<li> <a href = "#nogo">
Opsi 5 </a>
</li>
</ul>
</td>
<td> <br> <br> <ul>
<li> <a href = "#nogo">
Opsi 6 </a>
</li>
<li> <a href = "#nogo">
Opsi 7 </a>
</li>
<li> <a href = "#nogo">
Opsi 8 </a>
</li>
<li> <a href = "#nogo">
Opsi 9 </a>
</li>
<li> <a href = "#nogo">
Opsi 10 </a>
</li>
</ul>
</td>
</tr>
<tr>
<td align = "kanan" colspan = "2">
</td>
</tr>
</tbody>
</boable>
</div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.