それでしたら本日は、Drawerの使い方をご案内しますね
こんにちは、ikuxxと申します。
という事で今回は「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
ファイルの読み込み
|
1 2 3 4 5 6 7 |
/* 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
|
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 |
// 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。
|
1 2 3 4 5 |
// script.js $(function() { $('.drawer').drawer(); }); |
これらを追加するだけで、とりあえずはドロワーメニューの完成。
とても簡単。
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
海外約50ヶ国を放浪中
海外生活が長い事もあり、英語と韓国語をある程度話せます。
中国語に関しては、現在HSK4レベル
趣味は筋トレと海外旅行
FX＋いくつかのブログを運営中。
たまにWeb制作や写真のお仕事、過去には動画撮影のお仕事も
このWordPressテーマはゼロからの自作
なので、どこか変なところがあったら教えて下さい
最近はマレーシア住み
YouTubeも始めました
↓
ハンバーガーボタンをクリックして、メニュー画面が表示されるようにしたい
スマホとかでよく見る、ドロワーメニューの作り方ってどうやればいいんだろう？