メニュー – css menu –

cssのみで メニュー アイコンを作成してみました。これも簡単に出来ますね。

ソース

html

<div class="ico_menu"></div>

css

/* 真ん中 */
.menu {
	font-size: 100px;
	position: relative;
	width: 1.6em;
	height: 0.2em;
	background-color: #39a9d6;
}
/* 上 */
.menu::before {
	position: absolute;
	content: "";
	top: -0.7em;
	left: 0;
	width: 1.6em;
	height: 0.2em;
	background-color: #39a9d6;
}
/* 下 */
.menu::after {
	position: absolute;
	content: "";
	bottom: -0.7em;
	left: 0;
	width: 1.6em;
	height: 0.2em;
	background-color: #39a9d6;
}