jquery/js gliding/sliding navigation item effect

Question

I'm trying to decipher effects like the one seen on http://www.htmldrive.net/items/demo/71/Dynamic-navigation-menu-with-scrolling-color-glide-followed-with-jQuery but I'm not very familiar with jquery/js (unless the code is all spelled out for me)

I haven't been able to find many other examples of this menu effect (I'm probably using the wrong keywords).

Can anyone help me figure out how these are generally created? I'd like to do so on my site (though with a thick underline instead of highlight). Thanks!

edit- I realize I can just use one of these plugins, but I'd really like to understand what's going on/do my own

Answer 1

If you look at the demo's ( taken out of the iframe ), you'll see the demo's JavaScript here , accompanied by some CSS here . It looks simple enough.

The "background" is a separate element in the HTML of the menu:

<div class="webwidget_menu_glide_sprite"></div>

The sprite and the menu's <ul> are both absolutely positioned. The <ul> is styled to be above the sprite, and the sprite is animated in response to hover events on the <li> 's in the menu.

---

Update:

To calculate and perform the animation, you have three basic steps:

• Listen to hover events on the <li> s;
• Find the width and position of the "glide" element, based on the item which triggered the hover effect;
• Animate to said width and position.

In its most basic form, this looks somewhat like this:

/* 1. Attach the event handler: */
$('#menu li').on('hover', function() {
    /* 2. Find the position and width: */
    var newPosition = $(this).position();
    var newWidth = $(this).outerWidth(true);
    /* 3. Animate: */
    $('#menu .glide').stop().animate({
        'left': newPosition.left,
        'width': newWidth
    });
});

I've put a more complete example online here: http://jsbin.com/unuyov .

Answer 2

Here is a general overview of how you can create a similar effect:

Create a menu, each menu item is in an individual div. The underline can be an image, absolutely positioned below the first menu item. Each item in the menu has an onmouseover function. That function will change the underline's position (left or right), one pixel at a time. To get it to have a cool slide effect that speeds up or down as it moves, I would recommend using a built-in plugin.

so the menu items would look something like this:

<div id="menuitem2" onmouseover="movesliderto('45');">

The script would be something like this:

var currentpos= '0'; //initial position

function movesliderto(newposition){
  if (currentpos<newposition){ //moving the slider to the right
   for (var i=currentpos; i<newposition; i++) {
    document.getElementById('underline').style.left += 1;
 } else { //moving the slider to the left
   for (var i=newposition; i<currentpos; i++) {
    document.getElementById('underline').style.left -= 1;
 }
}

and of course, you would want each iteration of the foreach to take a couple of milliseconds, so you would want to put it in a timed function.