ドロップダウンメニューのアニメーション覚書
ドロップダウンメニューのアニメーションについての覚書です。
上記のサイトの「SIMPLE PURE CSS DROPDOWN MENU1」のCSSについて考察
・transform(translate(X軸,Y軸))
要素をX軸、Y軸にずらすことができる。これでドロップダウン要素を予めビュー外にずらしておいて、hoverしたときに元の位置に戻すといい感じのアニメーションになる。
例
transform(translate(0,-100%)) 画面の上の方にずらしておく
↓
transform(translate(0,0)) 元の位置に戻す
・overflow hidden
transformと一緒に使うことで、ずらした要素を非表示にできる。
・~
以下のサイトがわかりやすかった
セレクタの次に「~」を入れセレクタを指定することで、指定の要素の後にある同じ階層の要素に装飾が適用可能。
これを使って、メニュー要素にhoverしているところにマーカーが移動する表現を実現。
