如何在jquery菜单中的li项下添加一行

How would I add a line under li items in my jquery menu?

本文关键字：添加 一行 li jquery 菜单      更新时间：2023-09-29

我真的不确定从哪里开始，但我在jquery中完成了一个菜单。当你现在把鼠标悬停在上面时，它会对文本产生一些淡入/淡出效果，并且链接是手动切换的。

我想添加一个简单的行，也许是用css完成的？当你悬停时，在每个li下面都有一个项目，滑动到你悬停的li，而不仅仅是出现。

我只是不知道从哪里开始这样的事情，因为我以前从来没有真正做到过没有图像（最好）。当你用鼠标离开div时，它需要从某个地方开始，单独移动ul，并在它所在的地方停止，我希望在你点击链接时保持它。不过，我并不是要求任何人为我做这件事（除非你喜欢），只是为了找到正确的方向。我看到一些菜单上的免费代码可以做到这一点，并试图使用它们，或者模仿它们，但它不适用于我的菜单。

Fiddle

我刚才做过，也许这正是您所需要的。它将计算您悬停的锚点元素的宽度，并将一个underliner元素（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>

edit：我试图将它与您的代码合并，但由于您没有包含html，我不得不猜测您的"导航栏"是如何布局的。无论如何，试试这个小提琴：http://jsfiddle.net/c_kick/DuWcz/

相关文章：