ロールオーバーエフェクト「上からかぶさるメニュー」
横並びのメニューを想定して作成してみる。
まず<li><a>タグで普通にメニューを作成したら、そこでposition:relative; z-index:2; overflow:hidden; を設定する。これははじめに見えている状態だ。overflow を hidden にしているところがミソで、この設定をしないとオーバーフローのカラーが上からかぶさるところから見えてしまう。ケースによっては面白いアクションとなるかもしれない。
次に前後の状態を設定するのだが、これは before と after で行う。position:absolute; z-index:-1; display:block; content:''; transition: all 0.5s; としてみた。z-indexは1と表記すると文字も消えてしまう。transition は少しゆっくり目の0.5秒とした。after の値をtop:-100%;とし、width:100%; height:100%; と幅と高さの指定もしておくことが重要。
hover::after の background をグラデーションに設定した場合、hover 時はうまくいきますが、戻りがパッと消えてしまい、transition の効果がきかない。hover::after の background は、単色がいいみたいだ。
ちなみに ::after で top:0; left:-100%、hover::after を top:0; left:0; に設定すると左からかぶさるアクションとなる。
ロールオーバーエフェクト「中心から広がってくるメニュー」
基本的な作りは「上からかぶさるメニュー」と同じで、ポイントは ::after の設定で transform: scale(); を使用する。
このサンプルでは、::after のとき transform: scale(0.5);、hover::after で transform:scale(1); と指定した。
また、transition の効果は hover::after でグラデーションを設定した場合、hover 時はＯＫでも、やはり戻りがパッと消えてしまう。どういう状態かわかるように、このサンプルではグラデーションの指定を残している。