How do I make a menu pop up when the user clicks the menu button?

Question

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.

Are you clicking the image input before the page is done loading? — Nate Whittaker, Jul 17 '14 at 16:50

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

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

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)

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

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 17 '14 at 18:54

Niflhel

663
1
5
19

You don't technically need `.menu.opened` in your CSS, you could get away with just `.opened` – RevanProdigalKnight Jul 17 '14 at 18:58
@RevanProdigalKnight That's not wrong but the problem is that classes like `.opened` or `.active` are often used by several plugins to perform states changes, with different styles. So being a little bit specific here will not hurt :) But again, just `.opened` would be a good option too. – Niflhel Jul 17 '14 at 19:07
It doesn't matter what I do, this code just doesnt work. I pasted it in a new document word for word (all of it), but the menu just doesnt open at all. I tried using notepad, and notepad++ for this and tried running it on Chrome, Firefox and Safari but it just doesn't work. – Anon512 Jul 17 '14 at 23:26
1

@Anon512 I tried again with the exact same code, and it still works for me. Be sure to put your javascript at the end of your HTML, between ` – Niflhel Jul 17 '14 at 23:40
@Niflhel Does that mean that putting the js code in an external document and linking it to the main document wont work too? – Anon512 Jul 18 '14 at 01:12
1

@Anon512 it will really depend on where you are including your external JS document. If it's at the end (before the tag), it will be ok. Else, you can check the if the DOM is ready javascriptkit.com/dhtmltutors/domready.shtml – Niflhel Jul 18 '14 at 01:27

How do I make a menu pop up when the user clicks the menu button?

1 Answers1

FULL PAGE

Linked