この記事では、JSを使用してメニューを隠すために下向きにスライドする方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードコピーは次のとおりです。
<html>
<head>
<Title> Webページの左上隅に隠された隠しメニュー、マウスのスライドを感知する</title>
<style>＃d1 {
背景色：青;
ボーダーボトム：白い2pxの最初。
国境左：白い2pxの最初。
国境右：白い2pxの最初。
ボーダートップ：白い2pxの最初。
左：0px;位置：絶対;
上：0px;可視性：隠された;
幅：300px;
レイヤーバックグラウンドカラー：ライトグリーン
}
A {font-size：9pt; color：＃000000}
A：link {text-decoration：none}
A：Hover {Text-Decoration：none; color：#ffffff}
A：訪問{テキストデコレーション：なし}
.40pt {font-size：40pt; color：＃ub39a1; font-family：wending mber
</style>
<スクリプト言語= "javascript">
function menuin（）//メニュー非表示
{
if（n4）{
cleartimeout（out_id）
if（menu.top> menuh*-1+20+10）{
menu.top- = 8
in_id = setimeout（ "menuin（）"、1）
}
else if（menu.top> menuh*-1+20）{
メニュー。トップ -
in_id = setimeout（ "menuin（）"、1）
}
}
それ以外 {
cleartimeout（out_id）
if（menu.pixeltop> menuh*-1+20+10）{
menu.pixeltop- = 8
in_id = setimeout（ "menuin（）"、1）
}
else if（menu.pixeltop> menuh*-1+20）{
menu.pixeltop--
in_id = setimeout（ "menuin（）"、1）
}
}
}
function menuout（）//メニューディスプレイ
{
if（n4）{
ClearTimeout（in_id）
if（menu.top <-10）{
menu.top += 4
out_id = setimeout（ "menuout（）"、1）
}
else if（menu.top <0）{
menu.top ++
out_id = setimeout（ "menuout（）"、1）
}
}
それ以外 {
ClearTimeout（in_id）
if（menu.pixeltop <-10）{
menu.pixeltop += 2
out_id = setimeout（ "menuout（）"、1）
}
else if（menu.pixeltop <0）{
menu.pixeltop ++
out_id = setimeout（ "menuout（）"、1）
}
}
}
function fyreover（）{
ClearTimeout（f_out）
f_over = setimeout（ "menuout（）"、10）
}
function fireout（）{
ClearTimeout（f_over）
f_out = setimeout（ "menuin（）"、10）
}
function init（）{
if（n4）{
メニュー= document.d1
menuh = menu.document.height
menu.top = menu.document.height*-1+20
メニュー.OnMouseOver = Menuout
メニュー.ONMOUSEOUT = MENUIN
menu.visibility = "visible"
}
else if（e4）{
メニュー= D1.Style
menuh = d1.offsetheight
d1.style.pixeltop = d1.offseetheight*-1+20
D1.ONMOUSESOVER =オレモーバー
d1.onmouseout = jireout
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">
<表>
<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>
</table>
</div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。