我有一个非常简单的导航菜单,可以在点击时打开。然而,它只是弹出到屏幕上,我希望它“滑动”下来。我的 JavaScript 经验很少,但我正在努力学习。如果可能的话,我真的很想避免使用 JQuery。有没有一种方法可以简单地添加到我拥有的 JavaScript 中,这样我就不必大量更改 html 和 CSS 并且它会滑动?预先感谢您的任何帮助。
这是我目前使用的代码:
HTML:
<table id="nav_menu">
<tr>
<td><a href="index.html" class="no_submenu">Home</a></td>
<td onmouseover="showmenu('about_us_menu')" onmouseout="hidemenu('about_us_menu')"><a class="with_submenu">About Us <img src="images/menu_down.png" /></a>
<table class="sub_menu" id="about_us_menu">
<tr><td><a href="about_us/link1.html">link1</a></td></tr>
<tr><td><a href="about_us/link2.html">link2</a></td></tr>
<tr><td><a href="about_us/link3.html">link3</a></td></tr>
</table>
</td>
</tr>
</table>
CSS:
table.sub_menu {
position: absolute;
visibility: hidden;}
JAVASCIPT:
function showmenu(elmnt) {
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt) {
document.getElementById(elmnt).style.visibility="hidden";
}