JSFiddle - React, Tailwind, and code Playground

by danielugalde

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="contieneMenu">
    <ul>
        <li><a href="#">Caja</a></li>
        <li><a href="#">Caja</a></li>
        <li><a href="#">Caja</a></li>
        <li><a href="#">Caja</a></li>
        <li><a href="#">Caja</a></li>
        <li><a href="#">Caja</a>
            <ul>
                <li><a href="#">Caja</a></li>
                <li><a href="#">Caja</a></li>
                <li><a href="#">Caja</a></li>
                <li><a href="#">Caja</a></li>
                <li><a href="#">Caja</a></li>
                <li><a href="#">Caja</a></li>
                <li><a href="#">Caja</a></li>
                <li><a href="#">Caja</a></li>
                <li><a href="#">Caja</a></li>
                <li><a href="#">Caja</a></li>
                <li><a href="#">Caja</a></li>
            </ul>
        </li>
        <li><a href="#">Caja</a></li>
        <li><a href="#">Caja</a></li>
        <li><a href="#">Caja</a></li>
        <li><a href="#">Caja</a></li>
        <li><a href="#">Caja</a></li>
    </ul>
</div>

<div id="debug"><b></b></div>

CSS

#contieneMenu{
    display:block;
    width: 100%;
    min-height:50px;
    background:#eee;
    float:left;
    display:block;
}
#contieneMenu > ul{
    list-style:none;
    padding:0;
    margin:0;
}
#contieneMenu > ul li{
    display:block;
    float:left;
    background:red;
}

JavaScript

$(document).ready(function(){
    
    

    
    
    
    var anchoContenedor = $('#contieneMenu').outerWidth();
    var contarhijos     = $('#contieneMenu > ul > li').length;
    var elemento        = $('#contieneMenu > ul > li'); 
    var result          = (anchoContenedor / contarhijos).toFixed(2);

     
        
    elemento.css({"width": result});
    //alert('cada caje mide'+ result);    
    $("#debug b").text( "Contiene " + contarhijos + " Cajas." +  "con menu");
        
  
    
    
    $( window ).resize(function() {
        var anchoContenedor = $('#contieneMenu').outerWidth();
        var contarhijos     = $('#contieneMenu > ul > li').length;
        var elemento        = $('#contieneMenu > ul > li'); 
        var result          = (anchoContenedor / contarhijos).toFixed(2);
    
         
            
        elemento.css({"width": result});
        //alert('cada caje mide'+ result);    
        $("#debug b").text( "Contiene " + contarhijos + " Cajas." +  "con menu");
   });

});