#103 - horizontal sliding effect for vertical sliding menu

inc/js/functions.js

@@ -356,10 +356,11 @@ function bx_menu_slide (jSel, e, sPosition) {
             fPositionBlock();
         else
             fPositionSite();
-
+        
         eSlider.slideDown();
+        eSlider.find('.bx-sliding-menu-cont').css('left', '0');
 
-        eSlider.data('data-control-btn', e);
+        eSlider.data('data-control-btn', e);        
     };    
     
     if ('undefined' == typeof(sPosition))

template/css/menu.css

@@ -267,6 +267,16 @@ ul.bx-menu-toolbar li .sys-icon {
 
 /* --------------- floating blocks menu */
 
+.bx-sliding-menu-cont {
+    position:relative; 
+    left:-200vw;
+
+    -webkit-transition:left 0.5s cubic-bezier(0, 0.97, 0.65, 1.2);
+    -moz-transition:left 0.5s cubic-bezier(0, 0.97, 0.65, 1.2);
+    -o-transition:left 0.5s cubic-bezier(0, 0.97, 0.65, 1.2);
+    transition:left 0.5s cubic-bezier(0, 0.97, 0.65, 1.2);
+}
+
 .bx-sliding-menu-close,
 .bx-sliding-menu-close:hover {
     position:absolute;

template/scripts/BxBaseMenuSite.php

@@ -22,7 +22,7 @@ class BxBaseMenuSite extends BxTemplMenu
     public function getCode ()
     {
         $s = parent::getCode ();
-        return '<div id="bx-sliding-menu-' . $this->_sObject . '" class="bx-sliding-menu-main bx-def-z-index-nav bx-def-color-bg-block bx-def-border-bottom" style="display:none;">' . $s . '</div>';
+        return '<div id="bx-sliding-menu-' . $this->_sObject . '" class="bx-sliding-menu-main bx-def-z-index-nav bx-def-color-bg-block bx-def-border-bottom" style="display:none;"><div class="bx-sliding-menu-cont">' . $s . '</div></div>';
     }
 }