0

onclick を開く非常にシンプルなナビゲーション メニューがあります。ただし、画面にポップするだけなので、代わりに「スライド」させたいと思います。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";
}
4

1 に答える 1

0

jQuery の slideDown 関数を使用できます。

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

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

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

EDIT：jQueryを避けたいことに気づきました。その場合は、この前の質問を参照してください。 jQuery を使用しない JavaScript スライドダウン

于 2013-01-17T15:38:25.477 に答える