Written by Kasumi

【簡単】Vue.jsとCSSを使ってハンバーガーメニューを実装する方法

Vue.jsとCSSを使ってハンバーガーメニューを実装したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
Vue.jsでハンバーガーメニューを実装
by Kohei (@kouk05)
on CodePen.0

コードペンを使った実装サンプルです。

三本線をクリックすると、×(バツ)に可変するハンバーガーメニューが実装できてます。

実装手順は以下の通りです。

HTMLを準備

<div id="app">
    <button v-bind:class="{active}" v-on:click="click" class="menu-trigger">
    <span></span>
    <span></span>
    <span></span>
  </button>
</div>

まずはハンバーガーメニューのHTML要素を準備します。

クリック要素にv-bindディレクティブ・v-on:clickディレクティブを付与します。

その子要素に空のspanタグを三つ用意します。

Vue.jsで動的にクラスを付与

const app = Vue.createApp({
    data() {
        return {
            active: false
        }
    },
    // クリックしたらデータactiveの真偽値を変更
    methods: {
        click: function () {
            this.active = !this.active
        }
    },
});
app.mount("#app");

次にVue.jsでハンバーガーメニューがクリックされたら動的にクラスが付与・削除される仕組みを作ります。

dataメソッドにv-bindディレクティブに設定した値を定義

methodsオプション内でv-on:clickディレクティブで設定した値を元に関数を定義

関数内で、クリックしたらdataメソッドで定義した値の真偽値が変更されるようにします。

これでハンバーガーメニューをクリックする度に動的にクラスが付与・削除されるようになります。

CSSで装飾

  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
    position: relative;
    z-index: 100;
  }
  .menu-trigger {
    position: relative;
    width: 32px;
    height: 26px;
    background: none;
    border: none;
    appearance: none;
    cursor: pointer;
  }
  .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #172a22;
    border-radius: 4px;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 11px;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
//クラスが付与されたら
  .menu-trigger.active span:nth-of-type(1) {
    transform: translateY(11px) rotate(-45deg);
  }
  .menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-trigger.active span:nth-of-type(3) {
    transform: translateY(-11px) rotate(45deg);
  }

最後にCSSでハンバーガーメニューになるよう装飾します。

transformプロパティを使って、クラスが付与されたらハンバーガーメニューを三本線から×(バツ)に変更します。

以上で完成です。

まとめ

Vue.jsとCSSを使ってハンバーガーメニューを実装する方法について紹介しました。

以上で解説を終わります。

関連記事

Vue.js

Vue.jsをCDNで導入・html環境に構築する方法【バージョン3対応】

2022.08.25
157
Vue.js

Vue.jsでHTML要素をコンポーネント化(パーツ化)する方法

2022.09.01
121
Vue.js

Vue.jsで指定回数、html要素をループ処理させる方法【v-forディレクティブを使おう】

2022.09.13
97
Vue.js

Vue.jsでページ内トップへ戻るボタンを設置する方法

2022.09.18
89