CODEWITHSUNDEEP
jquerycsstwitter-bootstrapanimationtransition
Danilo Bargen
Danilo Bargen

Reputation: 19452

Bootstrap / jQuery: Slide "active" state in navbar

In the Bootstrap 3 navbar, you can mark an element as active:

enter image description here

With jQuery I can create a simple function to "switch" the active state from one to another element on click.

$('li').click(function() {
    if ( ! $(this).hasClass('active')) {
        $('li.active').removeClass('active');
        $(this).addClass('active');
        // Do more stuff here
    }
});

Full example: http://jsfiddle.net/zEh3h/2/

Now what I'd like to achieve is a "slide" effect of the dark grey background from one element to another on click. It should also work in the responsive vertical mode.

Is there a bootstrap-native way to achieve this? Or maybe a jQuery workaround? I could not find anything about this in the docs.

Upvotes: 1

Views: 1701

Answers (1)

schauboga
schauboga

Reputation: 142

Maybe something like that:

$('li').click(function() {
    if ( ! $(this).hasClass('active')) {
        $('li.active').removeClass('active');
        $(this).addClass('active');
        offsetTop = $(this).offset().top - $('.nav').offset().top;
        offsetLeft = $(this).offset().left - $('.nav').offset().left;
        $('.nav-background').animate({
            top: offsetTop,
            left: offsetLeft,
            right: $('.nav').width() - $(this).width() - offsetLeft,
            bottom: $('.nav').height() - $(this).height() - offsetTop 
        }, 'slow', 'linear');
    }
});

You still need to update the position of the background when the view changes from responsive vertical mode or back.

jsFiddle: Example

Upvotes: 4

Related Questions