【CSS】CSSでハンバーガーボタンを作る方法とは?【CSS】CSSでハンバーガーボタンを作る方法とは?2016.03.25CSSレスポンシブスマートフォンサイトでドロワーメニューを作る際に、上の画像のように“≡”をボタンのようにすることがほとんどだと思います。文字入力で「きごう」を変換して候補を見ていくと「≡」が出てくるので、HTMLソースにそのまま「≡」を入力して作る...というのも1つの方法ではありますが、ドロワーメニューで作成するのであれば、下の見本のように「≡」を押したら「×」に変化する...という変化をさせた方が見た目的にもわかりやすかったりします。ハンバーガーボタンを表示させるHTMLソースを記述するまず、ハンバーガーボタンを表示させるソースを、ハンバーガーボタンを表示させたいところに記述します。今回は見本として以下のように設定しました。続いて、CSSでハンバーガーボタンを作成しましょう。今回は下のように設定しました。pointer;}解説としては以下のようになります。absolute;でボタンをどこでも設置できるようにしておきます。widthで幅を指定しておくことで、ハンバーガーボタンをちゃんと押さないとCSSが適用しないよう設定。content要素で“≡”を設定。≡の色をcolorで設定。今回は黒にするため#000と設定。font-sizeで≡の大きさを設定する。≡の設置場所をrightやtopで設定。左側に≡を起きたい場合はleftで値を設定しましょう。以上のようにCSSを設定することでハンバーガーボタンを作成することが可能になります!特に2.のwidthの設定はちゃんとしておかないと、ハンバーガーボタン以外のところを押しても反応するようになってしまうので、この設定は必ずしておきましょう。続いてハンバーガーボタンを押したらボタンのデザインを変更する方法についてご紹介します!上にある見本のハンバーカーボタンを押すと、「≡」が「×」に変わると思います。jQueryでハンバーガーボタンを押した時にはクラスを追加するまず、jQueryで下記のように設定します。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”が追加/削除されるようになります。続いてclass=”on”が追加された時のCSSを設定してあげます。"×";}上のように記述することで、#menu-btnにclass=”on”が追加された時には「≡」が「×」になるよう設定されました。