我在玩this jquery mega menu plugin,所有的例子都有從屏幕左側開始的菜單。使用jQuery Mega Drop Down Menu Plugin時,是否有中心菜單?
有沒有什麼辦法讓它居中,所以如果我有一個寬屏顯示器,它會水平顯示在中心。
我在玩this jquery mega menu plugin,所有的例子都有從屏幕左側開始的菜單。使用jQuery Mega Drop Down Menu Plugin時,是否有中心菜單?
有沒有什麼辦法讓它居中,所以如果我有一個寬屏顯示器,它會水平顯示在中心。
通過編輯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
這是你在找什麼?
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
有幾種解決方案,你可以讓達到你想要的效果。但是當你在這個問題的標籤中提到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()
來計算該像素。
也感謝有趣的插件)
:
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);
這裏的問題是擺脫左右菜單背景。我仍然希望菜單背景佔用全部寬度,但只有中心按鈕 – leora 2012-02-22 02:36:02
您可以將'megamenu'包裝在'div'中,然後將相同樣式的背景應用於該div。然後將該div伸展到'width:100%' – Brombomb 2012-02-22 04:12:50
感謝您的建議。 。這似乎是伎倆 – leora 2012-02-22 18:32:25