マウスホバーでアニメーションエフェクトのあるメニュー

Result

jQuery

$(document).ready(function() {
    /// 第1層と追加レイヤーで各アンカーの内側のコンテンツをラップ
    $("#menu li a").wrapInner('<span class="out"></span>').append('<span class="bg"></span>');
 
    // 生成したノードを追加
    $("#menu li a").each(function() {
        $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
    });
 
    $("#menu li a").hover(function() {
        // マウスホバー
        $(".out", this).stop().animate({
            'top': '45px'
        }, 250);
        $(".over", this).stop().animate({
            'top': '0px'
        }, 250);
        $(".bg", this).stop().animate({
            'top': '0px'
        }, 120);
 
    }, function() {
        // マウスアウト
        $(".out", this).stop().animate({
            'top': '0px'
        }, 250);
        $(".over", this).stop().animate({
            'top': '-45px'
        }, 250);
        $(".bg", this).stop().animate({
            'top': '-45px'
        }, 120);
    });
});

css

.menu { 
    height: 45px;
    display: block;
}
 
.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
.menu ul li { 
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    line-height: 45px;
}
 
.menu ul li a {
    position: relative;
    display: block;
    width: 110px;
    height: 45px;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
 
.menu ul li a span {
    position: absolute;
    left: 0;
    width: 110px;
}
 
.menu ul li a span.out {
    top: 0px;
}
 
.menu ul li a span.over,
.menu ul li a span.bg {
    /* hide */ 
    top: -45px;
}
 
 
#menu {
    background: #EEE;
}
 
#menu ul li a {
    color: #000;
}
 
#menu ul li a span.over {
    color: #FFF;
}
 
#menu ul li span.bg {/*マウスホバー時に降りてくるspan。画像にするのも良いかも*/
    height: 45px;
    background: #666 ;
}

html

<div id="menu" class="menu"> 
    <ul> 
        <li><a href="javascript:void(0);">メニュー1</a></li> 
        <li><a href="javascript:void(0);">メニュー2</a></li> 
        <li><a href="javascript:void(0);">メニュー3</a></li> 
        <li><a href="javascript:void(0);">メニュー4</a></li> 
        <li><a href="javascript:void(0);">メニュー5</a></li> 
    </ul> 
</div>

via

Animated Menu

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Result

jQuery

css

html

via

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code