スマートフォンサイトでドロワーメニューを作る際に、上の画像のように“≡”をボタンのようにすることがほとんどだと思います。
文字入力で「きごう」を変換して候補を見ていくと「≡」が出てくるので、HTMLソースにそのまま「≡」を入力して作る…というのも1つの方法ではありますが、ドロワーメニューで作成するのであれば、下の見本のように「≡」を押したら「×」に変化する…という変化をさせた方が見た目的にもわかりやすかったりします。
そこで今回は、CSSでハンバーガーボタンを作る方法をご紹介したいと思います！
目次
1. ハンバーガーボタンを表示させるHTMLソースを記述する
まず、ハンバーガーボタンを表示させるソースを、ハンバーガーボタンを表示させたいところに記述します。
今回は見本として以下のように設定しました。
<div id="menu-btn"></div>
2. CSSでハンバーガーボタンを作成
続いて、CSSでハンバーガーボタンを作成しましょう。
今回は下のように設定しました。
#menu-btn::before {
position: absolute;
width: 30px;
content: "≡";
color: #000;
font-size: 50px;
top: 20px;
right: 2.5%;
cursor: pointer;
}
解説としては以下のようになります。
1. position: absolute;でボタンをどこでも設置できるようにしておきます。
2. widthで幅を指定しておくことで、ハンバーガーボタンをちゃんと押さないとCSSが適用しないよう設定。
3. content要素で“≡”を設定。
4. ≡の色をcolorで設定。今回は黒にするため#000と設定。
5. font-sizeで≡の大きさを設定する。
6. ≡の設置場所をrightやtopで設定。もし左側に≡を起きたい場合はleftで値を設定しましょう。
以上のようにCSSを設定することでハンバーガーボタンを作成することが可能になります！
特に2.のwidthの設定はちゃんとしておかないと、ハンバーガーボタン以外のところを押しても反応するようになってしまうので、この設定は必ずしておきましょう。
応用：ハンバーガーボタンを押したらボタンのデザインを変更する方法
続いてハンバーガーボタンを押したらボタンのデザインを変更する方法についてご紹介します！
上にある見本のハンバーカーボタンを押すと、「≡」が「×」に変わると思います。
ちなみにこの「×」を押すと再び「≡」になると思いますが、このように設定することでドロワーメニューが開いている時にはハンバーガーボタンが「×」になり、「×」を押すとドロワーメニューが消える…といった仕様にすることが可能になります！
1. jQueryでハンバーガーボタンを押した時にはクラスを追加する
まず、jQueryで下記のように設定します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$("#menu-btn").click(function(){
$(this).toggleClass("on");
});
});
</script>
このように記述することで、#menu-btnを押した時にはclass=”on”が追加／削除されるようになります。
2. CSSを設定
続いてclass=”on”が追加された時のCSSを設定してあげます。
#menu-btn.on::before {
content: "×";
}
上のように記述することで、#menu-btnにclass=”on”が追加された時には「≡」が「×」になるよう設定されました。
以上のようにjQueryとCSSを設定することで「≡」を押した時には「×」に変わるようになります！
まとめ
以上がCSSでドロワーメニューを設定する方法になります！
スマートフォンサイトを作成する上でドロワーメニューは必要なものになることが多いので、是非とも覚えておきましょう！
