JQuery菜單浮動和顯示子菜單頁

Question

這是我第一次在我的任何項目中使用JQuery。

我已經實現了superfish菜單。

在我的一些頁面上，我有一個水平滾動。當頁面滾動時，我想使菜單浮動在頁面的中心。

此外，我需要確保菜單最右側的子菜單不打開頁面。當我將鼠標懸停在最右側的元素上時，它會在頁面上打開一半。

關於如何解決這兩件事的任何想法？

我非常願意使用不同的jQuery的菜單，如果有更好的一個具有這些功能內置...

謝謝！

javascrupt呼叫我的網頁：

$(document).ready(function() { 
     $("ul.sf-menu").supersubs({ 
      minWidth: 12, // minimum width of sub-menus in em units 
      maxWidth: 27, // maximum width of sub-menus in em units 
      extraWidth: 1  // extra width can ensure lines don't sometimes turn over 
      // due to slight rounding differences and font-family 
     }).superfish({ animation: { opacity: 'show', height: 'show' }, autoArrows: false }); // call supersubs first, then superfish, so that subs are 
     // not display:none when measuring. Call before initialising 
     // containing tabs for same reason. 

我可以張貼任何需要更多的代碼，但有相當多的代碼在快魚文件，所以我不知道我應該張貼的內容。

我發現這個腳本，它運作良好，但是當我向右滾動水平菜單開始堆疊，所以菜單項是並排而不是垂直。我想修改此保持菜單臥式...

<script type="text/javascript"><!-- 
      var floatingMenuId = 'floatdiv'; 
      var floatingMenu = 

{ targetX：-1000， targetY：10，

hasInner: typeof (window.innerWidth) == 'number', 
hasElement: document.documentElement 
    && document.documentElement.clientWidth, 

menu: 
    document.getElementById 
    ? document.getElementById(floatingMenuId) 
    : document.all 
     ? document.all[floatingMenuId] 
     : document.layers[floatingMenuId] 

};

  floatingMenu.move = function() { 
       if (document.layers) { 
        floatingMenu.menu.left = floatingMenu.nextX; 
        floatingMenu.menu.top = floatingMenu.nextY; 
       } 
       else { 
        floatingMenu.menu.style.left = floatingMenu.nextX + 'px'; 
        floatingMenu.menu.style.top = floatingMenu.nextY + 'px'; 
       } 
      } 

      floatingMenu.computeShifts = function() { 
       var de = document.documentElement; 

       floatingMenu.shiftX = 
    floatingMenu.hasInner 
    ? pageXOffset 
    : floatingMenu.hasElement 
     ? de.scrollLeft 
     : document.body.scrollLeft; 
       if (floatingMenu.targetX < 0) { 
        if (floatingMenu.hasElement && floatingMenu.hasInner) { 
         // Handle Opera 8 problems  
         floatingMenu.shiftX += 
      de.clientWidth > window.innerWidth 
      ? window.innerWidth 
      : de.clientWidth 
        } 
        else { 
         floatingMenu.shiftX += 
      floatingMenu.hasElement 
      ? de.clientWidth 
      : floatingMenu.hasInner 
       ? window.innerWidth 
       : document.body.clientWidth; 
        } 
       } 

       floatingMenu.shiftY = 
    floatingMenu.hasInner 
    ? pageYOffset 
    : floatingMenu.hasElement 
     ? de.scrollTop 
     : document.body.scrollTop; 
       if (floatingMenu.targetY < 0) { 
        if (floatingMenu.hasElement && floatingMenu.hasInner) { 
         // Handle Opera 8 problems  
         floatingMenu.shiftY += 
      de.clientHeight > window.innerHeight 
      ? window.innerHeight 
      : de.clientHeight 
        } 
        else { 
         floatingMenu.shiftY += 
      floatingMenu.hasElement 
      ? document.documentElement.clientHeight 
      : floatingMenu.hasInner 
       ? window.innerHeight 
       : document.body.clientHeight; 
        } 
       } 
      } 

      floatingMenu.doFloat = function() { 
       var stepX, stepY; 

       floatingMenu.computeShifts(); 

       stepX = (floatingMenu.shiftX + 
    floatingMenu.targetX - floatingMenu.nextX) * .07; 
       if (Math.abs(stepX) < .5) { 
        stepX = floatingMenu.shiftX + 
     floatingMenu.targetX - floatingMenu.nextX; 
       } 

       stepY = (floatingMenu.shiftY + 
    floatingMenu.targetY - floatingMenu.nextY) * .07; 
       if (Math.abs(stepY) < .5) { 
        stepY = floatingMenu.shiftY + 
     floatingMenu.targetY - floatingMenu.nextY; 
       } 

       if (Math.abs(stepX) > 0 || 
    Math.abs(stepY) > 0) { 
        floatingMenu.nextX += stepX; 
        floatingMenu.nextY += stepY; 
        floatingMenu.move(); 
       } 

       setTimeout('floatingMenu.doFloat()', 20); 
      }; 

      // addEvent designed by Aaron Moore  
      floatingMenu.addEvent = function (element, listener, handler) { 
       if (typeof element[listener] != 'function' || 
    typeof element[listener + '_num'] == 'undefined') { 
        element[listener + '_num'] = 0; 
        if (typeof element[listener] == 'function') { 
         element[listener + 0] = element[listener]; 
         element[listener + '_num']++; 
        } 
        element[listener] = function (e) { 
         var r = true; 
         e = (e) ? e : window.event; 
         for (var i = element[listener + '_num'] - 1; i >= 0; i--) { 
          if (element[listener + i](e) == false) 
           r = false; 
         } 
         return r; 
        } 
       } 

       //if handler is not already stored, assign it  
       for (var i = 0; i < element[listener + '_num']; i++) 
        if (element[listener + i] == handler) 
         return; 
       element[listener + element[listener + '_num']] = handler; 
       element[listener + '_num']++; 
      }; 

      floatingMenu.init = function() { 
       floatingMenu.initSecondary(); 
       floatingMenu.doFloat(); 
      }; 

      // Some browsers init scrollbars only after  
      // full document load.  
      floatingMenu.initSecondary = function() { 
       floatingMenu.computeShifts(); 
       floatingMenu.nextX = floatingMenu.shiftX + 
    floatingMenu.targetX; 
       floatingMenu.nextY = floatingMenu.shiftY + 
    floatingMenu.targetY; 
       floatingMenu.move(); 
      } 

      if (document.layers) 
       floatingMenu.addEvent(window, 'onload', floatingMenu.init); 
      else { 
       floatingMenu.init(); 
       floatingMenu.addEvent(window, 'onload', 
    floatingMenu.initSecondary); 
      }  

    </script> 

Answer 1

我不知道你指的是如何爲中心，但如果你的意思是水平居中：

你能分開的主網頁（即橫向溢出）和菜單到單獨的div的？例如

<div id="menu"><center><ul class="sf-menu">...</ul></center></div> 
<div id="mainpage" style="overflow:auto;">Contents goes here</div> 

（在<center>標籤可能是<div style="width:X;margin:0 auto;">取決於如何快魚作品）

在菜單會在頁面上，抱歉，我不得不推遲到更多的人到可知回答。