Как делается такая менюшка как вконтакте

#html #javascript #css

Вот тут сверху горизонтальная менюшка

Как она сделана что цвет текста при наползании слоя на слой меняется в том месте
где наползло, а где не наползло остается по старому

(анимация не интересует, интересует именно как это сделано, на основе чего css?)

Вот картинка, обведено красным



Вот так не должно быть

(тут смена цвета шрифта происходит только после анимации)


    

Ответы

Ответ 1

Да в общем ничего сложного. Если схеметически описать, то это примерно так:
$('selector').click(function(){
    $('blok_with_blue_bg').animate({
        left: position_of_active_element
    }, function(){
        // это callback-функция, которая выполняется после завершения анимации
        $('active_element').css('color','new_color');
    });
});

P.S. Чтоб было более понятно, я набросал вам простенький пример

UPD
Может не на все 100% так же, как на ВК, но на 95% так точно. Смотрите то, что получилось.
Сделал анимацию помедленней, чтоб вам опять не пришлось скрины делать ))