<link href="{$template_shop_path}/visual/modules/common/sub-menu/css/style-1.css" rel="stylesheet">
<div class="col-md-12">
    <div class="sub-menu-nav sub-menu-nav-$_id">
        <label class="sub-menu-btn">
            <p class="cmseasyedit" cmseasy-id="all_classifications" cmseasy-table="lang" cmseasy-field="template">
                {lang('all_classifications')}
            </p>
            <button type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </label>
        <div class="loop-products-shop-nav" style="display:none;">
            <div class="container">
                <div class="loop-products-nav-left">
                    <ul>
                        {loop typies() $i $t}
                        <li data-id="{=$i+1}">
                                <span>
                                    <a href="{$t['url']}" title="{$t['typename']}">
                                        {$t['typename']}
                                    </a>
                                </span>
                        </li>
                        {/loop}
                    </ul>
                </div>
                <div class="loop-products-nav-right">
                    {loop typies() $k $t}
                    <div class="loop-products-nav-right-sub hide" data-id="{=$k+1}">
                        {loop $t['children'] $t1}
                        <dl>
                            <dt>
                                <a href="{$t1['url']}" title="{$t1['typename']}">
                                    {$t1['typename']}
                                    <i> &gt;</i>
                                </a>
                            </dt>
                            <dd>
                                {loop $t1['children'] $t2}
                                <a href="{$t2['url']}" title="{$t2['typename']}">
                                    {$t2['typename']}
                                </a>
                                {/loop}
                            </dd>
                        </dl>
                        {/loop}
                    </div>
                    {/loop}
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{$template_shop_path}/visual/modules/common/sub-menu/js/sub-menu.js" type="text/javascript"></script>

<style type="text/css">
    .sub-menu-nav-$_id .loop-products-nav-left {
        height:$_height;
        background:$_background-color;
    }
    .sub-menu-nav-$_id .loop-products-nav-left ul li span:hover ,
    .sub-menu-nav-$_id .loop-products-nav-right-sub
    {
        background:$_background-hover-color;
    }

    .sub-menu-nav-$_id .loop-products-nav-left a {
        font-size:$_title-size;
        color:$_title-color;
    }
    .sub-menu-nav-$_id .loop-products-nav-left li:hover a {
        color:$_title-hover-color;
    }
    .sub-menu-nav-$_id .loop-products-nav-right a {
        font-size:$_subtitle-size;
        color:$_subtitle-color;
    }
    .sub-menu-nav-$_id .loop-products-nav-right a:hover {
        color:$_subtitle-hover-color;
    }

    .sub-menu-nav-$_id .loop-products-nav-right dl dd a {
        font-size:$_link-font-size;
        color:$_link-color;
        border-left-color:$_link-border-color;
    }
    .sub-menu-nav-$_id .loop-products-nav-right dl dd a:hover {
        color:$_link-hover-color;
        border-left-color:$_link-border-hover-color;
    }

    .sub-menu-nav-$_id .loop-products-nav-right-sub dd {
        border-bottom-color: $_list-border-color;
    }

    @media screen and (min-width: 0) and (max-width: 767px){
        .sub-menu-nav-$_id .loop-products-nav-right-sub {border-color:$_background-color;}
    }
</style>
