Skip to content

Instantly share code, notes, and snippets.

@josephernest

josephernest/hamburger_icon.md

Created December 19, 2016 14:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save josephernest/64a16378349a130dc93e669e41295357 to your computer and use it in GitHub Desktop.
Save josephernest/64a16378349a130dc93e669e41295357 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hamburger_icon.md

Here is a solution, inspired of DenisSheremet's comment and slightly modified.

enter image description here

document.getElementById('nav').addEventListener('click', function() { 
    document.getElementById('hello').className = ''; 
});

#nav { display: block; position: fixed; top: 0; left: 0; width: 35px; height: 35px; background-color: #ff1972; cursor: pointer; }
.hamburger-body { height: 3px; margin: 16px 6px; background: white; position: relative; }
.hamburger-body:before, .hamburger-body:after { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: white; }
.hamburger-body:before { transform: translateY(-8px); }
.hamburger-body:after { transform: translateY(8px); }
.hidden { display: none; }
#hello { margin-top: 100px; }

<div id="nav"><div class="hamburger-body"></div></div>

<div id="hello" class="hidden">Hello!</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment