I decided to throw something together for you. It's far from perfect, but it should get you going in the right direction. I've tried to provide decent documentation so you can take this plugin further. I didn't do too much thorough testing as time's tight. Hopefully this helps.
First, the link to the working jsFiddle
Now, the codes
/**
* You can target the .vLine class and change anything you want
* Core Propreties that should be left untouched are:
1. top value
3. position declaration
* Any other CSS properties should be changed to suit your style.
* In some cases, you may want to change the left / right values
* to fit the needs of the position of the vLine
* simply use $('.vLine').css('left/right', 'value');
*/
(function($){
//define methods of the plugin
var methods = {
init: function(options){
//set up some default values
var defaults = {
'side' : 'right'
}
//for each element with vLine applied
return this.each(function(){
//override defaults with user defined options
var settings = $.extend({}, defaults, options);
//cache variable for performance
var $this = $(this);
//wrap the UL with a positioned object just in case
$this.wrap('<div style="position:relative;width:'+$this.css('width')+';height:'+$this.css('height')+';"></div>');
//test to see if element exists, if not, append it
if(!$('.vLine').length){
//parent is the ul we wrapped
//insert the vLine element into the document
$this.parent().append($('<div style="position:absolute;top:'+$this.position().top+'px;height:'+$this.height() / $this.find('li').length+'px;width:3px;" class="vLine"></div>'));
//do we want to show it on the left or right?
if(settings.side = 'right'){
$('.vLine').css('right', '0');
}else if(settings.side = 'left'){
$('.vLine').css('left', '0');
}
}
//define the hover functions for each li
$this.find('li').hover(function(e){
$('.vLine').stop().animate({
top: $(this).position().top
},200);
}, function(e){
//we want to reset the line if this is met
if(['UL', 'LI'].indexOf(e.toElement.tagName) == -1){
$('.vLine').stop().animate({
top: '1px'
});
}
});
});
}
}
//make it a function!
$.fn.vLine = function( method ) {
if (methods[method]) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.vLine' );
}
};
})(jQuery);
//on document ready
$(function(){
//invoke our vLine!
$('ul').vLine();
});