Skip to content

Instantly share code, notes, and snippets.

@jreiher2003

jreiher2003/hamburger-button-drawer.html

Last active October 14, 2015 21:42
Show Gist options
  • Save jreiher2003/08ef0902c11b47a02fd1 to your computer and use it in GitHub Desktop.
Save jreiher2003/08ef0902c11b47a02fd1 to your computer and use it in GitHub Desktop.
Download ZIP
inline JavaScript for showing and hiding bar menu content
Raw
hamburger-button-drawer.html
<body>
<header class="header">
<div class="header__inner">
<img class="header__logo" src="images/city.png" alt="iconic view of a cityscape">
<h1 class="header__title">
The Brighton Times
</h1>
<a id="menu" class="header__menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/>
</svg>
</a>
</div>
</header>
<nav id="drawer" class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#">News</a></li>
<li class="nav__item"><a href="#">Events</a></li>
<li class="nav__item"><a href="#">Culture</a></li>
<li class="nav__item"><a href="#">Blog</a></li>
</ul>
</nav>
<script>
/*
* Open the drawer when the menu ison is clicked.
*/
var menu = document.querySelector('#menu');
var main = document.querySelector('main');
var drawer = document.querySelector('.nav');
menu.addEventListener('click', function(e) {
drawer.classList.toggle('open');
e.stopPropagation();
});
main.addEventListener('click', function() {
drawer.classList.remove('open');
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment