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

Having trouble integrating Bootstrap with Fullpage.js

Jest: Issue with spyOn test failing despite async function being executed

Tips for setting up OpenLayers demonstrations on a personal server?

Storing a collection of items in an array using jQuery

Display a Google Map within a modal window following an Ajax request

Firestore query is returning empty results upon page initialization, but provides data upon subsequent re-renders in React Native

Deactivate collapsing of active element in Bootstrap 5 accordion without using jQuery

Transforming a string into a proc using Ruby and Rails

Optical Character Recognition (OCR) tool

How to Create a Bootstrap 4 Footer that is Perfectly Centered

Tips for stopping a page from reloading when a link is clicked

Troubleshooting: Font-Face Won't Load on Any Browser

javascript retrieving JSON data through an API request from a redirected URL

Utilize the power of XMLHttpRequest to fetch and load numerous audio files, seamlessly integrating them for playback through the Web Audio

Issue with Bootstrap flash alert CSS on mobile devices is not functioning properly

Automatically generating new lines of grid-template-columns with CSS grid

Is it possible to collapse and expand individual rows within the Material-UI DataGrid component?

What is the best strategy for positioning an anchor element within a list item using JSX or Bootstrap in a way that maximizes efficiency?

Handling a change event for a mat-datepicker in Angular 7 can be tricky, especially when its value is tied to an optional input parameter. Let's dive into how to

How can you automate clicking a button and then performing a specific action through code?