CODEWITHSUNDEEP
javascriptjquerycssnavigationjquery-animate
user1461645
user1461645

Reputation: 83

How to create a sliding animation on menu hover with jQuery?

I've seen this on plenty of websites but I'm not sure if I'll be able to explain it.

Sometimes there are sliding elements in navigation, just like arrow under menu items that is sliding when user hovers over different menu links etc.

Here's a simple menu:

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link number 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link something 4</a></li>
    <li><a href="#">Link 5</a></li>
</ul>

And some jQuery (I know I'll be able to get the same effect with simple css :hover):

jQuery('ul li a').hover(function() {
    jQuery('a').removeClass('active');
    jQuery(this).addClass('active');
});

Also, working jsfiddle:

http://jsfiddle.net/8EvhK/

Buttons background becomes red on hover. I want this background to slide and transform (width) between these buttons as I hover.

How to do something like that? I've been looking for tutorials, but no luck.

Thanks a lot!

Upvotes: 8

Views: 12588

Answers (2)

MaJac89
MaJac89

Reputation: 151

You can achieve this effect with CSS transitions:

ul li {
    display:block;
    padding: 5px 15px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    width:50%;
    -moz-transition: width 1s; /* Firefox 4 */
    -webkit-transition: width 1s; /* Safari and Chrome */
    -o-transition: width 1s; /* Opera */
}

ul li:hover{
    width:100%;
}

Here is an example.

Upvotes: -1

danijar
danijar

Reputation: 34235

  1. Add an element to the menu using jquery's append.

    $('ul').append('<div id="slider"></div>');

  2. On hover of any menu item, animate this new element to the horizontal position and width of the menu item which fired the event.

    $('ul li a').hover(function(){

    var left = $(this).parent().position().left;
    var width = $(this).width();

    $('#slider').stop().animate({
        'left' : left,
        'width' : width
    });
});

  3. Reset the slider to its initially state.

    var left = $('ul li:first-child a').parent().position().left;
var width = $('ul li:first-child a').width();
$('#slider').css({'left' : left, 'width' : width});

  4. Add some CSS.

    #slider {
    position:absolute;
    top: -5px;
    left: 0;
    height: 100%;
    width: 0;
    padding: 5px 15px;
    background-color: #f00;
    z-index:-1;
}

Here is a working fiddle: http://jsfiddle.net/5wPQa/2/

Upvotes: 15

Related Questions