【jQueryで簡単】ドロワーメニューの作り方:Drawerの使い方【コピペでOK】

man

困ってる人

ハンバーガーボタンをクリックして、メニュー画面が表示されるようにしたい
スマホとかでよく見る、ドロワーメニューの作り方ってどうやればいいんだろう?

それでしたら本日は、Drawerの使い方をご案内しますね

operator

オペレーター


こんにちは、よろと申します。

という事で今回は「Drawer」の導入方法という事で、

Drawerを使う事によって、ドロワーメニューをとても簡単に実装出来るようになります。

【jQueryで簡単】ドロワーメニューの作り方:Drawerの使い方【コピペでOK】

という事で、まず最初にやる事は、

drawer.cssdrawer.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

ファイルの読み込み

ファイルを読み込む準備が出来たら、次はHTMLを書いていく。

・HTML

これが基本的な形で、クラス名は変更せずにそのまま使うのが便利で楽。

あとは、必要なCSSファイルやJavaScriptのファイルを読み込んだら、

script.jsに、以下を書くだけでOK。

これらを追加するだけで、とりあえずはドロワーメニューの完成。

とても簡単。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール