どうも、ジャングルオーシャンのミケです。
今日はドロワーメニューが簡単に作れるDrawer.jsの紹介だよ。
ドロワーメニューとは
ドロワーメニューは、スマホサイトでよく使われるメニューの表示手法で
ボタンをクリックすると
横や縦からメニューがシュッと現れるものだよ。
サンプルページで確認してみてね。
ちなみにクリックするボタンは
横棒三本のアイコンが使われる事が多くて
このことをハンバーガーメニューと言うよ。
それでは実際にDrawer.jsを使って
ドロワーメニューを実装してみよう。
必要なファイルの用意
ファイルのダウンロード
まずはjQueryの設置をするよ！
jQueryの公式サイトからファイルをダウンロードしてね。
次に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にファイルを読み込むコードを記述するよ。
|
1 2 3 |
<script src="jsを設置しているディレクトリ/jquery-3.4.1.min.js"></script> <script src="jsを設置しているディレクトリ/iscroll.js"></script> <script src="jsを設置しているディレクトリ/drawer.js"></script> |
CDNを利用する
CDNを利用して各ファイルを読み込むこともできるよ。
HTMLに記述するソースコードは以下になるよ。
|
1 2 3 4 5 6 7 |
<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> |
必要なファイルは揃ったので
次にHTMLを記述していくよ。
HTMLの記述
HTMLの記述は以下のようになるよ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body class="drawer drawer--left"> <header role="banner"> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-brand" href="#">Brand</a></li> <li><a class="drawer-menu-item" href="#">Nav1</a></li> <li><a class="drawer-menu-item" href="#">Nav2</a></li> </ul> </nav> </header> <main role="main"> <!-- Page content --> </main> </body> |
そして最後にスクリプトタグを記述すれば完成だよ。
|
1 2 3 4 5 |
<script> $(document).ready(function() { $('.drawer').drawer(); }); </script> |
これで基本のドロワーメニューが完成！
全ての記述を一つのHTMLファイルにまとめるとこんな感じになるよ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Drawer.js</title> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script> <!-- drawer.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script> <script> $(document).ready(function() { $('.drawer').drawer(); }); </script> </head> <body class="drawer drawer--left"> <header role="banner"> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-brand" href="#">Brand</a></li> <li><a class="drawer-menu-item" href="#">Nav1</a></li> <li><a class="drawer-menu-item" href="#">Nav2</a></li> </ul> </nav> </header> <main role="main"> <!-- Page content --> </main> </body> </html> |
この記述のサンプルページも作ってあるから見てみてね。
他のパターン
さっき紹介したドロワーメニューは
ハンバーガーメニューをクリックすると
左からメニューが現れたけど
右や上から表示させることもできるよ。
メニューを右から表示させる
右から表示させるには
さっきのHTMLの中にあった
|
1 |
<body class="drawer drawer--left"> |
このbodyの開始タグのクラス名を変更すれば右から表示されるようになるよ。
|
1 |
<body class="drawer drawer--right"> |
「drawer--left」となっている箇所を
「drawer--right」と変更することで
メニューが右から出るようになるよ。
メニューを上から表示させる
メニューを上から表示させることもできるよ。
右からメニューが出るようになったときと同じように
|
1 |
<body class="drawer drawer--left"> |
このbodyの開始タグのクラス名を変更すれば上から表示されるようになるよ。
|
1 |
<body class="drawer drawer--top"> |
「drawer--left」となっている箇所を
「drawer--top」と変更することで
メニューが上から出るようになるよ。
まとめ
実装はできたかな？
スマホでよく使われるメニューの表示手法だけど
自分で全て実装するとなると大変だから
こういうプラグインがあるとすごい便利だよね！
もし何かわからないことなどがあったら連絡してね。
それじゃまた今度！
TwitterやFacebookのフォローよろしくね！
Twitter
@michelgorilla
Facebook
ミケランジェロ
