简单的导航菜单需要滑出动画

Simple Navigation Menu needing slideout animation

本文关键字：动画 导航 菜单 简单      更新时间：2023-09-26

我有一个非常简单的导航菜单，点击打开。然而，它只是弹出到屏幕上，我希望它"滑"下来，而不是。我有很少的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";
}

可以使用jQuery的slideDown函数

http://api.jquery.com/slideDown/

function showmenu(elmnt) {
    $('#' + elmnt).slideDown("slow");
}
function hidemenu(elmnt) {
    $('#' + elmnt).slideUp("slow");
}

编辑:刚刚注意到你想避免使用jQuery，在这种情况下，请参阅前面的问题。

相关文章：