rails6でのdrawerのプラグイン

rails6でレスポンシブデザインのためにcdnでdrawerを使おうとしています。

画面サイズを変えると位置は変わっているのでcssは効いている様なのですが、jqueryが効いていない様です。

他のファイルでjqueryは使えているので、導入はできていると思います。

application.html.erb
1<!DOCTYPE html>
2<html>
3<head>
4  <title>Leave it.</title>
5  <%= csrf_meta_tags %>
6  <%= csp_meta_tag %>
7
8  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10
11  <!-- drawer.css -->
12  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
13  <!-- iScroll -->
14  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
15  <!-- drawer.js -->
16  <script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
17
18
19  <meta name="viewport" content="width=device-width, initial-scale=1.0">
20
21</head>
22
23<body class="drawer drawer–-right">
24
25  <div class="container">
26    <header class="drawer-navbar" role="banner">
27      <div class="header_logo">
28        <% if @current_user %>
29        <%= link_to("投稿一覧" , "/posts/index") %>
30        <% else %>
31        <%= link_to("Leave it." , "/") %>
32        <% end %>
33      </div>
34
35      <div class="drawer-container">
36      <div class="drawer-navbar-header">
37        <button type="button" class="drawer-toggle drawer-hamburger">
38          <span class="sr-only">toggle navigation</span>
39          <span class="drawer-hamburger-icon"></span>
40        </button>
41      </div>
42        <nav class="drawer-nav" role="navigation">
43          <ul class="drawer-menu header_menus">
44            <% if @current_user %>
45            <li class="drawer-menu-item">
46              <%= link_to(@current_user.name , "/users/#{@current_user.id}") %>
47            </li>
48            <li class="drawer-menu-item">
49              <%= link_to("投稿一覧" , "/posts/index") %>
50            </li>
51            <li class="drawer-menu-item">
52              <%= link_to("新規投稿" , "/posts/new") %>
53            </li>
54            <li class="drawer-menu-item">
55              <%= link_to("ログアウト" , "/logout" , {method: :post}) %>
56            </li>
57            <% else %>
58            <li class="drawer-menu-item">
59              <%= link_to("ログイン" , "/login") %>
60            </li>
61            <li class="drawer-menu-item">
62              <%= link_to("新規登録" , "/users/new")%>
63            </li>
64            <li class="drawer-menu-item">
65              <%= link_to("Leave it.とは" , "/about") %>
66            </li>
67            <% end %>
68          </ul>
69        </nav>
70      </div>
71    </header>
72  </div>
73
74  <% if flash[:notice] %>
75  <%= flash[:notice] %>
76  <% end %>
77  <%= yield %>
78</body>
79</html>

drawer.js
1$(document).ready(function() {
2  $('.drawer').drawer();
3});

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

rails6でのdrawerのプラグイン

関連した質問