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