Skip to content

Instantly share code, notes, and snippets.

@dwvisser

dwvisser/REAMDE.md

Last active August 29, 2015 14:09
Show Gist options
  • Save dwvisser/3346a0488cb3ca86e8b8 to your computer and use it in GitHub Desktop.
Save dwvisser/3346a0488cb3ca86e8b8 to your computer and use it in GitHub Desktop.
Download ZIP
Hamburger Menu Icons
Raw
hamburger.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
font-size: 20pt;
}
.box-shadow-menu {
position: relative;
padding-left: 1.25em;
}
.box-shadow-menu:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1em;
height: 0.26em;
background: black;
box-shadow:
0 0.37em 0 0 black,
0 0.76em 0 0 black;
}
.gradient-menu {
padding-left: 1.25em;
position: relative;
}
.gradient-menu:before {
content: "";
position: absolute;
left: 0;
top: 0.21em;
bottom: 0.21em;
width: 1em;
background: -moz-linear-gradient(
top,
black, black 26%,
white 26%, white 37%,
black 37%, black 63%,
white 63%, white 74%,
black 76%, black 100%
);
}
</style>
<title>Hamburger Menu Icons</title>
</head>
<body>
<a href="#menu">
<img src="menu.svg" alt="">
SVG Menu
</a>
<br>
<br>
<a href="#menu">
☰ Unicode Menu
</a>
<br>
<br>
<a href="#menu" class="box-shadow-menu">
Box Shadow CSS Menu
</a>
<br>
<br>
<a href="#menu" class="gradient-menu">
Gradient CSS Menu
</a>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
menu.svg
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
<g>
</g>
<path d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z" fill="#000000" />
</svg>
Raw
REAMDE.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment