Q&A
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
プレビュー
