Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

How Do I Make A Menu Pop Up When The User Clicks The Menu Button?

Post a Comment
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

Solution 1:

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><metacharset="utf-8"><title>My menu is ALIVEEEE</title><style>.menu {
                display: none;   
            }
            
            .menu.opened {
                display: block;
            }
        </style></head><body><ahref=""class="open-menu">Toggle menu</a><navclass="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>

Post a Comment for "How Do I Make A Menu Pop Up When The User Clicks The Menu Button?"