今回はRuby on RailsでBootstrap4のドロップメニューをホバー表示する方法を記載したいと思います。
最終的にはECサイトを作成したいと思います。
環境
| OS/ミドルウェア | バージョン |
|---|---|
| CentOS | 7.2.1511 |
| ruby | 2.4.2p198 |
| Rails | 5.1.4 |
ドロップメニューをホバー表示する
設定はCSSファイルにソースを追加するだけです。
詳細はコチラ→ドロップメニューをホバー表示する方法
スタイル
ディレクトリの場所「app/assets/stylesheets/」
対象ファイル「custom.css.scs」
[ファイルの編集]
|
1 |
$ vi app/assets/stylesheets/custom.css.scss |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@import "bootstrap"; // 画像(ロゴ) .navbar-brand { background: url("/images/logo/logo_001.png") no-repeat left center; background-size: contain; height: 50px; width: 250px; } // ドロップメニューをホバー表示 .dropdown:hover .dropdown-menu { display: block; } |
[追加した部分]
|
1 2 3 4 |
// ドロップメニューをホバー表示 .dropdown:hover .dropdown-menu { display: block; } |
ビューファイル
ディレクトリの場所「app/views/shopping/」
対象ファイル「index.html.erb」
[ファイルの編集]
|
1 |
$ vi app/views/shopping/index.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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<%= stylesheet_link_tag "custom", :media => "all" %> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar navbar-dark bg-dark"> <!--▼ リンク画像(ロゴ) ▼--> <div id="head-logo"> <%= link_to "", '/', class:"navbar-brand" %> </div><!-- /#head-logo --> <!--▲ リンク画像(ロゴ) ▲--> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="Navber"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">ホーム <span class="sr-only">(現位置)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">リンク</a> </li> <!--▼ ドロップダウン ▼--> <li class="nav-item dropdown"> <!-- 切替ボタンの設定 --> <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ドロップダウン </a> <!-- ドロップメニューの設定 --> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">メニュー1</a> <a class="dropdown-item" href="#">メニュー2</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">その他</a> </div><!-- /.dropdown-menu --> </li><!-- /.dropdown --> <!--▲ ドロップダウン ▲--> <li class="nav-item"> <a class="nav-link disabled" href="#">無効</a> </li> </ul><!-- /.navbar-nav mr-auto --> <form class="form-inline my-2 my-lg-0"> <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索..."> <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button> </form> </div><!-- /.navbar-collapse --> </nav><!-- /.navbar --> <div id="header"> <div class="nav-left"> </div><!-- nav-left --> <div id="nav-search"> <%= form_tag '/', :method => 'get' do %> <div class="input-group"> <%= text_field_tag :search, params[:search], placeholder: "キーワード検索", class: "form-control" %> <span class="input-group-btn"> <%= button_tag fa_icon("search"), :name => nil, class: "btn btn-primary " %> </span> </div><!-- input-group --> <% end %> </div><!-- ./nav-search --> </div><!-- #/header --> <h1>Hello</h1> <p> 現在登録されているユーザは次のとおりです。 </p> <p> <!-- アクションから渡されてきたモデルクラスのオブジェクトの配列の数だけ順にメールアドレスとパスワードを取得して画面に>表示 --> <% @users.each do |user| %> [メールアドレス] <%= user.email %>, [パスワード] <%= user.password %><br /> <% end %> </p> |
一応ビューのソースも記載しました。動作確認で画像が出ていると思いますが、上記ファイルの内容が画像で表示されています。
動作確認
それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。
[Railsサーバ起動]
|
1 |
$ rails server -b 0.0.0.0 |
ブラウザから次のURLへアクセスして下さい。
|
1 |
http://☓☓☓.☓☓.☓☓☓.☓☓:3000/ |
ドロップメニューのホバー表示される内容を都道府県に変更
スタイル
ディレクトリの場所「app/assets/stylesheets/」
対象ファイル「custom.css.scs」
[ファイルの編集]
|
1 |
$ vi app/assets/stylesheets/custom.css.scss |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
@import "bootstrap"; //----------------- // ナビゲーションバー //----------------- // 画像(ロゴ) .navbar-brand { background: url("/images/logo/logo_001.png") no-repeat left center; background-size: contain; height: 50px; width: 250px; } // ドロップメニューのホバー表示 .dropdown:hover .dropdown-menu { display: block; } // ナビゲーションバーの高さを変更 .navbar-height { height: 60px; } // ドロップメニューのホバーの背景色 #cat-nav-m { background: #87CEEB; } // 親要素に位置を合わせる .cat-nav { box-sizing: border-box; color: #fff; font-size: 11px; left: 0; line-height: 1.6; padding: 20px 8px 10px 20px; position: absolute; top: 48px; width: 1378px; border-radius: 2px; } // 文字を横並びにする .cat-nav ul { float: left; margin-left: 12px; //width: 226px; } // 項目ごとに黒丸とかを表示させないようにする ol, ul { list-style: none; list-style-type: none; list-style-position: initial; list-style-image: initial; } // ホバーで出てくる文字の色とかを変更 .cat-nav ul li a { font-size: 14px !important; float: left; display: block; color: #fff; opacity: .9; } |
[追加した部分]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
// ナビゲーションバーの高さを変更 .navbar-height { height: 60px; } // ドロップメニューのホバーの背景色 #cat-nav-m { background: #87CEEB; } // 親要素に位置を合わせる .cat-nav { box-sizing: border-box; color: #fff; font-size: 11px; left: 0; line-height: 1.6; padding: 20px 8px 10px 20px; position: absolute; top: 48px; width: 1378px; border-radius: 2px; } // 文字を横並びにする .cat-nav ul { float: left; margin-left: 12px; //width: 226px; } // 項目ごとに黒丸とかを表示させないようにする ol, ul { list-style: none; list-style-type: none; list-style-position: initial; list-style-image: initial; } // ホバーで出てくる文字の色とかを変更 .cat-nav ul li a { font-size: 14px !important; float: left; display: block; color: #fff; opacity: .9; } |
コントローラー
ディレクトリの場所「app/controllers/」
対象ファイル「farmer_searchs_controller.rb」
[ファイルの作成]
|
1 |
$ rails generate controller farmerSearchs |
[ファイルの編集]
|
1 |
$ vi app/controllers/farmer_searchs_controller.rb |
[ファイルの中身]
|
1 2 3 4 5 6 |
class FarmerSearchsController < ApplicationController def prefecture # テキストを出力する render plain: '都道府県ごとにユーザが表示する処理' end end |
ルーティング
ディレクトリの場所「config/」
対象ファイル「routes.rb」
[ファイルの編集]
|
1 |
$ vi config/routes.rb |
[ファイルの中身]
|
1 2 3 4 5 6 |
Rails.application.routes.draw do # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html get '/' => 'shopping#index' get 'commodity' => 'shopping#commodity' get 'farmersearchs' => 'farmer_searchs#prefecture' end |
[追加した部分]
|
1 |
get 'farmersearchs' => 'farmer_searchs#prefecture' |
ビューファイル
ディレクトリの場所「app/views/shopping/」
対象ファイル「index.html.erb」
[ファイルの編集]
|
1 |
$ vi app/views/shopping/index.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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<%= stylesheet_link_tag "custom", :media => "all" %> <!--▼ ナビゲーションバー ▼--> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark navbar-height"> <!--▼ リンク画像(ロゴ) ▼--> <div id="head-logo"> <%= link_to "", '/', class:"navbar-brand" %> </div><!-- /#head-logo --> <!--▲ リンク画像(ロゴ) ▲--> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="Navber"> <ul class="navbar-nav mr-auto"> <!--▼ ドロップダウン(近くの農家を見る) ▼--> <li class="nav-item dropdown"> <!-- 切替ボタンの設定 --> <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 近くの農家を見る </a> <!-- ドロップメニューの設定 --> <div id="cat-nav-m" class="dropdown-menu cat-nav" aria-labelledby="navbarDropdown"> <ul> <li><%= link_to "北海道", farmersearchs_path(@farmersearchs, prefecture: "01"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "青森県", farmersearchs_path(@farmersearchs, prefecture: "02"), class:"dropdown-item" %></li> <li><%= link_to "岩手県", farmersearchs_path(@farmersearchs, prefecture: "03"), class:"dropdown-item" %></li> <li><%= link_to "宮城県", farmersearchs_path(@farmersearchs, prefecture: "04"), class:"dropdown-item" %></li> <li><%= link_to "秋田県", farmersearchs_path(@farmersearchs, prefecture: "05"), class:"dropdown-item" %></li> <li><%= link_to "山形県", farmersearchs_path(@farmersearchs, prefecture: "06"), class:"dropdown-item" %></li> <li><%= link_to "福島県", farmersearchs_path(@farmersearchs, prefecture: "07"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "茨城県", farmersearchs_path(@farmersearchs, prefecture: "08"), class:"dropdown-item" %></li> <li><%= link_to "栃木県", farmersearchs_path(@farmersearchs, prefecture: "09"), class:"dropdown-item" %></li> <li><%= link_to "群馬県", farmersearchs_path(@farmersearchs, prefecture: "10"), class:"dropdown-item" %></li> <li><%= link_to "埼玉県", farmersearchs_path(@farmersearchs, prefecture: "11"), class:"dropdown-item" %></li> <li><%= link_to "千葉県", farmersearchs_path(@farmersearchs, prefecture: "12"), class:"dropdown-item" %></li> <li><%= link_to "東京都", farmersearchs_path(@farmersearchs, prefecture: "13"), class:"dropdown-item" %></li> <li><%= link_to "神奈川県", farmersearchs_path(@farmersearchs, prefecture: "14"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "新潟県", farmersearchs_path(@farmersearchs, prefecture: "15"), class:"dropdown-item" %></li> <li><%= link_to "富山県", farmersearchs_path(@farmersearchs, prefecture: "16"), class:"dropdown-item" %></li> <li><%= link_to "石川県", farmersearchs_path(@farmersearchs, prefecture: "17"), class:"dropdown-item" %></li> <li><%= link_to "福井県", farmersearchs_path(@farmersearchs, prefecture: "18"), class:"dropdown-item" %></li> <li><%= link_to "山梨県", farmersearchs_path(@farmersearchs, prefecture: "19"), class:"dropdown-item" %></li> <li><%= link_to "長野県", farmersearchs_path(@farmersearchs, prefecture: "20"), class:"dropdown-item" %></li> <li><%= link_to "岐阜県", farmersearchs_path(@farmersearchs, prefecture: "21"), class:"dropdown-item" %></li> <li><%= link_to "静岡県", farmersearchs_path(@farmersearchs, prefecture: "22"), class:"dropdown-item" %></li> <li><%= link_to "愛知県", farmersearchs_path(@farmersearchs, prefecture: "23"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "三重県", farmersearchs_path(@farmersearchs, prefecture: "24"), class:"dropdown-item" %></li> <li><%= link_to "滋賀県", farmersearchs_path(@farmersearchs, prefecture: "25"), class:"dropdown-item" %></li> <li><%= link_to "京都府", farmersearchs_path(@farmersearchs, prefecture: "26"), class:"dropdown-item" %></li> <li><%= link_to "大阪府", farmersearchs_path(@farmersearchs, prefecture: "27"), class:"dropdown-item" %></li> <li><%= link_to "兵庫県", farmersearchs_path(@farmersearchs, prefecture: "28"), class:"dropdown-item" %></li> <li><%= link_to "奈良県", farmersearchs_path(@farmersearchs, prefecture: "29"), class:"dropdown-item" %></li> <li><%= link_to "和歌山県", farmersearchs_path(@farmersearchs, prefecture: "30"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "鳥取県", farmersearchs_path(@farmersearchs, prefecture: "31"), class:"dropdown-item" %></li> <li><%= link_to "島根県", farmersearchs_path(@farmersearchs, prefecture: "32"), class:"dropdown-item" %></li> <li><%= link_to "岡山県", farmersearchs_path(@farmersearchs, prefecture: "33"), class:"dropdown-item" %></li> <li><%= link_to "広島県", farmersearchs_path(@farmersearchs, prefecture: "34"), class:"dropdown-item" %></li> <li><%= link_to "山口県", farmersearchs_path(@farmersearchs, prefecture: "35"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "徳島県", farmersearchs_path(@farmersearchs, prefecture: "36"), class:"dropdown-item" %></li> <li><%= link_to "香川県", farmersearchs_path(@farmersearchs, prefecture: "37"), class:"dropdown-item" %></li> <li><%= link_to "愛媛県", farmersearchs_path(@farmersearchs, prefecture: "38"), class:"dropdown-item" %></li> <li><%= link_to "高知県", farmersearchs_path(@farmersearchs, prefecture: "39"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "福岡県", farmersearchs_path(@farmersearchs, prefecture: "40"), class:"dropdown-item" %></li> <li><%= link_to "佐賀県", farmersearchs_path(@farmersearchs, prefecture: "41"), class:"dropdown-item" %></li> <li><%= link_to "長崎県", farmersearchs_path(@farmersearchs, prefecture: "42"), class:"dropdown-item" %></li> <li><%= link_to "熊本県", farmersearchs_path(@farmersearchs, prefecture: "43"), class:"dropdown-item" %></li> <li><%= link_to "大分県", farmersearchs_path(@farmersearchs, prefecture: "44"), class:"dropdown-item" %></li> <li><%= link_to "宮崎県", farmersearchs_path(@farmersearchs, prefecture: "45"), class:"dropdown-item" %></li> <li><%= link_to "鹿児島県", farmersearchs_path(@farmersearchs, prefecture: "46"), class:"dropdown-item" %></li> <li><%= link_to "沖縄県", farmersearchs_path(@farmersearchs, prefecture: "47"), class:"dropdown-item" %></li> </ul> </div><!-- /.dropdown-menu --> </li><!-- /.dropdown --> <!--▲ ドロップダウン(近くの農家を見る) ▲--> <li class="nav-item"> <a class="nav-link disabled" href="#">無効</a> </li> </ul><!-- /.navbar-nav mr-auto --> <form class="form-inline my-2 my-lg-0"> <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索..."> <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button> </form> </div><!-- /.navbar-collapse --> </nav><!-- /.navbar --> <!--▲ ナビゲーションバー ▲--> |
[追加した部分]
ほぼ書き換えなので全体的に追加
動作確認
それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。
[Railsサーバ起動]
|
1 |
$ rails server -b 0.0.0.0 |
ブラウザから次のURLへアクセスして下さい。
|
1 |
http://☓☓☓.☓☓.☓☓☓.☓☓:3000/ |
[ホバー表示]
[都道府県をクリック]
ドロップメニューのホバー表示される項目を追加(カテゴリー)
スタイル
ディレクトリの場所「app/assets/stylesheets/」
対象ファイル「custom.css.scs」
[ファイルの編集]
|
1 |
$ vi app/assets/stylesheets/custom.css.scss |
[ファイルの中身]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
@import "bootstrap"; //----------------- // ナビゲーションバー //----------------- // ▼ 近くの農家を見る ▼ // 画像(ロゴ) .navbar-brand { background: url("/images/logo/logo_001.png") no-repeat left center; background-size: contain; height: 45px; width: 250px; } // ドロップメニューのホバー表示 .dropdown:hover .dropdown-menu { display: block; } // ナビゲーションバーの高さを変更 .navbar-height { height: 45px; } // ドロップメニューのホバーの背景色 #cat-nav-m { background: #87CEEB; } // 親要素に位置を合わせる .cat-nav { box-sizing: border-box; color: #fff; font-size: 11px; left: 0; line-height: 1.6; padding: 20px 8px 10px 20px; position: absolute; top: 40px; width: 1378px; border-radius: 2px; } // 文字を横並びにする .cat-nav ul { float: left; margin-left: 12px; //width: 226px; } // 項目ごとに黒丸とかを表示させないようにする ol, ul { list-style: none; list-style-type: none; list-style-position: initial; list-style-image: initial; } // ホバーで出てくる文字の色とかを変更 .cat-nav ul li a { font-size: 14px !important; float: left; display: block; color: #fff; opacity: .9; } // ▲ 近くの農家を見る ▲ // ▼ カテゴリー ▼ // ドロップメニューのホバーの背景色 #cat-nav-c { background: #90EE90; } // ホバーで出てくる文字の色とかを変更 .cat-nav-c a { font-size: 14px !important; float: left; display: block; color: #fff; opacity: .9; } // ▲ カテゴリー ▲ |
[追加した部分]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// ▼ カテゴリー ▼ // ドロップメニューのホバーの背景色 #cat-nav-c { background: #90EE90; } // ホバーで出てくる文字の色とかを変更 .cat-nav-c a { font-size: 14px !important; float: left; display: block; color: #fff; opacity: .9; } // ▲ カテゴリー ▲ |
設定ファイル
まず、configをインストールします。
コチラ参考→railsの（gem）configを使って簡単に定数を管理する
ディレクトリの場所「config/」
対象ファイル「settings.yml」
[ファイルの編集]
|
1 |
$ vi settings.yml |
[ファイルの中身]
|
1 2 3 4 5 |
# カテゴリー category: 1: '米' 2: '野菜' 3: '飲み物' |
コントローラー
ディレクトリの場所「app/controllers/」
対象ファイル「category_searchs_controller.rb」
[ファイルの作成]
|
1 |
$ rails generate controller categorySearchs |
[ファイルの編集]
|
1 |
$ vi app/controllers/category_searchs_controller.rb |
[ファイルの中身]
|
1 2 3 4 5 6 |
class CategorySearchsController < ApplicationController def category # テキストを出力する render plain: 'カテゴリー表示する処理' end end |
ルーティング
ディレクトリの場所「config/」
対象ファイル「routes.rb」
[ファイルの編集]
|
1 |
$ vi config/routes.rb |
[ファイルの中身]
|
1 2 3 4 5 6 7 |
Rails.application.routes.draw do # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html get '/' => 'shopping#index' get 'commodity' => 'shopping#commodity' get 'shopsearch' => 'shopping#shopsearch' get 'categorysearchs' => 'category_searchs#category' end |
[追加した部分]
|
1 |
get 'categorysearchs' => 'category_searchs#category' |
ビューファイル
ディレクトリの場所「app/views/shopping/」
対象ファイル「index.html.erb」
[ファイルの編集]
|
1 |
$ vi app/views/shopping/index.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 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<%= stylesheet_link_tag "custom", :media => "all" %> <!--▼ ナビゲーションバー ▼--> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-dark bg-dark navbar-height"> <!--▼ リンク画像(ロゴ) ▼--> <div id="head-logo"> <%= link_to "", '/', class:"navbar-brand" %> </div><!-- /#head-logo --> <!--▲ リンク画像(ロゴ) ▲--> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="Navber"> <ul class="navbar-nav mr-auto"> <!--▼ ドロップダウン(近くの農家を見る) ▼--> <li class="nav-item dropdown"> <!-- 切替ボタンの設定 --> <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 近くの農家を見る </a> <!-- ドロップメニューの設定 --> <div id="cat-nav-m" class="dropdown-menu cat-nav" aria-labelledby="navbarDropdown"> <ul> <li><%= link_to "北海道", farmersearchs_path(@farmersearchs, prefecture: "01"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "青森県", farmersearchs_path(@farmersearchs, prefecture: "02"), class:"dropdown-item" %></li> <li><%= link_to "岩手県", farmersearchs_path(@farmersearchs, prefecture: "03"), class:"dropdown-item" %></li> <li><%= link_to "宮城県", farmersearchs_path(@farmersearchs, prefecture: "04"), class:"dropdown-item" %></li> <li><%= link_to "秋田県", farmersearchs_path(@farmersearchs, prefecture: "05"), class:"dropdown-item" %></li> <li><%= link_to "山形県", farmersearchs_path(@farmersearchs, prefecture: "06"), class:"dropdown-item" %></li> <li><%= link_to "福島県", farmersearchs_path(@farmersearchs, prefecture: "07"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "茨城県", farmersearchs_path(@farmersearchs, prefecture: "08"), class:"dropdown-item" %></li> <li><%= link_to "栃木県", farmersearchs_path(@farmersearchs, prefecture: "09"), class:"dropdown-item" %></li> <li><%= link_to "群馬県", farmersearchs_path(@farmersearchs, prefecture: "10"), class:"dropdown-item" %></li> <li><%= link_to "埼玉県", farmersearchs_path(@farmersearchs, prefecture: "11"), class:"dropdown-item" %></li> <li><%= link_to "千葉県", farmersearchs_path(@farmersearchs, prefecture: "12"), class:"dropdown-item" %></li> <li><%= link_to "東京都", farmersearchs_path(@farmersearchs, prefecture: "13"), class:"dropdown-item" %></li> <li><%= link_to "神奈川県", farmersearchs_path(@farmersearchs, prefecture: "14"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "新潟県", farmersearchs_path(@farmersearchs, prefecture: "15"), class:"dropdown-item" %></li> <li><%= link_to "富山県", farmersearchs_path(@farmersearchs, prefecture: "16"), class:"dropdown-item" %></li> <li><%= link_to "石川県", farmersearchs_path(@farmersearchs, prefecture: "17"), class:"dropdown-item" %></li> <li><%= link_to "福井県", farmersearchs_path(@farmersearchs, prefecture: "18"), class:"dropdown-item" %></li> <li><%= link_to "山梨県", farmersearchs_path(@farmersearchs, prefecture: "19"), class:"dropdown-item" %></li> <li><%= link_to "長野県", farmersearchs_path(@farmersearchs, prefecture: "20"), class:"dropdown-item" %></li> <li><%= link_to "岐阜県", farmersearchs_path(@farmersearchs, prefecture: "21"), class:"dropdown-item" %></li> <li><%= link_to "静岡県", farmersearchs_path(@farmersearchs, prefecture: "22"), class:"dropdown-item" %></li> <li><%= link_to "愛知県", farmersearchs_path(@farmersearchs, prefecture: "23"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "三重県", farmersearchs_path(@farmersearchs, prefecture: "24"), class:"dropdown-item" %></li> <li><%= link_to "滋賀県", farmersearchs_path(@farmersearchs, prefecture: "25"), class:"dropdown-item" %></li> <li><%= link_to "京都府", farmersearchs_path(@farmersearchs, prefecture: "26"), class:"dropdown-item" %></li> <li><%= link_to "大阪府", farmersearchs_path(@farmersearchs, prefecture: "27"), class:"dropdown-item" %></li> <li><%= link_to "兵庫県", farmersearchs_path(@farmersearchs, prefecture: "28"), class:"dropdown-item" %></li> <li><%= link_to "奈良県", farmersearchs_path(@farmersearchs, prefecture: "29"), class:"dropdown-item" %></li> <li><%= link_to "和歌山県", farmersearchs_path(@farmersearchs, prefecture: "30"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "鳥取県", farmersearchs_path(@farmersearchs, prefecture: "31"), class:"dropdown-item" %></li> <li><%= link_to "島根県", farmersearchs_path(@farmersearchs, prefecture: "32"), class:"dropdown-item" %></li> <li><%= link_to "岡山県", farmersearchs_path(@farmersearchs, prefecture: "33"), class:"dropdown-item" %></li> <li><%= link_to "広島県", farmersearchs_path(@farmersearchs, prefecture: "34"), class:"dropdown-item" %></li> <li><%= link_to "山口県", farmersearchs_path(@farmersearchs, prefecture: "35"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "徳島県", farmersearchs_path(@farmersearchs, prefecture: "36"), class:"dropdown-item" %></li> <li><%= link_to "香川県", farmersearchs_path(@farmersearchs, prefecture: "37"), class:"dropdown-item" %></li> <li><%= link_to "愛媛県", farmersearchs_path(@farmersearchs, prefecture: "38"), class:"dropdown-item" %></li> <li><%= link_to "高知県", farmersearchs_path(@farmersearchs, prefecture: "39"), class:"dropdown-item" %></li> </ul> <ul> <li><%= link_to "福岡県", farmersearchs_path(@farmersearchs, prefecture: "40"), class:"dropdown-item" %></li> <li><%= link_to "佐賀県", farmersearchs_path(@farmersearchs, prefecture: "41"), class:"dropdown-item" %></li> <li><%= link_to "長崎県", farmersearchs_path(@farmersearchs, prefecture: "42"), class:"dropdown-item" %></li> <li><%= link_to "熊本県", farmersearchs_path(@farmersearchs, prefecture: "43"), class:"dropdown-item" %></li> <li><%= link_to "大分県", farmersearchs_path(@farmersearchs, prefecture: "44"), class:"dropdown-item" %></li> <li><%= link_to "宮崎県", farmersearchs_path(@farmersearchs, prefecture: "45"), class:"dropdown-item" %></li> <li><%= link_to "鹿児島県", farmersearchs_path(@farmersearchs, prefecture: "46"), class:"dropdown-item" %></li> <li><%= link_to "沖縄県", farmersearchs_path(@farmersearchs, prefecture: "47"), class:"dropdown-item" %></li> </ul> </div><!-- /.dropdown-menu --> </li><!-- /.dropdown --> <!--▲ ドロップダウン(近くの農家を見る) ▲--> <!--▼ ドロップダウン(カテゴリー) ▼--> <li class="nav-item dropdown"> <!-- 切替ボタンの設定 --> <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> カテゴリー </a> <!-- ドロップメニューの設定 --> <div id="cat-nav-c" class="dropdown-menu cat-nav-c" aria-labelledby="dropdownMenuLink"> <!-- 設定ファイルから取得したカテゴリーをループ処理 --> <% Settings.category.each do |key, value| %> <%= link_to "#{value}", categorysearchs_path(@categorysearchs, category: "#{key}"), class:"dropdown-item" %> <% end %> </div><!-- /.dropdown-menu --> </li><!-- /.dropdown --> <!--▲ ドロップダウン(カテゴリー) ▲--> </ul><!-- /.navbar-nav mr-auto --> <form class="form-inline my-2 my-lg-0"> <input type="search" class="form-control mr-sm-2" placeholder="検索..." aria-label="検索..."> <button type="submit" class="btn btn-outline-success my-2 my-sm-0">検索</button> </form> </div><!-- /.navbar-collapse --> </nav><!-- /.navbar --> <!--▲ ナビゲーションバー ▲--> |
[追加した部分]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!--▼ ドロップダウン(カテゴリー) ▼--> <li class="nav-item dropdown"> <!-- 切替ボタンの設定 --> <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> カテゴリー </a> <!-- ドロップメニューの設定 --> <div id="cat-nav-c" class="dropdown-menu cat-nav-c" aria-labelledby="dropdownMenuLink"> <!-- 設定ファイルから取得したカテゴリーをループ処理 --> <% Settings.category.each do |key, value| %> <%= link_to "#{value}", categorysearchs_path(@categorysearchs, category: "#{key}"), class:"dropdown-item" %> <% end %> </div><!-- /.dropdown-menu --> </li><!-- /.dropdown --> <!--▲ ドロップダウン(カテゴリー) ▲--> |
動作確認
それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。
[Railsサーバ起動]
|
1 |
$ rails server -b 0.0.0.0 |
ブラウザから次のURLへアクセスして下さい。
|
1 |
http://☓☓☓.☓☓.☓☓☓.☓☓:3000/ |
[ホバー表示]
[カテゴリーをクリック]
これで一通りの作業が終了しました。
Ruby on Rails5でコントローラーからテンプレートの表示
Ruby on Rails5でモデルの作成とデータベースの利用
Ruby on Rails5でBootstrap4デザインにする
Ruby on Rails5で検索フォームと一体型になった検索ボタン作成方法
Ruby on Rails5でFontAwesomeを導入する方法(アイコンが使用可能)
Ruby on Rails5でBootstrap4のナビゲーションバーを使用する方法
Ruby on Rails5でBootstrap4のナビゲーションバーに画像(ロゴ)を設置
Ruby on Rails5でBootstrap4を使用しながらCSSを使用する
Ruby on Rails5でBootstrap4のドロップメニューをホバー表示する方法
Ruby on Rails5でBootstrap4のドロップメニューログインアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューでカートアイコンを作成
Ruby on Rails5でBootstrap4のドロップメニューで注文履歴を作成
