JSFiddle - React, Tailwind, and code Playground

by pxfunc

HTML

<ul id="nav">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Menu 7</a></li>
    <li><a href="#">Menu 8</a></li>
    <li><a href="#">Menu 9</a></li>
    <li class="last"><a href="#">Menu 10</a></li>
</ul>

<button id="add">Add Menu Item</button>
<button id="remove">Remove Menu Item</button>

CSS

#nav {padding:20px;background:#eee;overflow:hidden;}
#nav li {list-style-type:none;float:left;margin-right:20px;padding:5px;border:solid 1px #ddd;white-space:nowrap}
#nav .last {margin-right:0;}

JavaScript

// variable nav buttons - evenly spaced

var $nav = $('#nav');

var formatNav = function() {
    var menuItemCount = $nav.children().length,
        menuItemOuterWidth = $nav.children().outerWidth(true), // border + padding + margin + base width of the menu item
        menuItemWidth = $nav.children().width(), // base width
        menuItemDiff = menuItemOuterWidth - menuItemWidth, // border + padding + margin only for the menuItem
        navWidth = $nav.width();
    $nav.children().width(Math.round(navWidth / menuItemCount) - menuItemDiff);
};

formatNav();

// Handle window resizing
$(window).resize(function() {
    formatNav();
});

// test with adding/removing menu items
$('button').click(function() {
    $('.last').removeClass('last');
    switch(this.id) {
        case "add":
            $nav.append('<li><a href="#">Menu ' + ($nav.children().length + 1) + '</a></li>');
            break;
        case "remove":
            $nav.children().last().remove();
            break;
    }
    $nav.children().last().addClass('last');
    formatNav();
});