【簡単】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を使ってハンバーガーメニューを実装する方法について紹介しました。
以上で解説を終わります。
目次