0
我想讓我的主菜單根據它們的總數動態調整li元素的填充,並使其響應頁面寬度更改。jQuery - 調整菜單元素的填充以適應頁面寬度
我寫了這個jQuery腳本,它工作到一個點改變瀏覽器的窗口寬度(較小),但它停止工作時,我調整回大屏幕。 畢竟,有關更高效的方式來實現或改善腳本的性能的任何其他建議,我們感激。
腳本:
var menuItems = $(".main-navigation ul.menu > li > a");
function sizeThePads() {
var menuItemsCount = menuItems.length;
var navWidth = $(".main-navigation").width();
var totalWidth = 0;
menuItems.each(function(){
totalWidth = totalWidth + $(this).width();
});
var remainingWidth = (navWidth - totalWidth) -30;
var aPadding = Math.floor((remainingWidth/menuItemsCount)/2);
menuItems.each(function(){
menuItems.css({'padding-right':aPadding,'padding-left':aPadding});
});
}
var headerWidth = $(".header").width();
if (headerWidth > 724) {
sizeThePads();
}
$(window).resize(function() {
var newSize = $(".header").width();
if (newSize != headerWidth) {
if (newSize < 724) {
menuItems.css({'padding-right':'','padding-left':''});
}
if (newSize > 724) {
sizeThePads();
}
}
});
而且我的html:
<nav class="navigation main-navigation" role="navigation">
<ul class="nav menu">
<li class="menu-item"><a href="#" style="">Home</a></li>
<li class="menu-item"><a href="#" style="">About Us</a></li>
<li class="menu-item"><a href="#" style="">Jobs</a></li>
<li class="menu-item"><a href="#" style="">Services</a></li>
<li class="menu-item"><a href="#" style="">Blog</a></li>
<li class="menu-item"><a href="#" style="">Contact</a></li>
</ul>
</nav>