#13 menu remake + slight design changes

install/sql/v70.sql

@@ -2780,6 +2780,7 @@ CREATE TABLE IF NOT EXISTS `sys_objects_menu` (
 INSERT INTO `sys_objects_menu` (`object`, `title`, `set_name`, `module`, `template_id`, `deletable`, `active`, `override_class_name`, `override_class_file`) VALUES
 ('sys_site', '_sys_menu_title_main', 'sys_site', 'system', 4, 0, 1, '', ''),
 ('sys_site_submenu', '_sys_menu_title_submenu', 'sys_site', 'system', 1, 0, 1, 'BxTemplMenuSubmenu', ''),
+('sys_site_submenu_main', '_sys_menu_title_submenu_main', 'sys_site', 'system', 8, 0, 1, '', ''),
 ('sys_footer', '_sys_menu_title_footer', 'sys_footer', 'system', 2, 0, 1, '', ''),
 ('sys_toolbar_site', '_sys_menu_title_toolbar_site', 'sys_toolbar_site', 'system', 5, 0, 1, '', ''),
 ('sys_toolbar_member', '_sys_menu_title_toolbar_member', 'sys_toolbar_member', 'system', 5, 0, 1, '', ''),

template/_sub_header.html

@@ -11,9 +11,9 @@
 
     <div class="bx-page-wrapper bx-def-padding-sec-left bx-def-padding-sec-right bx-def-page-width">
 
-        <div id="bx-toolbar-content">
+        <div id="bx-toolbar-content" class="bx-clearfix">
 
-            <div id="bx-menu-toolbar-1-container" class="bx-def-padding-sec-top bx-def-media-phone-hide">
+            <div id="bx-menu-toolbar-1-container" class="bx-def-media-phone-hide">
                 <bx_menu:sys_toolbar_site />
             </div>
 
@@ -26,12 +26,10 @@
 
             </div>
 
-            <div id="bx-menu-toolbar-2-container" class="bx-def-padding-sec-top">            
+            <div id="bx-menu-toolbar-2-container">
                 <bx_menu:sys_toolbar_member />
             </div>
 
-            <div class="bx-clear"></div>
-
         </div>
 
     </div>

template/css/default.css

@@ -200,6 +200,10 @@
 }
 
 /* colors */
+.bx-def-color-bg-page {
+    background-color:#f2f2f2;
+    background-image:url(../images/bg-page.jpg);
+}
 .bx-def-color-bg-block {
     background-color:#fff;
 }

template/css/general.css

@@ -6,8 +6,9 @@
 /* --------------- toolbar */
 
 #bx-toolbar {
-    position: relative;
-    min-height: 70px;
+    position: fixed;
+    width:100%;
+    min-height: 60px;
 
     border-bottom: 2px solid #383d66;
     border-top: 1px solid #666;
@@ -25,15 +26,19 @@
     position: relative;
 }
 
+#bx-menu-toolbar-1-container,
+#bx-menu-toolbar-2-container {
+    padding-top:5px;
+    width:35%;
+}
+
 #bx-menu-toolbar-1-container {
     float:left;
-    width:35%;
     text-align:left;
 }
 
 #bx-menu-toolbar-2-container {
     float:right;
-    width:35%;
     text-align:right;
 }
 
@@ -41,7 +46,7 @@
     float:left;
     width:30%;
 
-    line-height: 70px;
+    line-height: 60px;
     text-align: center; 
     text-shadow: 0px 0px 2px #000;
 }
@@ -54,11 +59,12 @@
 /* --------------- menu bar */
 
 #bx-menu-main-bar-wrapper {
+    padding-top:60px;
     border-bottom:1px solid rgba(255, 255, 255, 0.8);
 }
 
 #bx-menu-main-bar {
-    background-color:#f6f6f6;
+    background-color:#ffffff;
     border-bottom:1px solid #d0d0d0;
 
     line-height:49px;

template/css/menu.css

@@ -133,13 +133,13 @@ ul.bx-menu-verlit {
     float:left;
 }
 
-.bx-menu-main-submenu-div {
-    width:0px;
-    height:100%;
-    border-left: 1px solid #dddddd;
-    border-right: 1px solid #ffffff;
-    border-left: 1px solid rgba(200, 200, 200, 0.5);
-    border-right: 1px solid rgba(255, 255, 255, 0.8);
+#bx-menu-main-container #bx-menu-main-submenu:first-child .bx-menu-main-submenu-div:first-child {
+    display:none;
+}
+
+.bx-menu-main-submenu-div .sys-icon {
+    font-size:32px;
+    vertical-align:middle;
 }
 
 ul.bx-menu-main-submenu,
@@ -155,6 +155,7 @@ ul.bx-menu-main {
     margin:0;
 }
 
+.bx-menu-main li a,
 .bx-menu-main li span,
 .bx-menu-main li .sys-icon,
 .bx-menu-main-submenu li a {

template/menu_main.html

@@ -1,3 +1,5 @@
 <ul id="bx-menu-main" class="bx-menu-main bx-def-font-h3 bx-clearfix">
+    <li class="bx-def-padding-sec-left bx-def-padding-right"><a href="javascript:void(0);" onclick="bx_menu_popup('sys_site', this);"><i class="sys-icon reorder"></i></a><span>&nbsp;</span></li>
+    <li class="bx-menu-main-submenu-div bx-def-padding-right"><i class="sys-icon angle-right"></i></li> 
     <li class="bx-def-padding-right"><i class="sys-icon __icon__ bx-def-margin-sec-right"></i><span>__title__</span></li>
 </ul>

template/menu_main_submenu.html

@@ -1,14 +1,6 @@
 <ul id="bx-menu-main-submenu" class="bx-menu-main-submenu bx-def-font-h3 bx-clearfix">
-    <li class="bx-menu-main-submenu-div"><a>&nbsp;</a></li>
+    <li class="bx-menu-main-submenu-div bx-def-padding-sec-right"><i class="sys-icon angle-right"></i></li>
     <bx_repeat:menu_items>
-        <li class="bx-def-padding-left __class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a></li>
+        <li class="bx-def-padding-sec-right bx-def-padding-sec-left __class_add__"><a href="__link__" target="__target__" onclick="__onclick__">__title__</a></li>
     </bx_repeat:menu_items>
 </ul>
-<script>
-    $(document).ready(function () {
-        $('#bx-menu-main-submenu li').click(function () {
-            $('#bx-menu-main-submenu li').removeClass('bx-menu-tab-active');
-            $(this).addClass('bx-menu-tab-active');
-        });
-    });
-</script>

template/scripts/BxBaseMenuSubmenu.php

@@ -60,7 +60,12 @@ class BxBaseMenuSubmenu extends BxTemplMenu
         if ($this->_sObjectSubmenu)
             $oSubmenu = BxDolMenu::getObjectInstance($this->_sObjectSubmenu);
                 
-        return $this->_oTemplate->parseHtmlByName($this->_aObject['template'], $aVars) . ($oSubmenu ? $oSubmenu->getCode() : '');
+        if ('home' == $aMenuItemSelected['name']) {
+            $oSubmenu = BxDolMenu::getObjectInstance('sys_site_submenu_main');
+            return $oSubmenu->getCode();
+        } else {
+            return $this->_oTemplate->parseHtmlByName($this->_aObject['template'], $aVars) . ($oSubmenu ? $oSubmenu->getCode() : '');
+        }
     }
 
     protected function _getSelectedMenuItem () {