【Vuetify】ドロワーメニューをサクッと実装する

こんにちは、ryohei(@ityryohei)です!

本記事では、Vuetifyでドロワーメニューをサクッと実装する方法をご紹介しています。

Vuetifyでドロワーメニューを楽に、シンプルに実装したいな…

上記の要望にお応えします。

では、解説していきます。

ドロワーメニューを実装する

タイトルあるように、Vuetifyでドロワーメニューをサクッと実装してみます。ここではシンプルにコンテンツにリンクだけを追加したドロワーメニューを作成してみます。

HTML

<div id="app">
    <v-app>
        <div>
            <v-app-bar>
                <v-app-bar-nav-icon v-on:click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            </v-app-bar>

            <v-navigation-drawer
                v-model="drawer"
                absolute
                temporary
            >
                <v-list>
                    <v-list-item-group>
                        <v-list-item><a href="#">Menu Item1</a></v-list-item>
                        <v-list-item><a href="#">Menu Item2</a></v-list-item>
                        <v-list-item><a href="#">Menu Item3</a></v-list-item>
                        <v-list-item><a href="#">Menu Item4</a></v-list-item>
                    </v-list-item-group>
                </v-list>
            </v-navigation-drawer>
        </div>
    </v-app>
</div>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
        drawer: false,
    }),
})

実行結果は下記の通り。デモ左上のハンバーガーアイコンをクリックするとドロワーメニューが開閉します。

See the Pen 7314 by ryohei (@intotheprogram) on CodePen.

基本的に下記のページを参考にした内容となっています。カスタマイズされる場合に参考になると思います。

参考:https://vuetifyjs.com/ja/components/navigation-drawers/

使用しているプロパティについて

前項でご紹介したドロワーメニューでは、二つのプロパティを使用しています。それぞれ下記の役割を担っています。

absoluteコンポーネントにアブソリュートを追加する
temporaryドロワーメニューが開いているときに、背景に半透明の要素をオーバーレイ表示する

temporaryを追加するだけで背景のオーバーレイを実装できるとか、最高ですね……。

最後に

Vuetifyを導入するなら、画面幅の狭い端末ではドロワーメニューを使いたくなりますよね。公式のドキュメントに実装方法は詳しく説明がありますが、より簡単に実装できるように本記事のような形でまとめてみました。Vuetifyを使用している皆さんにご活用いただければ幸いです。

以上、Vuetifyでドロワーメニューをサクッと実装する方法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら