使用jQuery Mega Drop Down Menu Plugin時，是否有中心菜單？

Question

我在玩this jquery mega menu plugin，所有的例子都有從屏幕左側開始的菜單。

有沒有什麼辦法讓它居中，所以如果我有一個寬屏顯示器，它會水平顯示在中心。

Answer 1

通過編輯CSS，你可以restyle它在中間的「浮動」 。我在示例鏈接網站上使用螢火蟲測試了這個。我必須將width屬性從100%覆蓋爲固定寬度，然後添加margin: 0 auto。 auto是讓它能夠以流體設計爲中心的神奇功能。

#megaMenu { /* This is the ul tag the contains the mega menu */ 
    width: 600px; 
    margin: 0 auto; 
} 

如果你提供自己的標記示例實現這個設計，我們可以幫您量身定製多一點特別。看看jsfiddle

Answer 2

您可以將mega菜單設置爲使用全寬選項 - 下拉菜單部分將擴大菜單的整個寬度。

否則，子菜單的位置被計算基於父鏈接的位置和左側的可用寬度/右

Answer 3

這是你在找什麼？

http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu/menu.html

如果正確的話，你可以使用的onLoad參數，計算保證金，並設置當菜單完成初始化菜單CSS添加額外的代碼。你可以從演示源代碼的代碼，通過或下載工作樣例：

http://www.designchemical.com/lab/jquery-plugins/jquery-mega-drop-down-menu-centered.zip

Answer 4

有幾種解決方案，你可以讓達到你想要的效果。但是當你在這個問題的標籤中提到Jquery時，我會建議使用Jquery。 如果使用大型菜單插件這樣，例如

$('#mega-menu-1').dcMegaMenu({ 
     rowItems: '3', 
     speed: 0, 
     effect: 'slide', 
     event: 'click', 
     fullWidth: true 
    }); 

您可以在此行之後添加此Javascript居中您的菜單。

var sum=0; 
$('#mega-menu-1 li').each(function(){ sum += $(this).width(); }); 
$('#mega-menu-1 li:first').css("margin-left",($("#mega-menu-1").width()-sum)/2); 

這會計算li元素的寬度總和，然後將左邊距添加到您的第一個li元素。
如果在您的頁面中，您的li元素有一些邊框或填充，您可以使用Jquery的outerWidth()函數代替width()來計算該像素。
也感謝有趣的插件）

Answer 5

，以使其爲我工作，我有一個修改取自brombomb和查克·諾里斯兩個答案，並結合他們，如下圖所示，以避免兩個問題

：

1. 沒有必要再設置一個固定長度的CSS
2. 還與子菜單項

CSS：

#megaMenu { /* This is the ul tag the contains the mega menu */ 
    margin: 0 auto; 
} 

jQuery的使用子選擇來概括僅主菜單項和設置，那麼寬度：

var sum = 0; 
$('#megaMenu > li').each(function() { sum += $(this).width(); }); 
$('#megaMenu').css("width", sum);