見出し画像

アコーディオンメニューの学び〜矢印編〜

最近アコーディオンメニュー作成と戦っている「ひらよし」です。

使っているものはHTML、css、JavaScriptの3つ。

今回作りたいものは

こんな感じのメニューです!!項目の右端の「+」をクリックすることで
↓ のように隠れていた項目が出てくる形を作っていきます。
メニューが開くと「+」⇨ 「×」へ変化。
「×」をクリックするとメニューが閉じて元に戻る形です。
複雑そう・・・。まあ、考える前に挑戦!挑戦!

メニューの項目、左側にある矢印に今回はスポットを当てます。
青丸の中にある白い矢印ですね!!
この矢印をマウスホバーした時に右側に動いて一度消えて、左側から出てくるというアニメーションをつけていきます。

HTML

今回はspanタグを使っていきます。
リンクをつけるなら「aタグ」でも良いと思います。
矢印については一旦これだけでOK!!

css

矢印の作成はそんなにハードルは高くないので安心していただいても良いかと。なぜなら僕が作れているので😊

cssの大まかな手順

  1. まずは下地作り

  2. 矢印の「>」の部分を作る

  3. 矢印の「ー」の部分を作る

  4. 矢印の動きアニメーションをつけていく

では説明を開始していきます。

1 下地づくり

ここでのポイントはこれから作る矢印の位置を決める際に基準を設ける
「position: relative;」
四角を作ってそれを丸の形を作る
下地を作るとこんな感じになります!!

2 矢印の「>」の部分を作る

ポイントは「擬似要素」を使うこと!!
矢印の「>」の部分は「□」の上辺、右辺の2辺を使います!!
border-top, border-rightの箇所です。
位置の調整はtransformを使って調整
これはtopとleftに50%を設定している状態です。
矢印に使う「□」の左上の角がちょうど丸の真ん中になります。
そうではなくて「□」の中心が青丸の真ん中に来るように
transformを使って調整します。
その後にtransformにrotate(45deg)をつけて
45度「□」の向きを傾けて完了!!

※黒四角の黒色は矢印に使う「□」をイメージしやすいように色をつけただけですので気になさらず。慣れるまではbackground-colorをつけると認識しやすいと思います。個人の感想ですけどね😂

3 矢印の「ー」の部分を作る
『2 矢印の「>」の部分を作る』工程が出来たらそれとほとんど似てます。

ポイントは擬似要素を後ろにつけていること
線一つだけで良いのでheightは不要です。
transformで位置を見ながら調整を行っています。
完成するとこのような形になります。
うまくいきましたね♬

4 矢印の動きアニメーションをつけていく

あとはマウスホバーした時の動き(アニメーション)を設定していきます。
まずはマウスホバーについて設定します。

まずは:hoverを設定します。
:hover::before, :hover::after ですが
ホバーした時の.arrowの前後の擬似要素の動きを指します。
今回で言うと青丸の中の「矢印のみ」のことを指します

上のanimationを見てこれはなんだ?と感じるものはないでしょうか?
僕も初めて見た時これは何を指しているんだ?と考えました。

「arrowAnimation」 ⇦こいつです。どっから出てきたのか?を説明します。
animationを設定する際にどのような動きにするのか。を制御していくことができるものがあります。

それが『@keyframe』です!!

今回はアニメーションの25%くらいの時は矢印はこの位置に、
50%の時はこの動きして
75%の時はこの動きをしてというふうに設定していきたいと思います。

アニメーションの25%ほどで青丸より右側に出て行ってもらいます。
50%ほどで青丸の左側に移動してもらいます。
75%にかけて青丸左側より矢印が徐々に出てきて
元の位置(真ん中)に戻るという流れです

25%の外に出ていくようにするために徐々に見えないようにopacityを0にしてます。
50%は見えていると青丸を横切っているのが見えてしまうので見えないようにするためにopacityは0のまま。(見えているとなんかシュールです。)
75%に向けて徐々に矢印が表示されるようにしてます。

25%の時にopacityを設定しないとこんな形で
青丸から外に出ても表示されっぱなしになってしまいます。
そして50%の時も横切っているのが見えてしまいます。
右に出ていって、左側から矢印が入ってくるという
アニメーションになりませんので見えなくする必要があります。

この設定した@keyframeを

ここのarrowAnimationで使っているというわけですね!!
※@keyframeの後の「arrowAnimation」は自分で使うアニメーションの名前をつける部分になります。「arrow」とかなんでもいいと思いますが、分かりやすい名前にしておくと確認する時に見やすいと思います。


長く書かせていただきました。
こういう形でアウトプットすると自身の振り返りにもなりますし、これ間違えてるなと気づくことも多くありました。
素人ながら勉強した内容を整理しつついつでも振り返れるノートのようにしていきたいと思っています。
何かの参考になれば嬉しいです。

この記事が気に入ったらサポートをしてみませんか?