0

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

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

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

小提琴

4

1 回答 1

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（根据您的需要更改高度和背景颜色）

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

于 2012-07-16T06:07:24.503 回答