Question

我不确定从哪里开始，但我在jquery中完成了一个菜单。当您将鼠标悬停在右侧时，它会对文本执行一些淡入/淡出效果，并且手动操作链接。

我想添加一个简单的行，也许在css中完成？当你徘徊时，在每个物品下面移动一个项目，滑动到你悬停在上面的li，而不仅仅是出现。

我只是不知道从哪里开始这样的事情，因为在没有图像之前我从未真正做过（最好）。当你用鼠标离开div时，它需要从某个地方开始并独自移动ul并停在任何地方，并且当你点击链接时我想继续它。我不是要求任何人为我做这件事（除非你是这样想的），只是为了指出正确的方向。我已经看到了一些带有菜单的免费代码，并尝试使用它们，或者模仿它们，但它不能用于我的菜单。

Fiddle

Answer 1

我刚刚做过这个，也许这就是你需要的。它将计算您悬停的锚元素的宽度，并将下划线元素（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（更改高度和bg颜色，看起来合适）

#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，我不得不猜测您的'navibar'是如何布局的。无论如何，试试这个小提琴：http://jsfiddle.net/c_kick/DuWcz/

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

1 个答案: