Este artigo descreve o método de usar JS para deslizar para baixo para ocultar menus. Compartilhe para sua referência. O método de implementação específico é o seguinte:
A cópia do código é a seguinte:
<html>
<head>
<título> Menu escondido escondido no canto superior esquerdo da página da web, sentindo o mouse desliza para baixo </ititure>
<estilo>#d1 {
Background-Color: Blue;
Bottom de fronteira: início branco de 2px;
Border-Ift: início branco de 2px;
Direita-direita: início branco de 2px;
Top de borda: início branco de 2px;
Esquerda: 0px; Posição: Absoluto;
Top: 0px; Visibilidade: escondida;
Largura: 300px;
Cada de camada-background: Lightgreen
}
a {font-size: 9pt; cor:#000000}
A: link {decoração de texto: nenhum}
A: Hover {Text-Decoration: Nenhum; cor: #ffffff}
A: Visitado {decoração de texto: nenhum}
.40pt {Size da fonte: 40pt; cor:#ub39a1; font-family: Weend Amber tradicional}
</style>
<Script Language = "JavaScript">
função menuin () // menu ocultar
{
if (n4) {
ClearTimeout (out_id)
if (menu.top> menuh*-1+20+10) {
MENU.TOP -= 8
in_id = setTimeout ("menuin ()", 1)
}
caso contrário, se (menu.top> menuh*-1+20) {
MENU.TOP--
in_id = setTimeout ("menuin ()", 1)
}
}
outro {
ClearTimeout (out_id)
if (MENU.PIXELTOP> MENUH*-1+20+10) {
MENU.PIXELTOP -= 8
in_id = setTimeout ("menuin ()", 1)
}
caso contrário, if (menu.pixeltop> menuh*-1+20) {
MENU.PIXELTOP--
in_id = setTimeout ("menuin ()", 1)
}
}
}
Função Menuout () // Exibição de menu
{
if (n4) {
ClearTimeout (in_id)
if (menu.top <-10) {
MENU.TOP += 4
out_id = setTimeout ("Menuout ()", 1)
}
else if (menu.top <0) {
MENU.TOP ++
out_id = setTimeout ("Menuout ()", 1)
}
}
outro {
ClearTimeout (in_id)
if (menu.pixeltop <-10) {
MENU.PIXELTOP += 2
out_id = setTimeout ("Menuout ()", 1)
}
else if (menu.pixeltop <0) {
MENU.PIXELTOP ++
out_id = setTimeout ("Menuout ()", 1)
}
}
}
function abhoover () {
ClearTimeout (f_out)
F_over = setTimeout ("menuout ()", 10)
}
função Fireout () {
ClearTimeout (f_over)
F_out = setTimeout ("menuin ()", 10)
}
function init () {
if (n4) {
menu = document.d1
MENUH = MENU.Document.Height
MENU.TOP = MENU.Document.Height*-1+20
MENU.ONMOUSEOVER = MENUTO
MENU.ONMOUSEOUT = MENUIN
MENU.VISIBILIDADE = "Visible"
}
else if (e4) {
menu = d1.style
MENUH = D1.OFFSETHEIO
D1.style.pixeltop = d1.offsetheight*-1+20
D1.onMouseOver = FIRMOOVER
D1.onMouseOut = BOMPADE
D1.style.visibility = "visível"
}
}
F_over = f_out = in_id = out_id = null
n4 = (document.layers)? 1: 0
e4 = (document.all)? 1: 0;
</script>
</head>
<corpo onload = "init ()">
<div id = "d1">
<tabela>
<Tbody>
<tr>
<td align = "meio" bgcolor = "ub39a1" rowspan = "2"> <b style = "cor: ub39a1">
M <br>
E <br>
N <br>
U </b> </td>
<td> <br> <br> <ul>
<li> <a href = "#nogo">
Opção 1 </a>
</li>
<li> <a href = "li#nogo">
Opção 2 </a>
</li>
<li> <a href = "#nogo">
Opção 3 </a>
</li>
<li> <a href = "#nogo">
Opção 4 </a>
</li>
<li> <a href = "#nogo">
Opção 5 </a>
</li>
</ul>
</td>
<td> <br> <br> <ul>
<li> <a href = "#nogo">
Opção 6 </a>
</li>
<li> <a href = "#nogo">
Opção 7 </a>
</li>
<li> <a href = "#nogo">
Opção 8 </a>
</li>
<li> <a href = "#nogo">
Opção 9 </a>
</li>
<li> <a href = "#nogo">
Opção 10 </a>
</li>
</ul>
</td>
</tr>
<tr>
<td align = "direita" colspan = "2">
</td>
</tr>
</tbody>
</tabela>
</div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.