css「hober」「translateY」を活用したメニュー表示の実装

本日は、cssの「hober」「translateY()」を用いて、
ヘッダーへのアクションを追加してみました。

個人的にクリックアクションだと、1工程挟むので、
カーソル合わせるだけで簡単に参照できた方が使いやすいな、と思ったからです。

translateY()」は、要素をY軸方向(下方向)へ移動させるcssとなります!

それでは早速実装してみましょう。

f:id:challenger_soft:20200504153650p:plain

f:id:challenger_soft:20200504153448p:plain

今回も無事実装できました!
ECサイトなどで、タグ管理しているのをみて、
テストしてみたく実験してみました。

ユーザー目線での作成ってなかなか利用して貰わないと意見はいただけないですが、
最低限あると便利だな、と言う機能は実装できるように力をつけていきたいです!

最後まで読んでいただきありがとうございました!