javascript - 如何在我的 jquery 菜单中的 li 项下添加一行？

Question

我不太确定从哪里开始，但我有一个用 jquery 完成的菜单。当您现在将鼠标悬停在上面时，它会对文本产生一些淡入/淡出效果，并且手动处理链接。

我想添加一条简单的线，也许在 css 中完成？当您悬停时，也可以在每个 li 下方移动一个元素，滑动到您悬停的 li，而不仅仅是出现。

我只是不知道从哪里开始做类似的事情，因为我以前从来没有在没有图像的情况下真正做过(最好)。粗略地需要从某个地方开始并单独移动 ul 并在您用鼠标离开 div 时停止在任何地方，我想在您单击链接时保持它。不过，我并不是要任何人为我做这个(除非你喜欢)，只是为了指明正确的方向。我已经看到一些带有执行此操作的菜单的免费代码，并尝试使用它们或模仿它们，但它不适用于我的菜单。

Fiddle

Answer 1

我刚才做了这个，也许这就是你需要的。它将计算您悬停的 anchor 元素的宽度，并根据其宽度和位置增加下划线元素(div)

//underliner
$('#menu a').hover(function(){
    var position = $(this).position(); var width = $(this).width();
    $('#underliner', '#menu').animate({width: width,left: position.left}, 200 );
});
$('#menu').hover(function(){
    $('#underliner', '#menu').animate({opacity: 1}, 200).show();
}, function () {
    $('#underliner', '#menu').animate({opacity: 0}, 200).hide();
});

下划线元素的 CSS(根据您的需要更改高度和背景色)

#underliner {
    display: none;
    position: relative;
    height: 5px;
    line-height: 5px;
    font-size: 1px;
    background-color: #44c8f5;
    width: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
}

HTML

<div id="menu">
    <ul>
        list items with <a href>'s
    </ul>
    <div id="underliner"></div>
</div>

编辑:我尝试将它与您的代码合并，但由于您没有包含 html，我不得不猜测您的“导航栏”是如何布局的。无论如何，试试这个 fiddle :http://jsfiddle.net/c_kick/DuWcz/