Programming

【CSSとjQueryで実装】ハンバーガーメニューボタン

CSSとjQueryで実装するレスポンシブ用のハンバーガーメニューボタンを作りました。

CSSでStyleを書いてjQueryでclassを加えたり無くしたりします。

デモ

やり方知りたくて見に来る人もいると思いますのでわかりやすく、CodePenにまとめておきました。

See the Pen
menu-toggle
by yusk24 (@yusk24)
on CodePen.

HTML

まず、メニューのハンバーガーメニューボタンのHTMLですが非常にシンプルです。
toggleというdivが全体を囲っていて、spanタグのtoggle__lineというクラスが動いたりする線です。

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

jQuery

次にjQueryですがこれまたすごくシンプルです。
クラスの「toggle」がクリックされた時、「toggle」クラスに「is-active」というクラスを加えたり消したりします。

$('.toggle').click(function(){
  $('.toggle').toggleClass('is-active');
})

SCSS

CSSではなく、SCSSです。
対して代わりはないですが、とても便利なのであまり使ったことのない人は、ぜひ使って見てください。
「Prepros」というツールを使えば無料版でも自動でCSSに変換をしてくれるのがとても便利です!

.toggle {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 30px;
  height: 30px;
  .toggle__line {
    $line-size: 5px;
    $p-size: (30 - $line-size*3)/2;
    position: absolute;
    left: 0;
    height: 5px;
    width: 30px;
    background: lightblue;
    border-radius: 2px;
    transition: .4s;
    &:nth-child(1) {
      top: 0;
    }
    &:nth-child(2) {
      top: $line-size + $p-size;
    }
    &:nth-child(3) {
      top: $line-size*2 + $p-size*2;
    }
  }
  &.is-active .toggle__line {
    // transition: .5s;
    top: (30/2) + px;
    &:nth-child(1) {
      transform: rotate(-45deg);
    }
    &:nth-child(2) {
      opacity: 0;
      transform: translateX(20px);
    }
    &:nth-child(3) {
      transform: rotate(45deg);
    }
  }
}

位置の調節

まずメニューボタンは、右上か左上に来ることがほとんどです。
今回は、左上にしてみました。右上にする人は、left: 10px;をright: 10pxにしたりすればいいです。

あとは、横幅と高さは、30pxで線の太さは、5pxです。
.is-activeがついた時に全ての線を真ん中に揃えている(topを揃える)ところもポイントです。

押した時の動作

&:nth-child(1)などを使って線の上のやつや真ん中のやつや下のやつを制御しています。
1は1番目で2は2番目、3は3番目の線です。
角度は、transform: rotate(45deg);でつけています。
マイナスつければ逆方向に角度をつけられます。

真ん中の線が右側にすっといくのは、transform: translateX(20px);
消える動作は、opacity: 0;です。

アニメっぽくゆっくり変化するためには、transition: .3sが必須です。

ひとこと

このハンバーガーメニューボタンが作れるようになれば、レスポンシブ対応のスマホ用サイトを作った時に
jQueryでメニューボタンをトグルにして表示非表示できます。fadeToggle()やslideToggleでいい感じに作れます。

ぜひ試してみてください。