#13 - square grid of icons with text for main site menu

install/sql/v70.sql

@@ -2779,7 +2779,7 @@ CREATE TABLE IF NOT EXISTS `sys_objects_menu` (
 ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;
 
 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', 6, 0, 1, '', ''),
+('sys_site', '_sys_menu_title_main', 'sys_site', 'system', 7, 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_site_action', '_sys_menu_title_action', 'sys_site_action', 'system', 9, 0, 1, 'BxTemplMenuAction', ''),

template/css/menu.css

@@ -198,6 +198,7 @@ ul.bx-menu-action {
 
 #bx-popup-ajax-wrapper-sys_site .bx-popup-content-wrapped {
     padding:12px;
+    width:140px;
 }
 
 #bx-menu-toolbar-1-container .bx-menu-toolbar {
@@ -293,23 +294,17 @@ ul.bx-menu-floating-blocks {
     *display: inline;
     vertical-align:top;    
 
-    width:170px;
-    height:170px;
+    width:64px;
+    height:64px;
 }
 
 .bx-menu-floating-blocks li:hover {
     opacity:0.8;
-    -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.3), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.5);
-    -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.3), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.5);
-    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.3), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.3);
 }
 
 .bx-menu-floating-blocks li:active,
 .bx-menu-floating-blocks li.bx-menu-tab-active {
     opacity:1.0;
-    -moz-box-shadow:  inset 0px 0px 1px 0px rgba(0, 0, 0, 0.4), inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
-    -webkit-box-shadow:  inset 0px 0px 1px 0px rgba(0, 0, 0, 0.4), inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
-    box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.4), inset 0px 1px 0px 0px rgba(0, 0, 0, 0.2);
 }
 
 .bx-menu-floating-blocks li a {
@@ -321,29 +316,25 @@ ul.bx-menu-floating-blocks {
     color:#000;
 }
 
-.bx-menu-floating-blocks li img {
+.bx-menu-floating-blocks li img,
+.bx-menu-floating-blocks li .sys-icon {
     display:block;
-    width:128px;
-    height:128px;
+    width:32px;
+    height:32px;
+    margin:8px 16px 3px 16px;
 
-    margin:10px 34px 5px 20px;
+}
 
+.bx-menu-floating-blocks li img {
     background-position:center center;
     background-repeat:no-repeat;
 }
 
 .bx-menu-floating-blocks li .sys-icon {
-
-    display:block;
-    width:128px;
-    height:128px;
-    line-height:128px;
-
-    margin:15px 34px 0px 20px;
-
+    line-height:32px;
     text-align:center;
     vertical-align:bottom;
-    font-size:142px;
+    font-size:32px;
 }
 
 .bx-menu-floating-blocks-title {

template/menu_floating_blocks.html

@@ -1,6 +1,6 @@
-<ul class="bx-menu-floating-blocks">
+<ul class="bx-menu-floating-blocks bx-menu-object-__object__ bx-clearfix">
     <bx_repeat:menu_items>
-        <li class="bx-def-round-corners __class_add__">
+        <li class="bx-def-round-corners bx-def-color-bg-hl-hover __class_add__">
             <a href="__link__" target="__target__" onclick="__onclick__">
                     <div class="bx-menu-floating-blocks-icon">
                         <bx_if:icon><i class="sys-icon __icon__"></i></bx_if:icon>
@@ -10,25 +10,10 @@
             </a>                
         </li>                
     </bx_repeat:menu_items>
-    <div class="bx-clear"></div>
 </ul>
 <script language="javascript">
-    $(document).ready(function () {        
-
+    $(document).ready(function () {
         // add default class to active menu items
         $('.bx-menu-floating-blocks > li.bx-menu-tab-active').not('.bx-def-color-bg-active').addClass('bx-def-color-bg-active');
-
-        // add default class for onhover effect
-        $('.bx-menu-floating-blocks')
-            .not('.bx-menu-floating-blocks-js-applied') // make sure to not bind events multiple times
-            .addClass('bx-menu-floating-blocks-js-applied') 
-            .find('li') // find all menu items
-            .bind('mouseenter mouseleave', function () { // bind events
-                $(this).toggleClass('bx-def-color-bg-hl');
-            }
-        );                
-
-        bx_center_content ('.bx-menu-floating-blocks', '.bx-menu-floating-blocks > li');
-
     });
 </script>