Home Home <...">
Clever Geek Handbook

Menu text move effect

My menu looks like this:

<nav>
    <a href="#">
        <span class="black">Home</span>
        <span class="red active">Home</span>
    </a>
    <a href="#">
        <span class="black">Longer menu item</span>
        <span class="red">Longer menu item</span>
    </a>
    <a href="#;">
        <span class="black">Two words</span>
        <span class="red">Two words</span>
    </a>
    <a href="#">
        <span class="black">About</span>
        <span class="red">About</span>
    </a>
    <a href="#">
        <span class="black">Contact</span>
        <span class="red">Contact</span>
    </a>
</nav>

The active menu item is red. When the user clicks on the link, the red color should go straight from the active menu item, and at the same time, the clicked link should light up red, starting from left to right.

Here's a fiddle to show you what I mean. Click the second link and then the third link to see the effect.

If you navigate from left to right, the clicked link is colored nicely, but the original red text moves to the right instead of just the color.

What should I do to restore this effect?
How can I make this effect work in the left direction?

Any suggestions are greatly appreciated.

Edit:
To clarify the situation: I would like this effect , but in text. If you move your mouse to the first line from left to right and back, you will see the effect. I want in click, not hover.

There are 2 cases:

  • on the right side of the active link a menu item is clicked → the color effect should go to the right.
  • on the left side of the active link a menu item is clicked -> the color effect should go to the left
+3


source to share


3 answers


Did you mean this: http://jsfiddle.net/t1w4gy0w/3/

Updated for both ways: http://jsfiddle.net/t1w4gy0w/4/

Small improvement if user clicks quickly: http://jsfiddle.net/t1w4gy0w/5/

$('.blackholder').parent().on('click', function(event) {

    if ($(this)[0] === $('.red.active').parent()[0]) {
        return;
    }

    var animFull = function (obj) {
        obj.addClass('top').finish()
        .css('width', '0').animate({ width: '100%'}, {
            duration: 1000,
            queue: false,
            complete: function () {
                $(this).removeClass('top');
            }
        });
    };

    var moveRight = function (atag) {
        animFull(
            $('.red.active').removeClass('active').siblings('.black')
        );

        animFull(
            $(atag).children('.red').addClass('active')
        );
    };

    var animZero = function (obj) {
        obj.addClass('top').finish()
        .animate({ width: '0'}, {
            duration: 1000, queue: false,
            complete: function () {
                $(this).removeClass('top').css('width', '100%'); 
            }
        });
    };

    var moveLeft = function (atag) {
        animZero(
            $('.red.active').removeClass('active')
        );

        $(atag).children('.red').addClass('active');
        animZero(
            $(atag).children('.black')
        );
    };

    if ($('.red.active').parent().position().left < $(this).position().left) {
        moveRight(this);
    } else {
        moveLeft(this);
    }

});

      

        
        
        
      

    


.blackholder {
    color: #000;
}
.black.top, .red.top {
    z-index: 3;
}
.black {
    z-index: 1;
    color: #000;
    left: 0;
    position: absolute;
}
.red {
    color: red;
    left: 0;
    position: absolute;
}
.red.active {
    z-index: 2;
}

      

        
        
        
      

    
<nav>
    <a href="javascript:void(0);">
        <span class="blackholder">Home</span>
        <span class="black">Home</span>
        <span class="red active">Home</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Longer menu item</span>
        <span class="black">Longer menu item</span>
        <span class="red">Longer menu item</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Two words</span>
        <span class="black">Two words</span>
        <span class="red">Two words</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">About</span>
        <span class="black">About</span>
        <span class="red">About</span>
    </a>
    <a href="javascript:void(0);">
        <span class="blackholder">Contact</span>
        <span class="black">Contact</span>
        <span class="red">Contact</span>
    </a>
</nav>

If you need any changes, like I'm adding comments to the code, feel free to comment.

+3


source


This is what you are looking for, red to black and black to red http://jsfiddle.net/t1w4gy0w/2/

$('.black').on('click', function (event) {
    $('.red').animate({
        width: 0
    }, {
        duration: 1000,
        queue: false
    }).removeClass('active');
    $(this).parent().find('.red').addClass('active').animate({
        width: '100%'
    }, {
        duration: 1000,
        queue: false
    });
});


And change the CSS

.red {
    top: 0;
    right: auto;
    left: 0;
    width: 0;
    color: red;
    display: none;
    position: absolute;
    z-index: 5;
    overflow: hidden;
}
.red.active {
    left: 0;
    right: auto;
    display: block;
    width: 100%;
}
+1


source


Can

$('.black').on('click', function(event) {
    $('.red').css({'width': 0}).removeClass('active');
    $(this).siblings('.red').addClass('active').animate({ width: '100%'}, {
        duration: 1000,
        queue: false
    });
});

If you want your color to slide to the left, try fixing to the .red

left, it looks like width = 0 goes to the right corner

0


source






More articles:


All Articles