jQuery MagicLine Navigation 可以垂直工作吗？

Question

我想在我的网站导航上使用看到here 的魔术线效果。唯一的问题是我有一个垂直导航，本教程只解释了如何在水平导航上使用魔术线。

我的问题是：
(1) 魔术线可以垂直工作而不是水平工作吗？
(2) 那将如何实现？
(3) 如果做不到，有没有其他方法可以达到类似的效果，特别是垂直导航？

提前感谢您的帮助！

Answer 1

我决定为你准备一些东西。它远非完美，但它应该让你朝着正确的方向前进。我试图提供体面的文档，以便您可以进一步使用此插件。由于时间紧迫，我没有做太多彻底的测试。希望这会有所帮助。

First, the link to the working jsFiddle

现在，代码

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