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

2020.10.06に公開

Nuxt.js(Vue.js)触り始めて2週間の僕が、Vue.jsやNuxt.jsでNavigationBarにマウスを載せた時にDropdownが表示されるを実装してみました。
誰かのためになれば嬉しいです。
初学者向けにNuxt.jsの導入の部分から書いているので、NavigationBarの実装だけを知りたい方はステップ3のみ見るといいかと思います！

今回学ぶこと

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

目指す成果物

ソースコード

こちらのソースコードを参照しつつ読み進めていただけると、理解されやすいかと思います。

ステップ

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

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

nuxt初心者が一番初めに見る動画（英語）：

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

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

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

NavigationBarの作り方の動画（英語）：

ポイント3つ

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

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

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

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

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

ポイント3つ

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

<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初心者が一番初めに見る動画

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

次はNavigationBarをレスポンシブ対応させる実装の記事を書いてみたいな〜