如何調整水平菜單的方式？

我在我的代碼中有7個菜單。有時它可能是基於usertype的6。如果管理員輸入它將是7.用戶可能只有6個菜單。如何動態調整菜單大小。對於我使用的代碼如何調整水平菜單的方式？

<div id="menu"> 
<ul> 
<li><a href="#">home1</a></li> 
<li><a href="#">home2</a></li> 
<li><a href="#">home3</a></li> 
<li><a href="#">home4</a></li> 
<li><a href="#">home5</a></li> 
<li><a href="#">home6</a></li> 
<li><a href="#">home7</a></li> 
</ul> 
</div>

我該如何做到這一點與jQuery的？

編輯

$(document).ready(function() { 
    if ($('#menu ul li').length > 6) { 
     $('#menu ul li').css('width','14.5%'); 
    } 
    else 
    { 
     $('#menu ul li').css('width','16.6%'); 
    } 
}); 
    } 
});

來源

2013-05-21 Niths

要清楚：你希望上面出現在一行佔用全寬？ – hexblot

我們需要看你的CSS，這取決於它的風格，它會調整大小，而不需要jquery。 – dezman

另一種方法是將菜單置於自動保證金的中間位置。但是，如果你真的需要調整菜單的大小，那麼使用Jquery，這很簡單。首先，爲你的li創建兩個不同寬度的不同寬度的類。 class1：.li_7 class2：.li_6 然後，您將不得不計算菜單中的li的數量。如果你有6個li，添加class li_6 else li_7 然後， – Romain

假定期望的結果是上面的菜單來在一行中呈現，無論項目的確切人數 -

最好的方式做到這一點會與表一起使用，因爲它們對於這種類型的東西具有原生行爲（佔用很長的一行並在其上均勻分配項目）。好消息是，我們可以很容易地使用僞造

#menu { display: table; width: 100%; } 
#menu ul { display: table-row; } 
#menu ul li { display: table-cell; }

這將在很長的線自動分發您<li> S，使用容器寬度的行爲。

您還可以看到一個jsFiddle與上述示例。

來源

2013-05-21 15:56:14 hexblot

好的答案，但不要說「與表」，因爲這給出了錯誤的想法。這個答案不使用表格，而是CSS'display：table'，這是非常不同的，並且更合適。 :-) –

如果我有6 menu.is它採取全寬？ – Niths

是的。試試上面的代碼吧。 –

假設hexblot的答案不是你想要的，並且你希望在整個容器元素的寬度上分佈變化寬度的LI，而LI不一定佔據導航欄的全角，那麼使用這個：

http://jsfiddle.net/sxGMZ/

#menu ul { 
    display: block; 
    text-align: center; 
    width: 100%; 
    background: brown; 
} 

#menu ul li { 
    display: inline-block; 
    height: 30px; 
    padding: 10px 12px 0 12px; 
    background: #ccc; 
}

來源

2013-05-21 15:59:48 Michael

代替表格單元使用顯示內聯塊：

#menu { display: inline-block;background:#000; } 
#menu ul { display: inline-block; margin:0;padding: 0; } 
#menu ul li { display: inline-block; margin:0; padding: 0;} 
#menu ul li a { display: inline-block; padding: 10px; color: #fff;} 
#menu ul li a:hover { color: #ff0;}

小提琴這裏：http://jsfiddle.net/BtvY9/

來源

2013-05-21 16:00:38

http://jsfiddle.net/BtvY9/1/ 添加一個比李的寬度更大的寬度，然後如果hexblot正確地解釋了這個問題，這會突然中斷。 – Michael

這種方法將所有的菜單項保留在左邊，而不是像我的答案那樣均勻地分配它們。您可以輕鬆使用哪個更適合作爲行爲。 – hexblot

我想檢查jquery中的菜單。如果它有6個menus.It必須採取全寬 – Niths

如何調整水平菜單的方式？

回答

相關問題