スポンサーリンク
1.サンプル
メニューをクリックすると「X」が表示されます。 背景を黒くして、:before、:afterを使用して2本の白線を引いて3本線に見えるようにしました。Xも同じように:before、:afterを使用して作りました。 サンプルでは見やすいようにサイズを2倍にしています。
2.html
<div id="hamburger-menu">
<div id="menu-icon"></div>
<span id="menu-text">menu</span>
</div>
3.CSS
アイコンを見やすいように2倍のサイズで描いていますので、実際に使用する場合はサイズを半分にします。 詳しい説明は、ソースのコメントを見てください。
#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);
}
コメントを残す