Question

I would like to use the magic line effect seen here on the navigation for my website. The only problem is I have a vertical nav and this tutorial only explains how to use the magic line on a horizontal nav.

My question (or questions) is:

(1) can the magic line work vertically instead of horzionatally?
(2) how would that be accomplished?
(3) if it can’t be done is there any other way a similar effect can be achieved, specifically for a vertical nav?

Thanks in advance for any help!

Answer 1

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();
});​