Create a CSS-only Menu Icon

Create a CSS-only Menu Icon

The universal icon for a menu is well known among both coders and website users alike. If you do not know what I am referring to, then you probably do not look at websites on a mobile device. I am talking about the three-line symbol. Firefox for desktop even use this symbol for their complete menu.

There are various ways to create this symbol for your website. I will show you the quick, easy way that I do it using CSS borders and only one HTML tag with a pseudo element.

The HTML is very simple.

<a class="menu-toggle">Menu</div>

The CSS is two parts, the outer borders are created with the actual container element while the middle border is created and positioned with a pseudo element.

.menu-toggle {
	border-top:6px solid #828282;
	border-bottom:6px solid #828282;
	display:inline-block;
	height:30px;
	margin-top:-15px;
	position:absolute;
	right:20px;
	text-indent:-999px;
	top:50%;
	width:40px;
}
.menu-toggle:before {
	border-top:6px solid #828282;
	content:"";
	left:0;
	position:absolute;
	top:6px;
	width:100%;
}

I used pixel sizes for mine, but you can also play around with it and use ems so that it is more flexible. The properties can be changed to fit your needs, but keep in mind that if you change the height or border-width of the icon, you should make other adjustments as well, such as the margin of the original element and positioning of the pseudo element.

If you would like to create an active state, simply change the border colors as shown below.

.menu-toggle.on {
	border-top-color:#ff0;
	border-bottom-color:#ff0
}
.nav-toggle.on:before {
	border-top-color:#ff0;
}