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 回答