Ruby on Rails5でBootstrap4のドロップメニューをホバー表示する方法

今回は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」

[ファイルの編集]

[ファイルの中身]

[追加した部分]

 

ビューファイル

ディレクトリの場所「app/views/shopping/」

対象ファイル「index.html.erb」

[ファイルの編集]

[ファイルの中身]

一応ビューのソースも記載しました。動作確認で画像が出ていると思いますが、上記ファイルの内容が画像で表示されています。

 

動作確認

それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。

[Railsサーバ起動]

ブラウザから次のURLへアクセスして下さい。

 

ドロップメニューのホバー表示される内容を都道府県に変更

 

スタイル

ディレクトリの場所「app/assets/stylesheets/」

対象ファイル「custom.css.scs」

[ファイルの編集]

[ファイルの中身]

[追加した部分]

 

コントローラー

ディレクトリの場所「app/controllers/」

対象ファイル「farmer_searchs_controller.rb」

[ファイルの作成]

[ファイルの編集]

[ファイルの中身]

 

ルーティング

ディレクトリの場所「config/」

対象ファイル「routes.rb」

[ファイルの編集]

[ファイルの中身]

[追加した部分]

 

ビューファイル

ディレクトリの場所「app/views/shopping/」

対象ファイル「index.html.erb」
[ファイルの編集]

[ファイルの中身]

[追加した部分]

ほぼ書き換えなので全体的に追加

 

動作確認

それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。

[Railsサーバ起動]

ブラウザから次のURLへアクセスして下さい。

[ホバー表示]

[都道府県をクリック]

 

ドロップメニューのホバー表示される項目を追加(カテゴリー)

 

スタイル

ディレクトリの場所「app/assets/stylesheets/」

対象ファイル「custom.css.scs」

[ファイルの編集]

[ファイルの中身]

[追加した部分]

 

設定ファイル

まず、configをインストールします。

コチラ参考→railsの(gem)configを使って簡単に定数を管理する

 

ディレクトリの場所「config/」

対象ファイル「settings.yml」

[ファイルの編集]

[ファイルの中身]

 

コントローラー

ディレクトリの場所「app/controllers/」

対象ファイル「category_searchs_controller.rb」

[ファイルの作成]

[ファイルの編集]

[ファイルの中身]

 

ルーティング

ディレクトリの場所「config/」

対象ファイル「routes.rb」
[ファイルの編集]

[ファイルの中身]

[追加した部分]

 

ビューファイル

ディレクトリの場所「app/views/shopping/」

対象ファイル「index.html.erb」
[ファイルの編集]

[ファイルの中身]

[追加した部分]

 

動作確認

それではRailsアプリケーションを起動してここまでの動作を確認してみます。ターミナルを起動し、起動させたいアプリケーションのルートディレクトリに移動して下さい。そして下記のコマンドを実行して下さい。

[Railsサーバ起動]

ブラウザから次のURLへアクセスして下さい。

[ホバー表示]

[カテゴリーをクリック]

これで一通りの作業が終了しました。

 

Ruby on Rails5で環境構築

Ruby on Rails5でソースをGitLab管理

NetBeansでRubyを使う方法

Ruby on Rails5でコントローラーからテンプレートの表示

Ruby on Rails5でモデルの作成とデータベースの利用

Ruby on Rails5で画像に対してリンク設定

Ruby on Rails5で検索フォーム作成

Ruby on Rails5でselect2を使う方法

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のドロップメニューで注文履歴を作成

 

投稿者: samancha

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA