<style>
    .hls-selectBar {
        width:60px;
    }
    .hls-selectBar ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    .hls-selectBar ul li {
        padding-top: 3.33%;
    }
    .hls-selectBar ul li .contain {
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color:white;
        cursor: pointer;
        background-color:white;
        overflow: hidden;
    }
    .text-content-right{
        width: 0px;
        display: none;
    }
</style>

<div id="${id!}" class="hls-selectBar ${class!}"  <#if style??> style="${style!}"</#if> >
        <ul>
        </ul>
</div>



<script>
    $( function () {
        var config = ${config};
        config.id = "${id}";
        ${id} = new HlsSelectBar();
        ${id}._init(config);
        $("#${id} div.contain").hover(function(){

            $(this).find('img').stop().animate({'width':'0px'},100,function(){
                $(this).hide().next().show().animate({'width':'60px'},100);
            });
        },function(){
            $(this).find('div').animate({'width':'0px'},100,function(){
                $(this).hide().prev().show().animate({'width':'30px'},100);
            });
        });
    })
</script>

