こんにちは、ヨロと申します。
という事で今回は「Drawer」の導入方法という事で、
Drawerを使う事によって、ドロワーメニューをとても簡単に実装出来るようになります。
【jQueryで簡単】ドロワーメニューの作り方：Drawerの使い方【コピペでOK】
という事で、まず最初にやる事は、
・drawer.css、drawer.jsをダウンロード
ダウンロードはこちらから
https://github.com/blivesta/drawer/
「Clone or download」をクリック
↓
「Download ZIP」をクリック
↓
ダウンロードしたZIPファイルを解凍、
そうすると、中にこれらのファイルが入っている。
・drawer.css
・drawer.js
ダウンロードが終わったら、次は「iscroll.js」のダウンロード。
・iscroll.jsをダウンロード
「iscroll.js」のダウンロードがこちらから。
https://github.com/cubiq/iscroll
↓
「Clone or download」をクリック
↓
「Download ZIP」をクリック
↓
ダウンロードしたZIPファイルを解凍、
そうすると、中に、
・iscroll.js
が入っているので、
↓
「drawer.css」をCSSフォルダに保存
「drawer.js」「iscroll.js」を、jsフォルダに保存。
ファイルを保存する場所：フォルダの階層
・index.html
・CSSフォルダ
– style.css
– drawer.css
・jsフォルダ
– script.js
– drawer.js
– iscroll.js
ファイルの読み込み
「CSSファイルの読み込み」
<link rel="stylesheet" href="css/drawer.css">「jQuery, JavaScriptファイルの読み込み」
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/drawer.js"></script>
<script src="js/iscroll.js"></script>ファイルを読み込む準備が出来たら、次はHTMLを書いていく。
HTML（index.html）
<body class="drawer drawer--left">
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav">
<ul class="drawer-menu">
<li><a class="drawer-brand" href="#">メニュー一覧</a></li>
<li><a href="#" class="drawer-menu-item">メニュー1</a></li>
<li><a href="#" class="drawer-menu-item">メニュー2</a>
<ul>
<li><a href="#" class="drawer-dropdown-menu-item">子メニュー</a></li>
<li><a href="#" class="drawer-dropdown-menu-item">子メニュー</a></li>
<li><a href="#" class="drawer-dropdown-menu-item">子メニュー</a></li>
</ul>
</li>
<li><a href="#" class="drawer-menu-item">メニュー3</a></li>
</ul>
</nav>
<script src="js/script.js"></script>
<script src="js/drawer.js"></script>
<script src="js/iscroll.js"></script>
</body>これが基本的な形で、クラス名は変更せずにそのまま使うのが便利で楽。
あとは、必要なCSSファイルやJavaScriptのファイルを読み込んだら、
script.jsに、以下を書くだけでOK。
script.js
$(function() {
$('.drawer').drawer();
});これらを追加するだけで、とりあえずはドロワーメニューの完成。
とても簡単。
スマホとかでよく見る、ドロワーメニューの作り方ってどうやればいいんだろう？