Category Menu

Category-menu.html

<div class="category-menu" id="cate-toggle">
    						<ul>
	    						<li class="has-sub"><a href="#">Shirts</a>
	    							<ul class="category-sub">
                                        <li class="has-sub"><a href="#">Tops</a>
											<ul>
												<li><a href="#">T-shirts</a></li>
												<li><a href="#">Blouses</a></li>
											</ul>
										</li>
                                        <li class="has-sub"><a href="#">Dresses</a>
											<ul>
												<li><a href="#">Casual Dresses</a></li>
												<li><a href="#">Evening Dresses</a></li>
												<li><a href="#">Summer Dresses</a></li>
											</ul>
                                        </li>
                                        <li class="has-sub"><a href="#">Handbags</a>
                                        	<ul>
                                        		<li><a href="#">Handbags US</a></li>
                                        		<li><a href="#">Handbags EU</a></li>
                                        		<li><a href="#">Handbags VN</a></li>
                                        		<li><a href="#">Handbags EN</a></li>
                                        	</ul>
                                        </li>
                                        <li><a href="#">New Hbags</a>
                                        	<ul>
                                        		<li><a href="#">New Hbags VP</a></li>
                                        		<li><a href="#">New Hbags KP</a></li>
                                        		<li><a href="#">New Hbags XP</a></li>
                                        		<li><a href="#">New Hbags UP</a></li>
                                        	</ul>
                                        </li>
                                    </ul>
	    						</li>
	    						<li class="has-sub">
	    							<a href="#">Pants</a>
	    							<ul class="category-sub">
                                        <li class="has-sub"><a href="#">Clothes</a>
                                        	<ul>
                                        		<li><a href="#">Coat Jackets</a></li>
                                        		<li><a href="#">Blazers</a></li>
                                        		<li><a href="#">RainCoats</a></li>
                                        		<li><a href="#">Vetston</a></li>
                                        	</ul>
                                        </li>
                                        <li class="has-sub"><a href="#">Shoes</a>
                                        	<ul>
                                        		<li><a href="#">Annka Boost</a></li>
                                        		<li><a href="#">Footerwaer</a></li>
                                        		<li><a href="#">Clog Sadarn</a></li>
                                        		<li><a href="#">Combat fog</a></li>
                                        	</ul>
                                        </li>
                                        <li><a href="#">Bags</a></li>
                                    </ul>
	    						</li>
	    						<li class="has-sub"><a href="#">Jeans</a>
	    							<ul class="category-sub">
	    								<li class="has-sub"><a href="#">Boys</a>
	    									<ul>
	    										<li><a href="#">Boys clothes</a></li>
	    										<li><a href="#">Boys T-shirt</a></li>
	    									</ul>
	    								</li>
	    								<li><a href="#">Girls</a></li>
	    								<li><a href="#">Kids</a></li>
	    								<li><a href="#">Everyone</a></li>
	    							</ul>
	    						</li>
	    						<li>
	    							<a href="#">Outer Wear</a>
	    						</li>
	    						<li>
	    							<a href="#">Dress</a>
	    						</li>
	    						<li>
	    							<a href="#">Shoes</a>
	    						</li>
	    						<li>
	    							<a href="#">Accessories</a>
	    						</li>
	    						<li>
	    							<a href="#">Sports</a>
	    						</li>
	    						<li>
	    							<a href="#">Under Wear</a>
	    						</li>
	    					</ul>
</div>

category.js

/*---------------------
	 Category menu
	--------------------- */
	$('#cate-toggle li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
			element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});
	$('#cate-toggle>ul>li.has-sub>a').append('<span class="holder"></span>');