今回はクリックしたら開閉できるアコーディオンメニューの実装をしていきます。
メニューの中身は最初隠していて、クリックで出てきて、しまうとまた隠れるので、色々なところで使える便利な機能です。
完成イメージはこちらです。
画像なので動きがないので、確認したい方は、ぼくのポートフォリオを確認してみてください。
下部のQ＆Aが同じ手順で実装しています。
それではいってみましょう！
開発環境
ruby 2.6.3
Rails 5.2.6
前提
- jQueryが使える状態
- homes/topビューで実装していきます
- Bootstrapのcardを使っています(別にcardじゃなくても問題なく動きます）
手順
アコーディオンメニューを実装する手順は3ステップです！
- ビューに要素を配置
- CSSを追加
- メニューを開閉する動きをつける
ビューに要素を配置
まずはビューにアコーディオンメニューのタイトルと中身を配置していきます。
ここでいうタイトルは常に表示されていてクリックする部分、中身はタイトルがクリックに応じて表示や非表示になる部分。
views/homes/top.html.erb
<!--accordion-containerの中にtitleとontentを配置-->
<!--cardとcard-bodyはBootstrapのものなので使わない方は無視してください-->
<div class="card accordion-container">
<div class="card-body accordion-title js-accordion-title">
これを押すと
</div>
<div class="card-body accordion-content">
開きます
</div>
</div>
これで１つのアコーディオンメニューになります。
これをあと２つ追加します。
views/homes/top.html.erb
<!--accordion-containerの中にtitleとontentを配置-->
<!--cardとcard-bodyはBootstrapのものなので使わない方は無視してください-->
<div class="card accordion-container">
<div class="card-body accordion-title js-accordion-title">
これを押すと
</div>
<div class="card-body accordion-content">
開きます
</div>
</div>
<!--１つ目と同じでテキストだけ変えたもの-->
<div class="card accordion-container">
<div class="card-body accordion-title js-accordion-title">
当然これも
</div>
<div class="card-body accordion-content">
開きます
</div>
</div>
<!--１つ目と同じでテキストだけ変えたもの-->
<div class="card accordion-container">
<div class="card-body accordion-title js-accordion-title">
これも絶対に
</div>
<div class="card-body accordion-content">
開きます
</div>
</div>
CSSを追加
次にCSSを追加していきます。
CSSでは、
①デザイン
②中身を非表示
③トグルのデザイン
に関する記述をしていきます。
assets/stylesheets/homes.scss
// アコーディオンメニューデザイン
.accordion-container .accordion-title {
color: #fff;
background: #343a40 ;
cursor: pointer
}
// カーソルが乗ったときのデザイン
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
background-color: #000000;
color: white;
box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.5);
transform: translateY(-5px);
}
// 最初は隠しておく
.accordion-content {
display: none;
}
// トグルの位置固定
.accordion-title{
position: relative;
}
// トグルのデザイン
.accordion-title:after {
content: "";
position: absolute;
right: 25px;
top: 38%;
transition: all 0.2s ease-in-out;
display: block;
width: 8px;
height: 8px;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.accordion-title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}
トグルの実装方法がむずかしくて、ぼくもうまく言語化できないので、もっと詳しく知りたい方はご自身でお調べください。
デザイン等も各自いい感じにカスタマイズしてみてください。
メニューを開閉する動きをつける
最後にクリックを起点にアコーディオンメニューを開閉、トグルの向きを変更する処理を書いていきます。
assets/javascripts/application.js
// アコーディオンメニュー
// Turbolinks無効化(詳しくは過去記事参照)
$(document).on('turbolinks:load', function() {
$(function(){
$('.js-accordion-title').on('click', function () {
/*クリックでコンテンツを開閉*/
$(this).next().slideToggle(200);
/*矢印の向きを変更*/
$(this).toggleClass('open', 200);
});
});
});
Turbolinksに関する記事はこちら
[Rails]リロードしないとJavaScript(jQuery)が動かない問題
これで無事にアコーディオンメニューが実装できました！
まとめ
アコーディオンメニューを実装する手順は3ステップです！
- ビューに要素を配置
- CSSを追加
- メニューを開閉する動きをつける
アコーディオンメニューはかなり汎用性が高いので、いろんな場所で実装して動きのある楽しいアプリ、サイトにしていきましょう！
最後までありがとうございました。