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

Question

I'm not really sure where to start on this, but I have a menu done in jquery. When you hover over right now, it does some fade in/out effects to the text, and links are manually handeled.

I wanted to add a simple line, maybe done in css? to go under each li a item when you are hovering as well, sliding to the li you hover over, not just appearing.

I just have no idea where to start with something like that, as I've never really done it before without an image (preferrably). It would of coarse need to start somewhere and move alone the ul and stop wherever it is when you leave the div with your mouse, and I'd like to keep it on when you click a link. I'm not asking anyone to make this for me though (unless you feel like it), just to get pointed on the right direction. I've seen some free codes with menus that do this, and attempted to use them, or model off them, but it woulnd't work with my menu.

Fiddle

Answer 1

I did this a while ago, maybe it is what you need. It will calculate the width of the anchor element you are hovering and grow an underliner element (a div) to both its width and position

//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 for the underline-element (change height and bg color as you seem fit)

#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 : I tried merging it with your code, but as you did not include the html, I had to guess how your 'navibar' was laid out. Anyway, try this fiddle: http://jsfiddle.net/c_kick/DuWcz/