【jQuery】ドロワーメニューを簡単作成!Drawer.jsの使い方

【jQuery】ドロワーメニューを簡単作成!Drawer.jsの使い方

どうも、ジャングルオーシャンのミケです。

今日はドロワーメニューが簡単に作れるDrawer.jsの紹介だよ。




ドロワーメニューとは

ドロワーメニューは、スマホサイトでよく使われるメニューの表示手法で

ボタンをクリックすると

横や縦からメニューがシュッと現れるものだよ。

サンプルページで確認してみてね。

サンプルデモページはこちら

ちなみにクリックするボタンは

横棒三本のアイコンが使われる事が多くて

このことをハンバーガーメニューと言うよ。

それでは実際にDrawer.jsを使って

ドロワーメニューを実装してみよう。

必要なファイルの用意

ファイルのダウンロード

まずはjQueryの設置をするよ!

jQueryの公式サイトからファイルをダウンロードしてね。

jQueryの公式サイトはこちら

次にDrawer.jsを入れるよ。

公式サイトからダウンロードしてね。

Drawer.jsの公式サイトはこちら

まずは「Step 1: Link required files」の

Download」という項目から

1.Drawer v3.2.2」をクリックしてね。

そうすると、GitHubのページに飛ぶので

Clone or download」という緑のボタンをクリックして

ファイルをダウンロードしてね。

zipファイルがダウンロードできるので解凍して

中に入っているファイルを取り出してね。

必要なファイルは

srcフォルダの中のcssフォルダの中のdrawer.css

srcフォルダの中のjsフォルダの中のdrawer.js

2ファイルだよ。

最後にiScrollをダウンロードしよう。

さっきと同じように「Step 1: Link required files」の

Download」という項目から

次は「3.iScroll Created by Matteo Spinelli.」をクリックしてね。

そうすると、またさっきと同じようにGitHubのページに飛ぶので

Clone or download」という緑のボタンをクリックして

ファイルをダウンロードしてね。

zipファイルがダウンロードできるので解凍して

中に入っているファイルを取り出してね。

必要なファイルは

buildフォルダの中のiscroll.jsだよ。

これで必要なファイルは揃ったから

次にHTMLにファイルを読み込むコードを記述するよ。

CDNを利用する

CDNを利用して各ファイルを読み込むこともできるよ。

HTMLに記述するソースコードは以下になるよ。

必要なファイルは揃ったので

次にHTMLを記述していくよ。

HTMLの記述

HTMLの記述は以下のようになるよ。

そして最後にスクリプトタグを記述すれば完成だよ。

これで基本のドロワーメニューが完成!

全ての記述を一つのHTMLファイルにまとめるとこんな感じになるよ。

この記述のサンプルページも作ってあるから見てみてね。

サンプルデモページはこちら

他のパターン

さっき紹介したドロワーメニューは

ハンバーガーメニューをクリックすると

左からメニューが現れたけど

右や上から表示させることもできるよ。

メニューを右から表示させる

右から表示させるには

さっきのHTMLの中にあった

このbodyの開始タグのクラス名を変更すれば右から表示されるようになるよ。

「drawer–left」となっている箇所を

「drawer–right」と変更することで

メニューが右から出るようになるよ。

右から出るサンプルデモページはこちら

メニューを上から表示させる

メニューを上から表示させることもできるよ。

右からメニューが出るようになったときと同じように

このbodyの開始タグのクラス名を変更すれば上から表示されるようになるよ。

「drawer–left」となっている箇所を

「drawer–top」と変更することで

メニューが上から出るようになるよ。

上から出るサンプルデモページはこちら

まとめ

実装はできたかな?

スマホでよく使われるメニューの表示手法だけど

自分で全て実装するとなると大変だから

こういうプラグインがあるとすごい便利だよね!

もし何かわからないことなどがあったら連絡してね。

それじゃまた今度!

TwitterやFacebookのフォローよろしくね!

Twitter
@michelgorilla

Facebook
ミケランジェロ

プログラミングカテゴリの最新記事