jQuery MagicLine导航能够垂直工作吗？

Question

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

我的问题是：
（1）魔术线可以垂直工作，而不是horzionatally？
（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(); 
});​