もっと簡単に…
手軽にハンバーガーボタンを作れる「ハンバーガーボタンジェネレーター」を作りました。縦・横・線幅を入力すれば自動的にコードが生成されます。こちらからどうぞ→ハンバーガーボタンジェネレーター
他にもハンバーガーボタン×ドロワーメニューのテンプレートもあります。詳しくはこちら
解説
3本のハンバーガーボタンがクリックするとアニメーションと共に×に変化するハンバーガーボタンです。時々みますよね。そして、このサイトにも採用しています。以下がそのソースコードになります。
<button type="button" class="btn_menu">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="menu">MENU</span>
<span class="close">CLOSE</span>
</button>
/* ボタンタグ設定 */
button {
display: block;
background: none;
border: none;
padding: 0;
width: 42px;
color: #333;
letter-spacing: 0.1em;
cursor: pointer;
position: fixed;
top: 20px;
left: 20px;
z-index: 1001;
text-align: center;
outline: none;
}
/* ハンバーガーボタン3本線 */
button span.bar {
display: block;
height: 2px;
background-color: #333;
margin: 10px 0;
transition: all 0.2s;
transform-origin: 0 0;
}
button .close {
letter-spacing: 0.08em;
display: none;
}
button .menu {
display: block;
}
/* メニューアクティブ時 */
button.active span.bar {
width: 49px;
}
button.active .bar1 {
transform: rotate(30deg);
}
button.active .bar2 {
opacity: 0;
}
button.active .bar3 {
transform: rotate(-30deg);
}
button.active .menu {
display: none;
}
button.active .close {
display: block;
}
// jQueryは読み込み済み前提
$(function(){
$('.btn_menu').click(function(){
$(this).toggleClass('active');
});
})
画像は一切使わないのがポイント
アニメーションを使う関係上、画像を使うと面倒ですので、HTML+CSSでハンバーガーボタンを構成します。HTMLの<span class="bar">がそれぞれ3本線になります。MENUとアクティブ時のCLOSE表記がそれに続いています。
<button type="button" class="btn_menu">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="menu">MENU</span>
<span class="close">CLOSE</span>
</button>
そして、このbarに大きさと色、太さを指定し、さらに動きを付けるためにtransitionのCSSを掛けています。trasnform-originで変形（transform）の基準を左上にしています。
button span.bar {
display: block;
height: 2px;
background-color: #333;
margin: 10px 0;
transition: all 0.2s;
transform-origin: 0 0;
}
それをjQueryによってクリックするとクラスを付け加えたり取り除いたりしています。buttonをクリックするとbuttonにactiveのクラスが付き、
button.active span.bar {
width: 49px;
}
button.active .bar1 {
transform: rotate(30deg);
}
button.active .bar2 {
opacity: 0;
}
button.active .bar3 {
transform: rotate(-30deg);
}
button.active .menu {
display: none;
}
button.active .close {
display: block;
}
bar1とbar3は30度ずつ曲がります。bar2はいらないのでフェードアウトします。ただし3本で並んでいる関係上、全てをdisplay:noneにしてしまうと真ん中が抜けてしまうのでopacityを0にしているだけです。また、斜めになる分だけ長さも必要になりますので49pxに伸ばしています。active時は「MENU」の文字は消え、代わりに「CLOSE」の文字が出てきます。
再度クリックすると、activeのクラスがなくなるのでもとの形に戻ります。
これでアニメーションで×印になるハンバーガーボタンの完成です。
余談
CSSのみで作る方法もありますが、個人的にはあまりオススメはしていません。以下に詳しく書いてあります。