當用戶單擊菜單按鈕時，如何彈出菜單？

Question

我是網絡開發的新手，我沒有太多經驗。 我一直在嘗試創建一個菜單，當用戶點擊它時會顯示。 我已經能夠彈出它但它不會保持可見。 它會在一秒鍾內變得可見，並再次變為不可見。 我也試過'display'屬性。 但是，這有相同的結果。 這是我的代碼：

<head>
<script type="text/javascript">
    function opnmenu () {
        document.getElementById("menu").style.visibility="visible";
    }
</script>
</head>
<body onLoad="document.getElementById('menu').style.visibility='hidden';">
    <div id="menubar">
        <table>
            <tr>
                <td>
                    <div id="menuimg">
                        <form>
                            <input type="image" class="menubut" src="menu.png" alt="submit" onClick="opnmenu()">
                        </form>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <br>
    <h1> Entrepreneur</h1>
    <hr>
    <div id="menu">
        <ul>
            <li>Home</li>
            <li>Motivation</li>
            <li>Books</li>
            <li>Videos</li>
        </ul>
    </div>
</body>

任何幫助將不勝感激。 謝謝。

Answer 1

以下是使用純javascript（一些代碼來自其他注釋）的示例，其中包含更合適的HTML5：
http://jsfiddle.net/59su4/1/

visibility: hidden的問題是菜單將占據通常可見的位置。 以下是visibility屬性的示例：
http://jsfiddle.net/59su4/2/

（注意隱藏菜單占用的空白區域）

[編輯]在作者評論之后，我將HTML，JS和CSS混合到一個代碼中，以顯示每個元素在頁面中的位置。

完整頁面

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My menu is ALIVEEEE</title>

        <style>
            .menu {
                display: none;   
            }

            .menu.opened {
                display: block;
            }
        </style>
    </head>

    <body>
        <a href="" class="open-menu">Toggle menu</a>

        <nav class="menu">
            <ul>
                <li>Home</li>
                <li>Motivation</li>
                <li>Books</li>
                <li>Videos</li>
            </ul>
        </nav>

        <p>
            To facilitate the process, AI Lab hackers had built a system that displayed both the "source" and "display" modes on a split screen. Despite this innovative hack, switching from mode to mode was still a nuisance.
        </p>

        <script>
            var openMenuBtn = document.getElementsByClassName('open-menu')[0],
                menu        = document.getElementsByClassName('menu')[0];

            openMenuBtn.addEventListener('click', function ( e ) {
                // We don't want the empty link to be followed
                e.preventDefault();
                // Toggle the menu
                menu.classList.toggle('opened');
            }, false);
        </script>
    </body>
</html>

當用戶單擊菜單按鈕時，如何彈出菜單？

問題描述

1 個解決方案

解決方案1
2 已采納 2014-07-17 18:54:41

完整頁面

當用戶單擊菜單按鈕時，如何彈出菜單？

問題描述

1 個解決方案

解決方案1 2 已采納 2014-07-17 18:54:41

完整頁面

解決方案1
2 已采納 2014-07-17 18:54:41