ハンバーガーアイコン作成 jQuery

2023年07月31日2024年01月23日

ハンバーガーメニューは疑似要素を使って作る方法もあるけれど、ハンバーガーの太さや色を変えやすいように div要素で作成したよ。

タップで読みたいところにジャンプします

ハンバーガーアイコンを実装する方法

ハンバーガーアイコンを実装する方法は、以下の2つがある。

チェックボックスを利用する方法
jQueruyを利用して表示する、クラスを付与したり、はく奪したりする方法。

他にもjQueryを使用するのであればjQueryを利用すればいいが、そうでなければチェックボックスを利用してもいいんだろうなって思う。

使用したjQuery

click()
toggleClass()　ON・OFF をクリックで操作できる。

jQuery のコード

  /// start burger on off //
  $('.iconBurger').on('click', function () {
    $('.iconBurger').toggleClass('is-active');
    $('.areaNav').toggleClass('is-active');
  });

HTML のコード

<div class="header__smMenu smMenu">
  <!-- icon ハンバーガー -->
  <div class="smMenu__iconBurger iconBurger">
    <div class="iconBurger__bar iconBurger__top"></div>
    <div class="iconBurger__bar iconBurger__middle"></div>
    <div class="iconBurger__bar iconBurger__bottom"></div>
  </div><!-- .iconBurger -->
</div><!-- smMenu -->

CSS コード

/// small メニュー 
.smMenu {
  display: none;

  @include foundation.responsive(sm) {
    display: block;
    width: 100%;
  }

  &__iconBurger {
    position: absolute;
    top: 30px;
    transform: translateY(-50%);
    right: 20px;
  }

}

/// icon バーガー
.iconBurger {

  width: 22px;
  height: 20px;
  position: absolute;

  &__bar {
    &:nth-child(n) {
      width: 22px;
      height: 4px;
      background-color: #FFFFFF;
      position: absolute;
      left: 0;
    }
  }

  &__top {
    top: 0;
  }

  &__middle {
    top: 50%;
  }

  &__bottom {
    top: 100%;
  }

  &.is-active {
    .iconBurger__top {
      transform: rotate(45deg);
      top: calc(50% - 2px);
    }

    .iconBurger__middle {
      display: none;
    }

    .iconBurger__bottom {
      transform: rotate(-45deg);
      top: calc(50% - 2px);
    }

  }
}