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