JSFiddle - React, Tailwind, and code Playground

by rarteaga

HTML

<ul id="indicadores">
    <li class="Zonas tamanio">
        <div class="sub_menu codigo_zona">
            <h1 class="">Todas las Bodegas</h1>
            <ul class="lista_bodegas" style="height: 0px;">
                <li>Todas las Bodegas</li>
            </ul>
        </div>
        <h2 class="">45 Bodegas</h2>
    </li>
</ul>

CSS

#contenedor-indicadores {
    left: -3px;
    position: relative;
}
#indicadores {
    background: none repeat scroll 0 0 #FFFFFF;
    /*border-bottom: 1px solid #E6E6E6;*/
    height: 68px;
    margin: 0 auto;
    min-width: 1200px;
    width: 1200px;
}
#indicadores > li {
    float: left;
    height: 66px;
    list-style: none outside none;
    padding: 0 25px 0 60px;
}
#indicadores > li:hover {
    cursor: pointer;
}
#indicadores > li.tamanio {
    width: 145px;
}
#indicadores > li > div.sub_menu {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #FFFFFF;
    color: #373730;
    font: 100 16px SER;
    margin-top: 10px;
    padding: 0 5px 0 0;
    position: relative;
    width: 143px;
    z-index: 3;
}
#indicadores > li > div.sub_menu.clicked {
    border: 1px solid #F2F2F2;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    color: #00ACEC;
    padding-bottom: 10px;
    width: 143px;
}
#indicadores > li > div.sub_menu > h1 {
    background: url("/Images/Icons/POC/ICN_arrow_down_01.png") no-repeat scroll 130px 2px rgba(0, 0, 0, 0);
    font: 16px SER,sans-serif;
    width: 142px;
    height: 20px;
    padding-left: 8px;
    padding-right: 12px;
}
#indicadores > li > div.sub_menu.clicked > h1.flecha_arriba {
    background-image: url("/Images/Icons/POC/ICN_Arrow_Up_Blue.png");
    background-position: 130px 2px;
    background-repeat: no-repeat;
    box-shadow: none;
}
#indicadores > li > div.sub_menu > h1:hover {
    background-color: #F7F7F7;
    background-image: url("/Images/Icons/POC/ICN_Arrow_Down_Blue.png");
    background-position: 130px 2px;
    background-repeat: no-repeat;
    box-shadow: 0 1px 2px rgba(203, 203, 203, 0.98);
    color: #00ACEC;
    padding-right: 2px;
    width: 142px;
}
#indicadores > li > div.sub_menu > ul {
    height: 0;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 143px;
    list-style-type: none;
    padding-left: 4px;
}
#indicadores > li > div.sub_menu > ul > li {
    color:...

JavaScript

$(document).ready(function () {
    
    llenarListaBodega();

    /********************Agrega los SubMenu *************************/
    $('#indicadores>li>div.sub_menu').click(function (evt) {
        $(this).addClass('clicked');
        $(this).parent().find('>h2').hide();
        $(this).find('>h1').addClass('flecha_arriba');
        $(this).find('>ul').animate({
            height: '120'
        }, 300);
    });

    $('#indicadores>li>div.sub_menu').hover(function () { }, ocultarSubMenu);
    $('#indicadores>li>div.sub_menu>ul').delegate('li', 'click', function (event) {
        var contenido = $(this).html();
        $(this).parent().parent().find('>h1').html(contenido);
        var menu = $(this).parent();
        $(menu).animate({
            height: '0'
        }, 300, function () {
            $(menu).parent().removeClass('clicked');
            $(menu).parent().parent().find('>h2').show();
        });
        event.stopPropagation();
    });
});

function moverBarraIndicadores() {
    var posicion_barrita = $('ul#indicadores>li.seleccionado').first().offset().left;
    $('ul#indicadores').next('span').css('left', posicion_barrita);
}

function ocultarSubMenu() {
    var menu = $(this);
    $(this).find('>ul').animate({
        height: '0'
    }, 300, function () {
        $(menu).parent().find('>h2').show();
        $(menu).removeClass('clicked');
        $(menu).find('>h1').removeClass('flecha_arriba');
    });
}

function llenarListaBodega() {
    /*Checkbox*/
    var check_bodegas = "";
    for (var i = 1; i <= 45; i++) {
        check_bodegas +=
        "<li>" +
           "Bodega " + i +
         "</li>";
    }
    $(".lista_bodegas").append(check_bodegas);
}