はじめに

メニューアイコンの中ではハンバーガーメニューが有名だと思いますが、その他にもいろいろな種類があって、それぞれに名前もつけられています。

本記事では、ハンバーガーメニューの次に比較的よく使われているであろうベントーメニューの実装方法について説明します（クリックしたときのいい感じのアニメーションについても説明します）。

なお、メニューアイコン（ハンバーガーメニュー）の基本的な実装方法については以下の記事で詳しく説明しています。

サンプル

右上のベントーメニューをクリックすると、9つのドットが回転しつつバツマークに変化します。

実装

HTML

JavaScriptを使わずにメニューアイコンを実装するにはチェックボックスを使います。

9つのドットはそのままdivタグを9つ並べています。この他にも#dots-wrapで囲んだり、3つごとに.dots-rowで囲んだり、様々な方法があるかと思いますので、ご自分の好きなように並べてください。

<header>
  <input id="navi" type="checkbox" />
  <label for="navi">
    <div class="dots">
    <div class="dots">
    <div class="dots">
    <div class="dots">
    <div class="dots">
    <div class="dots">
    <div class="dots">
    <div class="dots">
    <div class="dots">
  </label>
</header>

CSS

CSSは少し長いので、label（9つのドット）と#navi（クリック時のアニメーション）に分けて説明します。

SCSS

header {
  width: 100%;
  height: 80px;
  #navi {
    display: none;
    &:checked {
      ~ label {
        transform: rotate(225deg);
        .dots:nth-of-type(1) { filter: opacity(0); }
        .dots:nth-of-type(2) { transform: scaleY(4.75); }
        .dots:nth-of-type(3) { filter: opacity(0); }
        .dots:nth-of-type(4) { transform: scaleX(4.75); }
        .dots:nth-of-type(5) { filter: opacity(0); }
        .dots:nth-of-type(6) { transform: scaleX(4.75); }
        .dots:nth-of-type(7) { filter: opacity(0); }
        .dots:nth-of-type(8) { transform: scaleY(4.75); }
        .dots:nth-of-type(9) { filter: opacity(0); }
      }
    }
  }
  label {
    cursor: pointer;
    position: fixed;
    top: 32px;
    right: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 26px;
    height: 26px;
    transition: .5s;
    .dots {
      width: 6px;
      height: 6px;
      background-color: black;
      transition: .5s;
      &:nth-of-type(3n+2) {
        margin: 0 4px;
      }
      &:nth-of-type(2) { transform-origin: top; }
      &:nth-of-type(4) { transform-origin: left; }
      &:nth-of-type(6) { transform-origin: right; }
      &:nth-of-type(8) { transform-origin: bottom; }
    }
  }
}

9つのドット

SCSS

  label {
    cursor: pointer;
    position: fixed;
    top: 32px;
    right: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 26px;
    height: 26px;
    transition: .5s;
    .dots {
      width: 6px;
      height: 6px;
      background-color: black;
      transition: .5s;
      &:nth-of-type(3n+2) {
        margin: 0 4px;
      }
      &:nth-of-type(2) { transform-origin: top; }
      &:nth-of-type(4) { transform-origin: left; }
      &:nth-of-type(6) { transform-origin: right; }
      &:nth-of-type(8) { transform-origin: bottom; }
    }
  }

まず、9つのドットを囲むlabelの横幅および縦幅は「ドットの大きさ×３＋ドット間の余白×２」の値にします。例えば、ドットの大きさが6pxでドット間の余白が4pxの場合、６×３＋４×２＝２６が横幅および縦幅になります。ドットの大きさやドット間の余白を変更する場合はlabelの大きさも調節してください。

また、labelをフレックスボックスにし、justify-contentとalign-contentをspace-betweenに設定することで、9つのドットが均等に配置されるようにしています。

左上から数えて2,4,6,8番目のドットはアイコンクリック時のアニメーションで変化させるので、それぞれtransform-originの値を設定しておきます。

クリック時のアニメーション

SCSS

  #navi {
    display: none;
    &:checked {
      ~ label {
        transform: rotate(225deg);
        .dots:nth-of-type(1) { filter: opacity(0); }
        .dots:nth-of-type(2) { transform: scaleY(4.75); }
        .dots:nth-of-type(3) { filter: opacity(0); }
        .dots:nth-of-type(4) { transform: scaleX(4.75); }
        .dots:nth-of-type(5) { filter: opacity(0); }
        .dots:nth-of-type(6) { transform: scaleX(4.75); }
        .dots:nth-of-type(7) { filter: opacity(0); }
        .dots:nth-of-type(8) { transform: scaleY(4.75); }
        .dots:nth-of-type(9) { filter: opacity(0); }
      }
    }
  }