JSFiddle - React, Tailwind, and code Playground

by joshpauljohnson

HTML

<ul class="parent">
</ul>

<p class="output">
</p>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.parent {
    height: 35px;
    left: 0;
    position: absolute;
    top: 0;
    width: 550px;
}

li > a {
    display: block;
    padding: 5px;
}

li > a.selected {
    background-color: lightgreen;
}

li > a.selected:hover {
    background-color: #C0FFBF;
}

ul.parent > li {
    float: left;
}

ul.parent > li > a {
    border-left: 1px solid #cccccc;
}

li > a:hover {
    background-color: #cccccc;
}

li.has-children {
    position: relative;
}

li.has-children > a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

li.has-children > ul.children {
    display: none;
    left: 3px;
    overflow: hidden;
    position: absolute;
    top: 26px;
}

li.has-children:hover > ul.children {
    display: block;
}

ul.children > li > a {
    white-space: nowrap;
}

.output {
    clear: both;
    color: green;
    margin-top: 50px;
}

JavaScript

$(function() {
    
    // Setup tabs
    for (var i = 1; i < 21; i++) {
        var tabText = "Tab #"+i;
        if (i == 17) {
            tabText = "Long Tab Name to Ruin Your Day";
        }
        $("ul.parent").append('<li><a href="#">'+tabText+'</a></li>');
    }
    
    // Arbitrary actions on tabs. This is to test that events get carried to new tabs
    $("ul.parent > li > a").click(function(e) {
        e.preventDefault();
        if ($(this).find("ul.children").length == 0) {
            $("ul.parent a.selected").removeClass("selected");
            $(this).addClass("selected");
            $(".output").text("Clicked: " + $(this).text());
        }
    });
    
    var numTabs = $("ul.parent > li").length;
    var maxWidth = $("ul.parent").width(); // Upper limit
    var widthTally = 0;
    var moreEl = null;
    
    function addTabToEl(tab, el) {
        tab.click(function() {
            $(".has-children > a").addClass("selected").html("&#9662; "+tab.find("a").text());
        });
        tab.appendTo(el);
    }
    
    $("ul.parent > li").each(function(index) {
        
        // Width of element = width + margin + padding + border
        widthTally += $(this).width() +
            parseInt($(this).css("margin-left").replace("px", "")) +
            parseInt($(this).css("margin-right").replace("px", "")) +
            parseInt($(this).css("padding-left").replace("px", "")) +
            parseInt($(this).css("padding-right").replace("px", "")) +
            parseInt($(this).css("border-left-width").replace("px", "")) +
            parseInt($(this).css("border-right-width").replace("px", ""));
        
        if (widthTally > maxWidth) {
            if (!moreEl) {
                // TODO - "More" could take up more width than current tab, in which case
                // we need to loop back through elements and pick the one that will allow
                // us to modify the text without going over the width restriction.
                
     ...