Is it possible to use Javascript to dynamically adjust the size of each <li> element within the menuArea so that they fill the entire space correctly?
// Could we achieve this with the following code...
var menuSpace = Math.floor((menuAreaWidth - menuButtonsTotalWidth) / (menuButtons.length - 1));
// set positions
var menuButtonsLeft = 0;
$('#menuArea .menuButtonHolder').each(function(i, buttonHolder) {
if (i < (menuButtons.length - 1)) {
$(buttonHolder).css({
'left': menuButtonsLeft + 'px',
'width': menuButtons[i].buttonWidth + 'px'
});
}ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#menuArea {
max-width: 1050px;
margin: 0px auto;
}
li {
float: left;
}
li .menuButtonHolder {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuArea">
<ul>
<li><a href="/">Home</a></li>
<li><a href="news.aspx">News and Events</a></li>
<li><a href="social.aspx">Social</a></li>
<li><a href="blog.aspx">Our Blog</a></li>
<li><a href="contact.aspx">Contact</a></li>
<ul>
</div>Instead of manually adjusting padding values, could we use scripting to handle the resizing of the menu elements to fit the menuArea?