Bigcommerce Sidebar Category List VMENU

gistfile1.txt

<nav>
    
    <div class="sidebarBlock">
        <h5 class="sidebarBlock-heading">Categories</h5>
        <div class="u-vmenu">
        <ul>
            {{#each categories}}
                <li>
                    {{#if children}}
                    <a href="{{url}}">
                        {{name}}
                    </a>
                    
                        <ul>
                            <li>
                                <a href="{{url}}">{{lang 'category.view_all.name' category=name}}</a>
                            </li>
                            {{#each children}}
                                <li>
                                    {{#if children}}
                                        <a href="{{url}}">{{name}}</a>
                                        <ul>
                                            {{#each children}}
                                            <li>
                                                <a href="{{url}}">{{name}}</a>
                                            </li>
                                            {{/each}}
                                        </ul>
                                    {{else}}
                                        <a href="{{url}}">{{name}}</a>
                                    {{/if}}
                                </li>
                            {{/each}}
                        </ul>
                    
                    {{else}}
                    <a href="{{url}}">{{name}}</a>
                    {{/if}}

                </li>
            {{/each}}
            
        </ul>
        </div>
    </div>

</nav>








 <script>
            $(function(){
        
                var url = window.location.pathname, 
                    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
                    // now grab every link from the navigation
                    $('.page-sidebar ul li a').each(function(){
                        // and test its normalized href against the url pathname regexp
                        if(urlRegExp.test(this.href.replace(/\/$/,''))){
                            $(this).addClass('active');
                            $(this).parentsUntil('.u-vmenu').addClass('sactive');
                        }
                    });
            
            });
        </script>
        
        <script>
            (function($) {
            	$.fn.vmenuModule = function(option) {
            		var obj,
            			item;
            		var options = $.extend({
            				Speed: 220,
            				autostart: true,
            				autohide: 1
            			},
            			option);
            		obj = $(this);
            
            		item = obj.find("ul").parent("li").children("a");
            		item.attr("data-option", "off");
            
            		item.unbind('click').on("click", function( event ) {
            		    event.preventDefault();
            			var a = $(this);
            			if (options.autohide) {
            				a.parent().parent().find("a[data-option='on']").parent("li").children("ul").slideUp(options.Speed / 1.2,
            					function() {
            						$(this).parent("li").children("a").attr("data-option", "off");
            					})
            			}
            			if (a.attr("data-option") == "off") {
            				a.parent("li").children("ul").slideDown(options.Speed,
            					function() {
            						a.attr("data-option", "on");
            					});
            			}
            			if (a.attr("data-option") == "on") {
            				a.attr("data-option", "off");
            				a.parent("li").children("ul").slideUp(options.Speed)
            			}
            		});
            		if (options.autostart) {
            			obj.find("a").each(function() {
            
            				$(this).parent("li").parent("ul").slideDown(options.Speed,
            					function() {
            						$(this).parent("li").children("a").attr("data-option", "on");
            					})
            			})
            		}
            
            	}
            })(window.jQuery || window.Zepto);
        </script>
        
        <script>
            jQuery(document).ready(function(){
                jQuery(".u-vmenu").vmenuModule({ Speed: 200, autostart: false, autohide: true });
                jQuery('.u-vmenu > ul > li > a').click(function(){
                    jQuery(this).parent().siblings().removeClass('sactive');
                })
            })
        </script>
















.u-vmenu ul{
    margin:0px;
}

.u-vmenu ul li {
	width: 100%;
	list-style: none;
}
.u-vmenu ul ul{
	display: none;
}
.u-vmenu > ul > li {
	background: url(../images/vmenu/zakladka.png) left top no-repeat;
	background-size: 100% auto;
}
.u-vmenu ul li a {
	height: 30px;
	line-height: 30px;
	display: block;
	font-size: 14px;
	color: #82846f;
	text-decoration: none;
	outline: none;
}
.u-vmenu > ul > li > a {
	height: 42px;
	line-height: 42px;
	padding-left: 20px;
}
.u-vmenu > ul > li > ul > li > a {
	padding-left: 40px;
}
.u-vmenu > ul > li > ul > li > ul > li > a {
	padding-left: 60px;
}
.u-vmenu > ul > li > ul > li > ul > li > ul > li > a {
	padding-left: 80px;
}
.u-vmenu ul li a[data-option='on']{
	background: url(../images/vmenu/on.png) right center no-repeat;
}
.u-vmenu ul li a[data-option='off'] {
	background: url(../images/vmenu/off.png) right center no-repeat;
}

.u-vmenu>ul>li>a {
    text-transform: uppercase;
    color: #000;
}


.u-vmenu ul li a[data-option=on] {
    color: #4b2f91;
}

.u-vmenu ul li a.active {
    color: #4b2f91;
    font-weight: bold;
}

.u-vmenu ul li.sactive > a {
    color: #4b2f91;
    font-weight: bold;
}