そうだハンバーガーを作ろう！（ハンバーガーメニューの作成）

目次

久々の更新になります。（いつものこと）
Twitterなどでは言ったのですが、8月からWeb制作会社でWebコーダーとして働いています。
大変なことや行き詰まることもありますが、自分が描いていた働き方に出会えたので満足しています。

今回は食欲の秋ということで、ハンバーガーを作りましょう！
え？マクド行くって？ロッテリア？まあ自分はモスバーガー行くけど・・・。

ハンバーガーメニューとは？

ハンバーガーと言っても食べ物ではなく、ハンバーガーメニューのことです！これを作っていきましょう！
スマホサイトを一度でも見たことある人なら見たことあるはずです。

今回はこのハンバーガーメニューを自作していきます。
完成はこちら↓

See the Pen hamburger menu by piko525 (@piko525) on CodePen.

ハンバーガーメニューのボタンを作成

最初にhead内かbodyの閉じタグ直前にjQueryを読み込んでおいてください。
それではボタンから作成していきます。

クリックされていないときのボタン

・HTML

<div class="toggle">
  <span></span>
  <span></span>
  <span></span>
  <span>menu</span>
</div>

・CSS

.toggle {
    position: fixed; /* bodyに対しての絶対位置指定 */
    right: 13px;
    top: 13px;
    display: block;
    width: 45px;
    height: 50px;
    cursor: pointer;
    z-index: 3;
    background: #ccc;
}
.toggle span {
    display: block;
    position: absolute; /* .toggleに対して */
    width: 70%;
    border-bottom: solid 3px #000;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    padding-top: 5px;
    right: 7px;
}
.toggle span:nth-child(1) {
    top: 3px;
}
.toggle span:nth-child(2) {
    top: 13px;
}
.toggle span:nth-child(3) {
    top: 23px;
}
.toggle span:nth-child(4) {
    border: none;
    top: 28px;
    left: 5px;
    font-size: 12px;
    font-weight: bold;
}

3つのspanタグにborderをつけることでハンバーガーメニューの3本線をスタイルしています。
.toggleでボタンの背景を作成し、spanをpositionで3本配置しています。

クリックされたときのボタン

HTMLはクリックされていないときと同じです。

・CSS

/* 最初のspanをマイナス45度に */
.toggle.active span:nth-child(1) {
    top: 15px;
    left: 4px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.toggle.active span:nth-child(2),
.toggle.active span:nth-child(3) {
    top: 15px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.activeというクラス名は、クリックされると.global_navに追加されるクラス名です。
クリックされると一番上のspanは右斜めになり、2番めと3番目のspanは左斜めになります。この2つがクロスして×のボタンができます。

グローバルメニューの作成

ボタンの作成ができたのでグローバルメニューの中身を作成していきましょう！

クリックされていないときのグローバルメニュー。

・HTML

<nav class="global_nav">
  <ul>
    <li class="nav_li"><a href="#menu1">メニュー1</a></li>
    <li class="nav_li"><a href="#menu2">メニュー2</a></li>
    <li class="nav_li"><a href="#menu3">メニュー3</a></li>
  </ul>
</nav>

・CSS

/* .global_nav */
.global_nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-100%);
    z-index: 2;
    padding-top: 50px;
    text-align: center;
    color: #000;
    background: #ccc;
    transition: all 0.8s;  
}
.global_nav .nav_li {
    width: 100%;
    padding: 10px;
    list-style-type: none;
}
.global_nav .nav_li a {
    display: block;
    color: #000;
}

ここでポイントなのはCSSのtransform: translateY(-100%);でクリックされる前はグローバルメニューを隠しています。
クリックされるとtransition: all 0.8s;で0.8秒かけて上から下にグローバルメニューが降りてきます。

クリックされたときのグローバルメニュー。

・CSS

/* .global_navに.activeが追加 */
.global_nav.active {
    transform: translateY(0%);
}

.glovalに.activeというクラスが追加される（クリックされる）と、グローバルメニューが降りてきます。

JavaScriptでクリックされたときの動きをつける

$(function() {
  $('.toggle').click(function() {
    $(this).toggleClass("active");
		if($(this).hasClass('active')) {
			$('.global_nav').addClass('active');
		} else {
			$('.global_nav').removeClass('active');
		}
  });
});

.toggle（ボタン）がクリックされると.global_navに.activeというクラス名が追加されます。
これで.activeのスタイルが適用され、ボタンが×になり、グローバルメニューが降りてきます。
×ボタンをクリックすると.activeクラスが削除される。つまりグローバルメニューが隠れるということです。

最後まで読んでくれてありがとうございます。
ハンバーガーメニューを実装するときの参考になれば幸いです。