横から出てくるハンバーガーメニューの drawer です。タップするとアニメーションでハンバーガーメニューが × ボタンに変わります。閉じるときは × ボタンの他にメニュー領域以外をタップしても閉じます。
Drawer
https://github.com/blivesta/drawer/
http://git.blivesta.com/drawer/
読み込み
CDNを読み込む方法で行いました。iScrollはメニュー部分のスクロールを行うプラグインです。jqueryを使えるように ‘jquery-rails’を入れています。
app/views/layouts/application.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Remonote</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- iScroll --> <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> </head> <body class="drawer drawer--left"> <%= render 'layouts/header' %> <%= yield %> </body> </html> |
bodyタグに “drawer drawer–left” クラスを指定しています。ここを ‘drawer–right’ にすると右から、 ‘drawer–top’ にすると上からドロワーメニューが出てきます。 https://github.com/blivesta/drawer/blob/master/scss/_position-right.scss
Gemfile
|
1 |
gem 'jquery-rails' #rails5はこれを入れないとjQueryが動きません |
app/assets/javascripts/application.js
|
1 |
//= require jquery |
ヘッダー
app/views/layouts/_header.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<header class="drawer-navbar " role="banner"> <div class="drawer-container"> <div class="drawer-navbar-header"> <a class="drawer-brand" href="#">Drawer</a> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> </div> <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu drawer-menu--right"> <li><%= link_to 'Nav1', '#', class: 'drawer-menu-item'%></li> <li><%= link_to 'Nav2', '#', class: 'drawer-menu-item'%></li> </ul> </nav> </div> </header> |
レスポンシブなヘッダーになっていて、デフォルトのブレイクポイントは次の通りです。
|
1 2 3 |
$drawer-viewport-sm: '(min-width: 40em)' !default; $drawer-viewport-md: '(min-width: 64em)' !default; $drawer-viewport-lg: '(min-width: 75em)' !default; |
jQuery
基本はこれだけで動作します。
app/assets/javascripts/drawer.js
|
1 2 3 |
$(document).ready(function() { $('.drawer').drawer(); }); |
その他オプションは次の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$('.drawer').drawer({ class: { nav: 'drawer-nav', toggle: 'drawer-toggle', overlay: 'drawer-overlay', open: 'drawer-open', close: 'drawer-close', dropdown: 'drawer-dropdown' }, iscroll: { // Configuring the iScroll // https://github.com/cubiq/iscroll#configuring-the-iscroll mouseWheel: true, preventDefault: false }, showOverlay: true }); |
簡単ですが以上です！ありがとうございました！！
