マウスホバーでアニメーションエフェクトのあるメニュー
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