Cet article décrit la méthode d'utilisation de JS pour glisser vers le bas pour cacher les menus. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La copie de code est la suivante:
<html>
<adal>
<Title> Menu caché caché dans le coin supérieur gauche de la page Web, détectant les diapositives de la souris </TITAL>
<style> # d1 {
Color en arrière-plan: bleu;
Border-Bottom: Blanc 2px Début;
Border-Left: Blanc 2px Début;
Border-droite: début blanc 2px;
Border-top: blanc 2px blanc;
Gauche: 0px; Position: absolue;
En haut: 0px; Visibilité: cachée;
Largeur: 300px;
Couche-fond Color: Lightgreen
}
A {taille de police: 9pt; couleur: # 000000}
a: lien {text-décoration: aucun}
A: Hover {text-decoration: Aucun; Couleur: #ffffff}
A: Visité {text-décoration: Aucun}
.40pt {Font-Size: 40pt; Couleur: # UB39A1; FONT-FAMILY: Wençing Amber traditionnel}
</ style>
<script linguisse = "javascript">
fonction menuin () // menu masquer
{
if (n4) {
ClearTimeout (Out_ID)
if (menu.top> menuh * -1 + 20 + 10) {
menu.top - = 8
in_id = setTimeout ("menuIn ()", 1)
}
else if (menu.top> menuh * -1 + 20) {
menu.top--
in_id = setTimeout ("menuIn ()", 1)
}
}
autre {
ClearTimeout (Out_ID)
if (menu.pixeltop> menuh * -1 + 20 + 10) {
menu.pixeltop - = 8
in_id = setTimeout ("menuIn ()", 1)
}
else if (menu.pixeltop> menuh * -1 + 20) {
menu.pixeltop--
in_id = setTimeout ("menuIn ()", 1)
}
}
}
Function Menuout () // Menu Affichage
{
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)
}
}
autre {
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)
}
}
}
fonction fireover () {
ClearTimeout (f_out)
F_over = setTimeout ("menuout ()", 10)
}
function fireout () {
ClearTimeout (f_over)
F_out = setTimeout ("menuIn ()", 10)
}
fonction init () {
if (n4) {
menu = document.d1
menuh = menu.Document.height
menu.top = menu.document.height * -1 + 20
menu.onmouseOver = menuout
menu.onmouseout = menuin
menu.visibilité = "visible"
}
else if (e4) {
menu = d1.style
menuh = d1.offsetheight
D1.style.pixeltop = d1.offsetheight * -1 + 20
D1.onMouseOver = Fireover
D1.onmouseout = Fireout
D1.style.visibilité = "visible"
}
}
F_over = f_out = in_id = out_id = null
n4 = (document.layers)? 1: 0
e4 = (document.all)? 1: 0;
</cript>
</ head>
<body onload = "init ()">
<div id = "d1">
<ballage>
<Tbody>
<tr>
<td align = "middle" bgcolor = "ub39a1" rowspan = "2"> <b style = "couleur: ub39a1">
M <br>
E <br>
N <br>
U </b> </td>
<Td> <br> <br> <ul>
<li> <a href = "# nogo">
Option 1 </a>
</li>
<li> <a href = "li # nogo">
Option 2 </a>
</li>
<li> <a href = "# nogo">
Option 3 </a>
</li>
<li> <a href = "# nogo">
Option 4 </a>
</li>
<li> <a href = "# nogo">
Option 5 </a>
</li>
</ul>
</td>
<Td> <br> <br> <ul>
<li> <a href = "# nogo">
Option 6 </a>
</li>
<li> <a href = "# nogo">
Option 7 </a>
</li>
<li> <a href = "# nogo">
Option 8 </a>
</li>
<li> <a href = "# nogo">
Option 9 </a>
</li>
<li> <a href = "# nogo">
Option 10 </a>
</li>
</ul>
</td>
</tr>
<tr>
<td align = "droit" colspan = "2">
</td>
</tr>
</tbody>
</ table>
</div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.