Make a Mobile Nav “Menu” Icon with Pure CSS
You know how Facebook and like, a million other websites, have those icons that look like three bars and when you click them a menu appears? Well you can certainly make those with images, or better yet icon fonts, but why not just use 100% Pure, Level 3 CSS?
Here’s just how you can do that. You’re HTML:
<a id="i-nav-display">Menu</a>
Your CSS:
#i-nav-display, #i-nav-display:after, #i-nav-display:before {
position:absolute;
width:35px;
height:5px;
background:white;
border-radius:20px;
}
#i-nav-display {
display:block;
text-indent:-999em;
right:15px;
top:25px;
}
#i-nav-display:after, #i-nav-display:before {
content:"\00a0";
left:0;
}
#i-nav-display:before {
top:-10px;
}
#i-nav-display:after {
top:10px;
}
Check this screenshot for an example of this in the wild at Wand’rly Magazine on iPhone / Android phones:
Up Next: How to Override W3 Total Cache for Testing (in 14 words or less).