A jQuery plugin that slides out a div the color of the trigger element's left border.

colorSlide.js

(function( $ ){
    $.fn.colorSlide = function() {
        var trigger = $(this);
        var elWidth = trigger.outerWidth();
        var elHeight = trigger.outerHeight();
        var elPosition = trigger.offset();
        var elColor = trigger.css('border-left-color');

        trigger.find('a').css({
            'position': 'relative',
            'z-index': 51
        });

        var colorSlider = $('<div class="color-slider"></div>');
        colorSlider.css({
            'background': elColor,
            'width': 0,
            'position': 'absolute',
            'z-index': 50
        }).offset(elPosition).appendTo(trigger);

        trigger.on('mouseenter mouseleave', function(e) {

            if (e.type === 'mouseenter') {
                colorSlider.css({ 'width': elWidth, 'height': elHeight });
            } else if (e.type === 'mouseleave') {
                colorSlider.css('width', 0);
            }
        });
    };
})( jQuery );