水平ナビゲーションバー/メニューのjQueryスライディングボーダーボトム

I had an idea for a horizontal navigation bar that the page you were on would have an underline or bottom border that when you went to a < li > in the menu that underline/bottom border would, at about a medium speed, move to the < li > your mouse is hovering over. Any help would be greatly appreciated.

サンプルコードを提供していただきありがとうございます。私はどこから始めたらいいのか分からない

いくつかの例のためのメニューです:

<html>
<head>

</head>

<body>


</body>
</html>
1
私はあなたの説明が非常に明確だとは思わない。たとえば、水平バーのコードを投稿してください。あなたが言ったときには、「あなたがいたページに...下の境界線がある」と言えば、それは私にフッタを考えるようになった。
追加された 著者 mrtsherman,
私はdownvoteしなかったが、おそらくあなたが試したものを投稿していないためです
追加された 著者 Mark Hall,
どうして否定的な投票があるのですか?
追加された 著者 Gᴇᴏᴍᴇᴛᴇʀ,

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 );
});
1
追加された
追加された 著者 mrtsherman,
ええ!ちょうどそのように、私はそれが左右に移動したいと思うだろう、そして、それはテキストの下の行になります
追加された 著者 Gᴇᴏᴍᴇᴛᴇʀ,