How Do I Make A Menu Pop Up When The User Clicks The Menu Button?
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>
<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>
Post a Comment for "How Do I Make A Menu Pop Up When The User Clicks The Menu Button?"