tro-suke blog

ロールオーバーで動きのあるメニュー

メニューのロールオーバーエフェクト

CSSだけでいろんなアクションを表現できるのはとても便利なことなんだけど、実際に使用するときは、コードの記述をあれこれ調べたりしないと、全て覚えているわけではないのでうまくいかなかったりする。要はどれだけ自分のなかで熟れているかということだろう。

実際に自分で作成して、いつでも調べられる状態にしておけば、作業の効率も上がりますよね。

ということで、今回は２点程ロールオーバーで動きのあるメニューを備忘録として作成してみました。

/*===== 上からかぶさるメニュー =====*/
.fromtop li a {
    display:block;
    width: 180px;
    line-height: 60px;
    background: linear-gradient(#fefefe 0%, #e6e6e6 100%);
    color: #333;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.fromtop li a::before,
.fromtop li a::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
    transition: all 0.5s;
}
.fromtop li a:hover {
    color: #fff;
}
.fromtop li a::after {
    top: -100%;
    width: 100%;
    height: 100%;
}
.fromtop li a:hover::after {
    top: 0;
    background: #003;
}

最近は主要ブラウザのベンダープレフィックスも、だいぶ省けるようになってスタイルシートもスッキリするようになりましたね。