スマートホンなどに使われているハンバーガーメニューのアイコンを画像を使わずにCSSで作成しました。マウスでクリックすると３本線のハンバーガーメニューが「X」に変わるようにjqueryで操作しています。 ただの３本線ではメニューだとわかりにくいと思うので、枠で囲んで影をつけてボタンのように見えるようにしました。

スポンサーリンク

1.サンプル

menu

メニューをクリックすると「X」が表示されます。 背景を黒くして、:before、:afterを使用して２本の白線を引いて３本線に見えるようにしました。Xも同じように:before、:afterを使用して作りました。 サンプルでは見やすいようにサイズを２倍にしています。

2.html


<div id="hamburger-menu">
	<div id="menu-icon"></div>
	<span id="menu-text">menu</span>
</div>

3.CSS

アイコンを見やすいように２倍のサイズで描いていますので、実際に使用する場合はサイズを半分にします。 詳しい説明は、ソースのコメントを見てください。 


#hamburger-menu { /* アイコンの枠を作成 */
	width:		124px;
	height:		120px;
	margin:		24px;
	cursor:		pointer;
	display:	block;
	border:		1px solid #ccc;
	box-shadow:	1px 1px 1px #ccc;
	border-radius:	4px;
	text-align:	center;
	background-color:#fff;
}
#menu-text {
	width:		100%;
	font-size:	24px;
	margin-top:	12px;
	color:		#000;
	display:	block;
}

/*
	ハンバーガーメニューのアイコンを作成
*/
#menu-icon {
	position:	relative;
	display:	block;
	width:		92px;
	height:		68px;
	top:		16px;
	left:		16px;
	background-color:#000;	/* 背景を黒にする */
}
#menu-icon:before, #menu-icon:after {
	position:	absolute;
	left:		0;
	content:	"";
	width:		100%;
	border-top:	16px solid #fff; /* 白線を引く */
}
/* 上に12ピクセルあけて、16ピクセルの白線を引く */
#menu-icon:before {
	top:		12px;
}
/* 下に12ピクセルあけて、16ピクセルの白線を引く */
#menu-icon:after {
	bottom:		12px;
}

/*
	「X」の線を引く処理
*/
/* 背景が黒のアイコンの色を白くする */
#menu-icon.x {
	background-color:#fff; /* 背景色は白色 */
}
/* 12ピクセルの線を引き、線を中央にもっていくため下に16ピクセル移動して45度回転 */
#menu-icon.x:before {
	border-top:		12px solid #000; /* 黒の線を引く */
	-webkit-transform:	translateY(16px) rotate(45deg);
	transform:		translateY(16px) rotate(45deg);
}
/*　12ピクセルの線を引き、線を中央にもっていくため上に16ピクセル移動して-45度回転 */
#menu-icon.x:after {
	border-top:		12px solid #000; /* 黒の線を引く */
	-webkit-transform:	translateY(-16px) rotate(-45deg);
	transform:		translateY(-16px) rotate(-45deg);
}

4.jquery

メニューをクリックしたら、toggleClassを使用して、menu-iconの「x」を追加と削除を繰り返しています。


$(function() {
	$("#hamburger-menu").click(function() {
		$("#menu-icon").toggleClass("x");
		return false;
	});
});

5.サンプル2

どのように線を引いたか分かり易いように色をつけてみました。 白と黒は背景色で、赤、黄色、水色、青の線を引きました。 

#hamburger-menu2 {
	width:			124px;
	height:			120px;
	margin:			24px;
	cursor:			pointer;
	display:		block;
	border:			1px solid #ccc;
	box-shadow:		1px 1px 1px #ccc;
	border-radius:		4px;
	text-align:		center;
	background-color:	#fff; /* 背景色は白色 */
}
#menu-icon2 {
	position:		relative;
	display:		block;
	width:			92px;
	height:			68px;
	top:			16px;
	left:			16px;
	background-color:	#000; /* 背景色は黒色 */
}
#menu-icon2:before, #menu-icon2:after {
	position:		absolute;
	left:			0;
	content:		"";
	width:			100%;
}
/* 上に12ピクセルあけて、16ピクセルの白線を引く */
#menu-icon2:before {
	border-top:		16px solid #f00; /* 赤色 */
	top:			12px;
}
/* 下に12ピクセルあけて、16ピクセルの白線を引く */
#menu-icon2:after {
	border-top:		16px solid #ff0; /* 黄色 */
	bottom:			12px;
}

/*
	X」の線を引く処理
 */
/* 背景が黒のアイコンの色を白くする */
#menu-icon2.x {
	background-color:	#fff; /* 背景色は白色 */
}
/* 12ピクセルの線を引き、線を中央にもっていくため下に16ピクセル移動して45度回転 */
#menu-icon2.x:before {
	border-top:		12px solid #0ff; /* 水色 */
	-webkit-transform:	translateY(16px) rotate(45deg);
	transform:		translateY(16px) rotate(45deg);
}
/*　12ピクセルの線を引き、線を中央にもっていくため上に16ピクセル移動して-45度回転 */
#menu-icon2.x:after {
	border-top:		12px solid #00f; /* 青色 */
	-webkit-transform:	translateY(-16px) rotate(-45deg);
	transform:		translateY(-16px) rotate(-45deg);
}