Nuxt.jsでNavigationBarのhoverには@mouseoverを使う

この記事は、岩手県立大学 Advent Calendar 2020 19日目の記事です。

今回学ぶこと

Nuxt.jsで、NavigationBarのhoverを実装するには@mouseover, mouseleaveをつかう！

目指す成果物

ソースコード

こちらのソースコードを参照しつつ読み進めていただけると、理解されやすいかと思います。
https://github.com/syuheifujita/nuxt-sample-app

ステップ

1. VueやNuxtの本質である、Componentの概念を理解する

こちらの動画は英語なんですが、HTML/CSSをかいた経験がある人レベルの方ならばわかりやすい内容だと感じました。

nuxt初心者が一番初めに見る動画（英語）：
https://www.youtube.com/watch?v=nteDXuqBfn0&list=PLllRbPzZQq_4r_UBfXf46bMNL2rcDdjTy&index=1

ポイントは、こちらをみながら実装してみてざっくりとNuxt.jsやVue.jsのcomponentの概念を理解することです！

2. NavigationBarの作り方動画をやってみる

次に、
Componentの概念を理解できた方であれば、このステップもすんなりいけるかと思います。
ここでもいい動画があったので共有します。

NavigationBarの作り方の動画（英語）：
https://www.youtube.com/watch?v=vUcUdpBcmF8&t=876s

ポイント3つ

• Navbar.vue, Dropdown.vueの2つにcomponentを分散
• v-forで繰り返しでDropdownに使うリストを生成
• v-ifで表示非表示の状態管理

3. マウスのhoverした時のイベント処理の記事を実践

最後に、マウスのhoverした時のイベント処理の実装ですが、結論から言うと、＠mouseoverと@mouseleaveを用いてイベントを取得して、表示の状態を切り替えることでDropdownの実装をしました。

こちらの、イベント処理についての記事がとても参考になりましたので共有しておきます。

イベント処理についての記事（英語）：
https://michaelnthiessen.com/hover-in-vue/

ポイント3つ

• ＠mouseoverと@mouseleaveを用いてイベントを取得できる
• 変数isHoverFlagを定義して、イベント取得の度にture, falseを切り替える
• v-if="isHoverFlag"のisHoverFlagがtureの場合、そこの
  タグが表示される

  Dropdown.vue

  <template>
      <div class="menu-item" @mouseover="isHoverFlag = true" @mouseleave="isHoverFlag = false">
          <a>{{ title }}</a>
          <svg viewBox="0 0 1030 638" width="10">
              <path d="M1017 68L541 626q-11 12-26 12t-26-12L13 68Q-3 49 6 24.5T39 0h952q24 0 33 24.5t-7 43.5z" 
              fill="#000"></path>
          </svg>
          <div class="sub-menu" v-if="isHoverFlag">
              <div v-for="(item, i) in items" :key="i" class="menu-item">
                  <a :href="item.link">{{ item.title }}</a>
              </div>
          </div>
      </div>
  </template>
  
  <script>
  import Vue from 'vue'
  
  export default {
      name: 'dropdown',
      props: ['title', 'items'],
      data() {
          return {
              isHoverFlag: false,            
          }
      }
  }
  </script>
  
  <style>
  nav .menu-item svg {
      width: 10px;
      margin-left: 10px;
  }
  
  nav .menu-item .sub-menu {
      position: absolute;
      background-color: white;
      top: calc(100%);
      left: 0px;
      width: max-content;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
  }
  </style>
  

  参考資料

  nuxt初心者が一番初めに見る動画

  https://www.youtube.com/watch?v=nteDXuqBfn0&list=PLllRbPzZQq_4r_UBfXf46bMNL2rcDdjTy&index=1

  navbarの作り方の動画

  https://www.youtube.com/watch?v=vUcUdpBcmF8&t=876s

  イベント処理についての記事（英語）

  https://michaelnthiessen.com/hover-in-vue/