added responsive rich menu and small fix in blockbanner

themes/default-bootstrap/modules/blocktopmenu/blocktopmenu.tpl

@@ -2,7 +2,8 @@
 	
 	<!-- Menu -->
 	<div class="sf-contener clearfix">
-		<ul class="sf-menu clearfix">
+    	<div class="cat-title">{l s="Categories" mod="blocktopmenu"}</div>
+		<ul class="sf-menu clearfix menu-content">
 			{$MENU}
 			{if $MENU_SEARCH}
 				<li class="sf-search noBack" style="float:right">
@@ -20,4 +21,58 @@
 	</div>
 
 	<!--/ Menu -->
+    {literal}
+    <script type="text/javascript">
+		$(document).ready(function() {
+			categoryMenu = $('ul.sf-menu');        //var rich menu
+			categoryMenu.superfish();				   //menu initialization
+			$('.sf-menu > li > ul').addClass('container'); //add class for width define
+			i = 0;
+			$('.sf-menu > li > ul > li:not(#category-thumbnail)').each(function() {  //add classes for clearing
+                i++;
+				if(i%2==1)
+					$(this).addClass('first-in-line-xs');
+				else if (i%5==1)
+					$(this).addClass('first-in-line-lg');
+            });
+        });
+		
+		// accordion for definition smaller that 767px
+		
+		responsiveflagMenu = false;
+		function menuChange(status){
+			if(status == 'enable'){
+				$('.sf-menu > li > ul').removeAttr('style');
+				$('.sf-menu').removeAttr('style');
+				$('.sf-contener .cat-title').on('click', function(){
+					$(this).toggleClass('active').parent().find('ul.menu-content').stop().slideToggle('medium');
+				}),
+				$('.sf-menu > li:has(ul)').each(function() {
+                    $(this).prepend('<span></span>'),
+					$(this).find('span').on('click touchend', function(){
+					  	categoryMenu.superfish('hide');
+					});
+                });
+			}else{
+				$('.sf-contener .cat-title').off();	
+				$('.sf-menu').removeAttr('style');
+				$('.sf-menu > li > ul').removeAttr('style');
+				$('.sf-contener .cat-title').removeClass('active');
+			}
+		}
+		
+		function resposiveMenu(){
+		   if ($(document).width() <= 767 && responsiveflagMenu == false){
+				menuChange('enable'),
+				responsiveflagMenu = true	
+			}
+			else if ($(document).width() >= 768){
+				menuChange('disable'),
+				responsiveflagMenu = false
+			}
+		}
+		$(document).ready(resposiveMenu);
+		$(window).resize(resposiveMenu);
+	</script>
+     {/literal}
 {/if}