Railsアプリにdrawer.jsで横から出てくるドロワーメニューを導入する

rails drawer js hamburger

横から出てくるハンバーガーメニューの drawer です。タップするとアニメーションでハンバーガーメニューが × ボタンに変わります。閉じるときは × ボタンの他にメニュー領域以外をタップしても閉じます。

Drawer
https://github.com/blivesta/drawer/
http://git.blivesta.com/drawer/

読み込み

CDNを読み込む方法で行いました。iScrollはメニュー部分のスクロールを行うプラグインです。jqueryを使えるように ‘jquery-rails’を入れています。

app/views/layouts/application.html.erb

bodyタグに “drawer drawer–left” クラスを指定しています。ここを ‘drawer–right’ にすると右から、 ‘drawer–top’ にすると上からドロワーメニューが出てきます。 https://github.com/blivesta/drawer/blob/master/scss/_position-right.scss

Gemfile

app/assets/javascripts/application.js

ヘッダー

app/views/layouts/_header.html.erb

レスポンシブなヘッダーになっていて、デフォルトのブレイクポイントは次の通りです。

jQuery

基本はこれだけで動作します。

app/assets/javascripts/drawer.js

その他オプションは次の通りです。

簡単ですが以上です!ありがとうございました!!


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp