デザイン
2021.09.20
アコーディオンメニューにオススメ！クリックでアイコンが動くcssアニメーション【2種】
クリックした時に開くアコーディオンメニューを実装した時に
ワンポイント付けるだけでお洒落なアイコンアニメーションをご紹介！
基本のソース
HTML
<dl>
<dt class="toggle">
タイトルが入ります
</dt>
<dd>
コンテンツが入ります
</dd>
</dl>今回はdl dd dtでアコーディオンを作成し、dt(.toggle)のafterにcssでアイコンを作成します。
CSS
.toggle {
position: relative;
}
toggle:after {
content: "";
display: block;
position: absolute;
}
.toggle.active:after {
}JS
$(function () {
$('.toggle').click(function () {
$(this).toggleClass('active');
});
});JavaScriptでtoggleをクリックした時にtoggleにactiveクラスを付与させ
.toggle:afterに作成したアイコンを.toggle.active:afterで変化させます。
矢印が回転するアニメーション
toggle:after {
content: "";
display: block;
position: absolute;
top: 35%;
right: 0;
width: 11px;
height: 11px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
}
.toggle.active:after {
transform: rotate(135deg);
transition: .3s;
}borderで四角形の上辺と右辺を作り、45度回転させることで右向きの矢印を作成します。
.activeが付与された時に135度回転に変更する事で
右向きの矢印が下向きになるアニメ―ションを実装しています。
プラスがマイナスになるアニメーション
.toggle:before,
.toggle:after {
background-color: #000;
position: absolute;
width: 20px;
height: 2px;
top: 48%;
right: 20px;
}
.toggle:before {
transform: translateY(-50%) rotate(90deg);
top: 50%;
}
.toggle.active:before {
transform: rotate(180deg);
transition: .2s
}
.toggle.active:after {
opacity: 0;
transition: .1s
}.toggleに対し、beforeとafterの両方にcssの横線を設定し、
beforeに設定した線だけ横に90度回転して縦線にする事でプラスを作成しています。
さらにactive付与時に、beforeの縦線を回転させ横線に。
afterの横線はopacity:0; transition:0;でふわっと透明にさせる事で
プラスが回転してマイナスになるアニメーションにしています。
アコーディオンにひと手間加えるだけで華やかになるので是非試してみてください！
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
