View the Simple Navicon CSS Demo
The Navicon is the 3 horizontal line mobile menu symbol used to indicate a mobile menu toggle option. The CSS typically used to generate these icons is fairly complicated, with absolutely positioned before/after pseudo elements used to achieve the triple border.
Here is the most simple navicon CSS currently available. It will generate a perfect navicon without the extra bloat. Eliminating the pseudo elements not only makes the css more simple, but you gain backwards compatibility with older browsers (you know, just in case your mobile site loads on grandma’s 640×480 Compaq Presario). If you find an easier & better way, let me know in the comments.
View the Demo
The CSS:
|
1 2 3 4 5 6 7 8 |
.navicon { height: 6px; width: 34px; margin: 20px; border-top: 18px double #000; border-bottom: 6px solid #000; font-size:0; } |
The view this navicon within a real mobile menu, check out this simple mobile menu system tutorial.
here is a little more robust of an option:
http://jsfiddle.net/Pryme8/8MGPE/