対象読者
・ハンバーガーメニューを作りたい人
・細かく作り方の手順を知りたい人
・自分でオリジナルの見た目を作って応用したい人
・（ちなみに筆者の自己学習のためにも記事を書いているので間違っている箇所があれば是非とも教えて頂きたい）
目次
・HTMLのソース
・CSSのソース
・JavaScript(jQuery)のソース
・ハンバーガーメニュー作成の手順
・まとめ
HTMLのソース
Hamburger.html
<body><divclass="container"><buttonclass="click-menu-icon"><span></span><span></span><span></span></button><nav><ul><li>１１１</li><li>２２２</li><li>３３３</li></ul></nav><divclass="overlay"></div></div></body>CSSのソース
style.css
*{margin:0;padding:0;}.overlay{display:block;width:0;height:0;background-color:rgba(0,0,0,0.5);position:absolute;top:0;right:0;z-index:2;opacity:0;transition:opacity0.5s;}.overlay.open{width:100%;height:100%;opacity:1;}.click-menu-icon{border:none;display:inline-block;width:36px;height:28px;vertical-align:middle;cursor:pointer;position:fixed;top:30px;left:30px;z-index:100;}.click-menu-iconspan{display:inline-block;box-sizing:border-box;position:absolute;left:0;width:100%;height:4px;background-color:#000;transition:all0.5s;}.click-menu-icon.activespan{background-color:#000;}.click-menu-iconspan:nth-of-type(1){top:0;}.click-menu-icon.activespan:nth-of-type(1){transform:translateY(12px)rotate(-225deg);}.click-menu-iconspan:nth-last-of-type(2){top:12px;}.click-menu-icon.activespan:nth-of-type(2){opacity:0;}.click-menu-iconspan:nth-of-type(3){bottom:0;}.click-menu-icon.activespan:nth-of-type(3){transform:translateY(-12px)rotate(225deg);}nav{width:250px;height:100%;padding-top:100px;background-color:rgba(16,69,153,0.8);position:fixed;top:0;left:0;z-index:10;transform:translateX(-250px);transition:all0.5s;}nav.open{transform:translateX(0);}navli{color:#fff;text-align:center;padding:10px0;}JavaScript(jQuery)のソース
main.js
$('.click-menu-icon').on('click',function(){if($(this).hasClass('active')){$(this).removeClass('active');$('nav').removeClass('open');$('.overlay').removeClass('open');}else{$(this).addClass('active');$('nav').addClass('open');$('.overlay').addClass('open');}});$('.overlay').on('click',function(){if($(this).hasClass('open')){$(this).removeClass('open');$('.click-menu-icon').removeClass('active');$('nav').removeClass('open');}});ハンバーガーメニュー作成の手順
作成手順
<!-- ハンバーガーメニュー作成の手順
* １：buttonでspan*3を囲う
* ２：nav>ul>liでメニューを作る
* ３：</nav>の下に影をつけるための<div class="overlay">を作る
* ４：・・・・・以下からCSSの記述手順↓・・・・・
* 1.overlay
* ・blockでwidthとheightを０にする
* ・色はお好み＿rgbaでaを0.5くらいにする（透明度の最大値）
* ・position:absoluteでtop:0、left/rightはお好みで0
* ・z-indexで上に来るために2くらいにする
* ・初期状態はopacity:0にする
* ・transition: opacity 0.5s;秒数は好み
* ・overlay.openにwidth/height:100%、opacityを1にして変化させる
*
* 2.button.class名
* ・buttonのborderを消しておく
* ・vertical-alignを指定するためにinline-blockにする
* ・ハンバーガーアイコンのwidth/heightを指定する（お好み）
* ・vertical-align: middle;で縦に中央揃えする（大きさを変更しても中央揃えになる）
* ・cursor:pointer;にする（お好み）
* ・position: fixed;でスクローるしてもついてくるようにする。top/left/rightを指定する（お好みでfixedなしでもok）
* ・必ず前面に出したいのでz-indexで一番大きい数にする
*
* 3.button>span
* ・box-sizing:border-box;でbutton自体の大きさ内でpaddingやborderなどを指定できる
* ・left:0;width:100%;で左端から100%button内でspanの長さを指定する
* ・heightはお好み（必ず指定しないと縦が0なので表示されなくなる）
* ・色をつける(基本は背景に同化せずハッキリとした色にする)
* ・transitionでクリックした時のspanが動く秒数を指定する
*
* 4.buttonに.activeが追加された時のspan
* ・click後の色を指定する
* ・span:nth-of-type(1)でtop: 0;を指定する
* ・.active span:nth-of-type(1)でtransform: translateY(お好み) rotate(-お好み);で１つ目の動きをつける
* ・span:nth-of-type(2)でtop: お好み;で真ん中に表示する
* ・.active span:nth-of-type(2)でopacity: 0;で表示を消す
* ・span:nth-of-type(3)でbottom: 0;を指定する
* ・.active span:nth-of-type(3)でtransform: translateY(-お好み) rotate(お好み);で3つ目の動きをつける
* ※translateYとrotateは符号違いで数値は同じにする
*
* 5.nav
* ・navのwidth:お好み;height: 100%;を指定する
* ・padding-topでハンバーガーの下に指定する（お好み）
* ・background-colorを指定する（お好み）
* ・position: fixed;でスクロールしてもついてくるようにする
* ・top: 0;left or right: 0;にする
* ・z-indexでコンテンツよりは上、overlayより上でハンバーガーより下にする
* ・transform: translateX(-navのwidth分);で初期位置を画面の外にする
* ・transitionで動きの秒数を指定する（お好み）
*
* 6.nav.open
* ・transform: translateX(0);でclickされた時に画面に表示する
*
* 7.nav li
* ・colorでliの色を指定する（お好み）
* ・text-align: center;でnav内の中央に寄せる
* ・padding:お好み 0;で上下の数値だけ指定する
*
* ・・・・・以上がCSSの記述手順↑・・・・・
*
* 5.・・・・・以下からJavaScript(jQuery)の記述手順↓・・・・・
*
*
$('.buttonのクラス名').on('click',function(){ ＠クリックイベント
if($(this).hasClass('active')){ ＠もしbuttonがactiveクラスを持っていたら
$(this).removeClass('active'); ＠buttonからactiveクラスを外す
$('nav').removeClass('open'); ＠navからopenクラスを外す
$('.overlay').removeClass('open'); ＠overlayからopenクラスを外す
} else { ＠activeクラスを持っていなかったら
$(this).addClass('active'); ＠buttonにactiveクラスを追加する
$('nav').addClass('open'); ＠navにopenクラスを追加する
$('.overlay').addClass('open'); ＠overlayにopenクラスを追加する
}
}); @@ overlayをクリックしても開いたメニューを閉じれるようにする @@
$('.overlay').on('click',function(){ ＠クリックイベント
if($(this).hasClass('open')){ ＠もしoverlayがopenクラスを持っていたら
$(this).removeClass('open'); ＠overlayからopenクラスを外す
$('buttonのクラス名').removeClass('active'); ＠buttonからactiveを外す
$('nav').removeClass('open'); ＠navからopenクラスを外す
}
});
*
*
*
*
*
*
-->まとめ
自分のコーディング技術向上のためにコードや書き方の手順を記してみました。
実はプログラミング学習を始めてまだ2.3ヶ月の初心者です。なのでもっと効率よく、尚且つ綺麗に記述できると思います。
ですが、過去の自分はただコードだけ見せられてもどう書けばいいか分からなかった経験があります。なので日本語で手順も記載することによって中の値だけ変えれば誰でもとりあえず実装できるようになると思います。
作成の手順通りに作って中の値だけ帰ることによってオリジナルのハンバーガーメニューに応用できると思います。
過去の自分が知りたかったような記事でした。