用户单击菜单按钮时如何弹出菜单?

问题描述：

我是Web开发的新手，我没有很多经验.我一直试图创建一个菜单，当用户单击该菜单时该菜单可见.我已经能够弹出它，但它仍然不可见.一秒钟它变为可见，然后再次变为不可见.我也尝试过使用'display'属性.但是，结果相同.这是我的代码:

I'm new to web development and I dont have much experience. I have been trying to create a menu that becomes visible when the user clicks it. I have been able to make it pop-up but it doesnt stay visible. It becomes visible for a second and turns invisible again. I have tried this with the 'display' property as well. However, that has the same results. Here is my code:

<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>

任何帮助将不胜感激.谢谢.

Any help will be appreciated. Thank You.

答

以下是使用纯JavaScript(一些代码来自其他注释)和更合适的HTML5的示例:
http://jsfiddle.net/59su4/1/

Here is a sample using pure javascript (some code comes from the other comments) with more proper HTML5:
http://jsfiddle.net/59su4/1/

visibility:hidden 的问题在于，菜单将取代通常可见的菜单.这是具有 visibility 属性的示例:
http://jsfiddle.net/59su4/2/

The problem with visibility: hidden is that the menu will take the place it would normally take if it was visible. Here is an example with visibility property:
http://jsfiddle.net/59su4/2/

(请注意隐藏菜单占用的空白空间)

(notice the empty space taken by the hidden menu)

在作者发表评论后，我将HTML，JS和CSS混合为一个代码，以显示每个元素在页面中的位置.

after the author comment, I mixed the HTML, JS and CSS into a single code to show where each element goes in the page.

<!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>

用户单击菜单按钮时如何弹出菜单?

相关推荐