Guide to making a sliding animation appear when hovering over a menu using jQuery

Question

Guide to making a sliding animation appear when hovering over a menu using jQuery

I have noticed a common feature on many websites, but I am unsure of how to explain it.

At times, there are sliding elements in the navigation, like an arrow under menu items that moves when the user hovers over different links.

Here is an example of 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>

Along with some jQuery (though achieving the same effect with simple CSS :hover is possible):

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

There is also a working jsfiddle provided:

http://jsfiddle.net/8EvhK/

Currently, the background color changes to red on hover. I would like this background to smoothly slide and transform (width) between these buttons as I hover.

How can I achieve something like this? I have searched for tutorials without luck.

Thank you!

javascript jquery css navigation jquery-animate

Answer 1

Answer №1

Use jquery's append function to add a new element to the menu.
```
$('ul').append('<div id="slider"></div>');
```

When any menu item is hovered over, use the animate function to move and resize the new element to match the selected menu item.

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

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

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

Reset the slider back to its original 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});

Add some CSS styling for the slider.

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

Check out the demonstration on this live fiddle: http://jsfiddle.net/5wPQa/2/

Answer 2

Use jquery's append function to add a new element to the menu.
```
$('ul').append('<div id="slider"></div>');
```

When any menu item is hovered over, use the animate function to move and resize the new element to match the selected menu item.

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

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

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

Reset the slider back to its original 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});

Add some CSS styling for the slider.

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

Check out the demonstration on this live fiddle: http://jsfiddle.net/5wPQa/2/

Answer 3

Answer №2

To create this type of animation, you can utilize 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%;
}

Take a look at this example.

Answer 4

To create this type of animation, you can utilize 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%;
}

Take a look at this example.

Guide to making a sliding animation appear when hovering over a menu using jQuery

Answer №1

Answer №2

Similar questions

Troubleshooting Cordova's ng-route functionality issue

Choose an identifier from a CSS class

Retrieve the image by its unique identifier while viewing a preview of the image before it is uploaded

Expanding content will not cause Flexbox to stretch

Place a div element immediately following a table row in the HTML document

Creating a flexible route path with additional query parameters

Issues with JSON data not functioning properly when using file system in JavaScript

Vercel deployment issue: Hidden input values not being detected as expected

jQuery form validation with delay in error prompts

Exploring the ins and outs of flexbox and utilizing overflow:auto

When using React-hook-form, you need to tap twice to delete the last character in the input field, and double tap to enter the first

What is the best way to position images and URLs in div elements using CSS?

What strategies should be employed to manage data-driven input in this particular scenario?

What could be causing the span tag to not have CSS applied and the background image to not be displaying

What is the best way to create a slideshow using an IFrame?

Basic image scrolling gallery implemented using jQuery - without the need for any external plugins

Unable to set up npm for node-resemble on macOS

Error Encountered - Node.js application experiencing issues in passport login functionality

Using z-index to position a paragraph element behind other elements in a webpage

Extract keys from the string