1

あなたがいるページには下線または下の境界線があり、メニューの < li > に移動すると、下線/下の境界線が中程度の速度で移動する水平ナビゲーション バーのアイデアがありました。 < li > マウスがホバリングしています。どんな助けでも大歓迎です。

サンプルコードを提供していないことをお詫び申し上げます。どこから始めたらいいのかわからない

例として、メニューを次に示します。

<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
li.active
{
border-bottom: 2px solid red;
}
a
{
text-decoration:none;
}
</style>
</head>

<body>
<ul>
<li class="active"><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>
4

1 に答える 1

1

さて、これはあなたが求めているものだと思います。水平ナビゲーション バーの項目にマウスを合わせると、その項目の下に移動するマーカーがアニメーション化されます。これを行うには、マーカーに固定位置を指定し、その位置にその上と左のプロパティをアニメーション化します。

http://jsfiddle.net/dBxn8/

$('li').mouseover( function() { 
    $('.active').removeClass('active');
    $(this).addClass('active');
    var top = $(this).offset().top + $(this).height() + 5;
    var left = $(this).offset().left + ($(this).width() / 2);
    $('#marker').stop().animate( { top: top, left: left  }, 2000 );
});
于 2011-11-25T07:00:34.150 に答える