vertical magic line nav

Found on http://stackoverflow.com/questions/13224217/can-the-jquery-magicline-navigation-work-vertically Fork of http://jsfiddle.net/3eTwQ/

by gebeer

HTML

<ul>
    <li> Here </li>
    <li> Here </li>
    <li> Here </li>
</ul>

CSS

body{
   position:relative;   
}ul{
    width:100%; 
    margin-top:50px;
}
li{
    padding:3px 0
    margin:10px;
    width: 100%;
    border: 1px solid #eee;
    text-align: center;
}
.vLine{
    background: red;
}

JavaScript

/**
 * 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:6px;" class="vLine"></div>'));                            
                    //do we want to show it on the left or right?
                    if(settings.side = 'right'){
                        $('.vLine').css('right', '50%');
                    }else if(settings.side = 'left'){
                        $('.vLine').css('left',...