Skip to content

Instantly share code, notes, and snippets.

@flipsi

flipsi/hamburgerMenu.html

Created December 9, 2015 16:26
Show Gist options
  • Save flipsi/747a1cd779cc707d7846 to your computer and use it in GitHub Desktop.
Save flipsi/747a1cd779cc707d7846 to your computer and use it in GitHub Desktop.
Download ZIP
Hamburger Menu with CSS
Raw
hamburgerMenu.html
<!DOCTYPE html>
<html>
<head>
<title>We have a nice menu here</title>
<style type="text/css">
#menu {
content: "";
position: relative;
/*left: 0;*/
display: block;
width: 14px;
/*top: 0;*/
height: 0;
-webkit-box-shadow: 1px 10px 1px 1px #69737d, 1px 16px 1px 1px #69737d, 1px 22px 1px 1px #69737d;
box-shadow: 0 10px 0 1px #69737d, 0 16px 0 1px #69737d, 0 22px 0 1px #69737d;
}
</style>
</head>
<body>
<h1>We have a nice menu here</h1>
<h2>(without an extra HTTP request for an image)</h2>
<h2>CSS Solution that also works in Android devices</h2>
<a href="http://stackoverflow.com/questions/19282760/what-is-a-fallback-for-the-hamburger-icon-or-html-entity-9776">See here</a>
<br/>
<br/>
<br/>
<br/>
<div id="menu">
<!-- <a id="metaMenu" href="#">&#9776;</a> -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment