Zenn
🐥

【Vue.js】ハンバーガーメニュー

2022/06/08に公開
Vue.js
tech

学習後のアウトプットとして記録しています。
何か間違いがありましたら、ご指摘宜しくお願い致します。。

Vue.jsを使用してハンバーガーメニューを作成してみました。
今までは、jQueryを使用していましたが、Vue.jsにすることで記述量が減りコードがスッキリしました。

開発環境

Windows10
Vscode

実装画像

閉じている時

開いている時

本題

環境構築

今回はCDNを使用して環境構築を行っています。
<head>
<!--Vue.js,CDN-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="js/main.js" defer></script>
</head>

<script src="js/main.js" defer></script>の部分は他にnav.jsなどファイル名を変更出来ます。

FontAwesomeの追加
<head>
<!--FontAwesomeの読み込み-->
  <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>

実装

index.html
<div id="app">
  <nav>
    <button type="btn" class="nav-btn" v-on:click="open=!open">
    　<i class="fas fa-bars" aria-hidden="true"></i>
    </button>
    <div class="nav-items" v-bind:class="{ 'is-active': open }">
      <div class="nav-item">Home</div>
      <div class="nav-item">About</div>
      <div class="nav-item">Topic</div>
    </div>
  </nav>
</div>

v-on:click 省略形は@:clickです。
v-on:イベント名と記述する事が出来ます。
v-on:click="open=!open"でクリックしたときの真偽値の判定を行っています。
v-bind:class 省略形は:classです。
v-bind:classのオブジェクト形式です。
v-bind:class= "{'クラス名' :　真偽値}"と記述し、真(true)だった場合はクラス名が適用されます。
今回は、v-bind:class="{ 'is-active': open }"　openが真(true)だった場合は、is-activeが適用されます。

style.css
.nav-btn {
  position: fixed;　/*ハンバーガーメニューを固定*/
  top: 20px;
  right: 20px;
  width: 40px;
  heigth: 40ppx;
  background: #333;
  color: #fff;
  z-index: 3;
}

.nav-items {
  potisiton: fixed;
  top: 0;
  rigth: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

.nav-item {
  width: 100%;
  height: auto;
  padding: .5em 1em;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
}

/*ハンバーガーメニューが開くとき*/
.nav-items {
  transform: translateX(100vw); /*x方向に移動*/
  transition:  all 1s linear;   /*１秒掛けて開く。速度は一定*/
}
/*ハンバーガーメニューが開ている状態*/
.nav-items.is-avtive {
  transform: translateX(0);
  font-size: 30px;
  width: 300px;
}
main.js
var app = new Vue ({
  el: "#app",
  data: {
    open: false
  }
})

el: "#app"はVue.jsが作用される範囲を意味しています。
data: {} はアプリケーションで使用するデータを定義する事が出来ます。
データには数値・文字列・ブーリアン・配列・オブジェクトなどjavascriptで使用できるデータを定義することができます。
今回は、open: falseと真偽値で定義しておくことで、開閉時の処理を定義させて保存しています。
open: falseの場合は閉じているとき、open: trueの場合は開いているときです。

お疲れ様でした。

Discussion