Inspired by the post at http://css-tricks.com/three-line-menu-navicon/ describing these different methods of creating that mobile "hamburger" menu icon. I stole the code in the HTML page almost entirely from the above mentioned page. Also, the SVG file was taken from https://gist.github.com/epeli/8899548.
Last active
August 29, 2015 14:09
-
-
Save dwvisser/3346a0488cb3ca86e8b8 to your computer and use it in GitHub Desktop.
Hamburger Menu Icons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment