簡単コピペで「動くハンバーガーボタン」を設置！はてブにも使えるカテゴリーをドロワーメニューにカスタマイズ★
やっとこさ少しずつブログのデザインを編集してきました。ほんの少しですが。
今日は簡単に設置した「動くハンバーガーボタン・ドロワーメニュー」についてご紹介したいと思います。
（やっとWEBデザインについて書く時がきました。はてな記法でソースコードも記入できるんですね。すごい！）
こんな感じで編集してます。
デザインテーマでお世話になったのはDUDE - テーマ ストア。
tsukuruiroiro.hatenablog.com
すご〜いです。ありがとうございます。めちゃくちゃかっこよくてお気に入り！！！
yaritakunai.hatenablog.com
そして、こちらの記事を参考にレスポンシブ対応もさせました。た、たすかる〜〜！！
そんで更に自分好みにしたくて、あんま考えずに簡単にちょっと変えられないかな〜と思って、こんな感じにしてみました。
グーグルフォントを読み込んでブログタイトルのフォントを変更。（それに伴ってブログタイトルもやっと決定！笑）ヘッダーの背景色も白にして、文字は黒、でもヘッダーのボトムにはドットのボーダーを引いてみました。
そして同時に設置したのが、ハンバーガーボタンです。
右上に固定で設置しています！
「≡」をクリックしたらアニメーションで「×」に変化し、再びクリックするとアニメーションで「≡」に戻ります。
まずは基本知識
ハンバーガーボタンとは？
この左上にある三本線のボタンが、「ハンバーガーボタン」。
名称の由来はこの三本線がハンバーガーに見えることから…だそうです。
これを押すと、にょきっと、いわゆるドロワーメニューが表れてくれるわけです。
（これを総称してハンバーガーメニューとも言うらしい）
出始めの頃こそユーザビリティとしてはどうなのか？なんて言われてましたが、スマホが普及した今ではもう、当たり前に「クリックするもの」という認識に変わってきましたね。
ドロワーメニューとは？
ドロワーメニューは、普段はしまってあるけれど、上記のようなハンバーガーボタンを押すと出てくるナビゲーションのことを言います。
名前の由来はドロワー（引き出し）のように出したりしまったりできることから…だそうです。
モバイルファーストとなった今では、このようにコンパクトにしまわれたメニューのおかげでさらに見やすく便利になりました。
「動く」ハンバーガーボタンで「開く、閉じる」が明確に！
今回ご紹介するのは「動く」ハンバーガーボタン。
なぜ動く必要があるのか？
それは、ユーザビリティに配慮した上で、「どうやって開いてどうやって閉じるか」を導いてあげなければならないからです。
ハンバーガーボタンは見慣れましたが、それを閉じるまでの導線は様々。
今では開かれたナビゲーション以外の場所をクリックしたら閉まるサイトもあれば、クリックしたハンバーガーボタンをもう一度クリックすれば閉まるサイトもあり、他にも開かれたナビゲーションの中に閉じるボタンが備わっているサイトもあったりと…、その動作は様々です。
全サイト統一された動きをしていればユーザー側としては良いのですが、より良いUIを目指してそれぞれの企業が競合している中で、優秀なデザイナーとプログラマーがいる限り、どれも横並びで同じ動作、というわけにはいきません。それはすばらしいこと。
だからこそ、メニューを開いてから閉じるまでの導線を、しっかりと作ってあげることが大切です。
今回設置したハンバーガーボタンは、三本線をクリックして開いたのちに、「×」閉じるマークに変形する動くハンバーガーボタンです。
その作り方を今回ご紹介します。
スマホで見やすく、を考える際には活用していけるのではないでしょうか。
それでは設置方法です。
HTML
ダッシュボード＞デザイン＞カスタマイズ＞ヘッダー＞タイトル下に、HTMLを挿入します。
<nav class="menu clearfix"> <div class="menu1"></div> <div class="menu2"></div> <div class="menu3"></div> </nav>
▲これがいわゆるハンバーガーボタン、三本線のHTMLになります。
親要素であるclass="menu"で、中の３つのdivをくくっていますが、こちらはcssの指示でもjavaの指示でも必要になってきます。
ちなみに中身にfloatをかけるので、親要素には同時にclearfixをかけると良いのかなーと思います。
<ul id="menu"> <li><a href="#">カテゴリー１</a></li> <li><a href="#">カテゴリー２</a></li> <li><a href="#">カテゴリー３</a></li> <li><a href="#">カテゴリー４</a></li> </ul>
▲これがドロワーメニューとなる、メニューの部分のHTMLになります。
ハンバーガーボタンを押すと出てくるやつですね。
はてなブログでカテゴリーをコンテンツメニューみたいにしたい！と思っていたので、私はカテゴリーをメニューとして扱ってますが、アバウトとか、なんか色々活用できると思います。
CSS
ダッシュボード＞デザイン＞カスタマイズ＞デザインCSSに、CSSを挿入します。
nav.menu { width:25px; height:30px; top: 80px; right:10px; position:fixed; cursor:pointer; overflow:hidden; z-index:9999; }
nav .menu1 { width:25px; height:2px; background-color: #000; top:0px; position:absolute; }
nav .menu2 { width:25px; height:2px; background-color: #000; top:8px; position:absolute; }
nav .menu3 { width:25px; height:2px; background-color: #000; top:16px; position:absolute; }▲ここで、ただの黒い棒を３つ作ります。ハンバーガーボタンになるやつです。
menu1、menu2、menu3を、親要素menuで括っています。
作りとしては分かりやすいと思うので大きさや太さなど自由に変えてみてください。
※はてブは上部に固定バナーが出て来るのでtop:80px分を空けています。
※今回は親要素をposition:fixedで固定させていますが、position:relativeで自由な位置に設置させることもできます。
nav .menu1,nav .menu2,nav .menu3
{ transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; /* Opera */ -moz-transition: all 0.5s ease-out; /* Firefox */
-webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */ -ms-transition: all 0.5s ease-out; /* IE */ }▲アニメーションの動きの指示を出します。
スピードなど自由に変えてみてください。
nav .menuclick1 { top:8px; -o-transform: rotate(405deg); -moz-transform: rotate(405deg); -webkit-transform: rotate(405deg);
-ms-transform: rotate(405deg); transform: rotate(405deg); }
nav .menuclick2 { background-color:rgba(255,255,255,0); }
nav .menuclick3 { top:8px; -o-transform: rotate(-405deg); -moz-transform: rotate(-405deg);
-webkit-transform: rotate(-405deg); -ms-transform: rotate(-405deg); transform: rotate(-405deg); }▲クリックした後の動きを指示。
menu1をクリックしたらmenuclick1。405degというのは360度プラス45度、つまり一回転ちょっと回ってくれます。
menu2をクリックしたらmenuclick2。真ん中の棒が消えます。opacity:0;でも消えるよ。
menu3をクリックしたらmenuclick3。マイナス405degで、menuclick1とは反対方向に一回転ちょっと回ってくれます。
角度は、45度傾けるだけでも良いのですが、もっとぐるりと回したかったので、こんな感じにしました。
いじってみると、面白い動きがたくさん出て来るかと思います！
ちなみにメニュー用のCSSはご自由に書いていただくのがベストかと思います！
私の場合は本当にざざっと作っただけなので、アイコンフォントを読み込んで黒い文字を書いて黒の枠で囲っただけの、PCスマホも見た目が変わらない簡単なものにしているだけです。（本当にやっつけですみません・・・）
が、今回お問い合わせもあったので、念のためうちのブログのメニューデザインを置いておきますね。（2017.07.11 追記）
#menu{
position: fixed;
font-weight: bold;
display: none;
right: 15px;
top: 100px;
list-style-type: none;
background-color: rgba(255, 255, 255, 1);
border: 2px solid #000;
padding: 20px 20px 0px 20px;
z-index: 9999;
}/*by misallychan.com*/
こちらがul（リスト）部分のデザインになっています。
コピペいただいて構いませんので、試してみてください。できればデザインはカスタマイズしたほうが良いかと思います＾＾
必須タグとしては「position: fixed;」と「display: none;」があればよいかと思います。position:fixedは、固定にしない場合は外してくださいね。
jQuery
ダッシュボード＞デザイン＞カスタマイズ＞ヘッダー＞タイトル下に、HTMLと同様に挿入しました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
▲まずjQueryを読み込みます。これは必須ですが、既に読み込んである場合は大丈夫です。
<script>
$(function(){
$(".menu").click(function(){
$(".menu1").toggleClass("menuclick1")
});
$(".menu").click(function(){
$(".menu2").toggleClass("menuclick2")
});
$(".menu").click(function(){
$(".menu3").toggleClass("menuclick3")
});
});
</script>
▲次に動きの指示。
「.menuをクリック後、.menu1に.menuclick1を追加・外す」という指示を出していきます。
toggleというのは大変便利で、つけたりはずしたりできる指示（のはず）です。
これでハンバーガーボタンは動きました。
ではメニューを出します。
<script>
jQuery(function($){
$('.menu').click(function(){
if ($('#menu').css('display') == 'none') {
$('#menu').slideDown('fast');
} else {
$('#menu').slideUp('fast');
}
});
});
</script>
ほい。これです。
「.menuをクリックしたら#menuのcssに指定されているdisplay:noneのnoneを外す」という指示を出します。
#menuというのはドロワーメニューのこと。スライドでアップダウンして出たり閉まったりしてくれます。
まとめ
いかがでしたでしょうか！
以上で動くハンバーガーボタン・メニューを設置することができると思います♪
一度「≡」をクリックしたらアニメーションで変化して「×」になり、もう一度クリックするまでこのままなので、メニューを閉じたい人のことをきちんと誘導できます！
今回はやっつけのように数分で設置してしまいましたが、カスタマイズ次第では非常に従順に使いやすくなること間違い無いはず、、！
ぜひお好みでカスタマイズしていってくださいね〜〜〜。
よろしければランキングもクリックお願いします。
にほんブログ村
jQueryプラグインを使う
プラグインを使って、簡単にプロ並みのボタンを作る方法をまとめました。
www.misallychan.com
ブログでご紹介いただきました
www.ice-heart.com
ものすごい情報量・・・この中に入れてもらえて嬉しいです。
http://www.tiemirin.com/entry/2017/02/21/073042www.tiemirin.com
jQueryは私も解説できるほど詳しくないのですが、どこにどう書くか書いておくと便利かもしれませんね！今度時間あるときに追記します！
ポケモンGOへハマるあなたにおすすめの記事
「思っていたポケモンとは違った」想像を絶する設定に驚愕。脚本家・首藤剛志の描く小説版ポケットモンスターThe Animation - misallychan.com
