#480 @1

diff --git a/framework/application/views/helpers/HeaderNav.php b/framework/application/views/helpers/HeaderNav.php
index 512653ba2770ddce869ed685e4304795fcd590b4..4757e5f53e0757400c6feba6cc05e6305baa6681 100644 (file)
--- a/framework/application/views/helpers/HeaderNav.php
+++ b/framework/application/views/helpers/HeaderNav.php
@@ -6,7 +6,7 @@ class Fluidbook_View_Helper_HeaderNav extends CubeIT_View_Helper_Abstract {
         */\r
        public function headerNav() {\r
                $mainMenu = $this->navigation()->findOneById($this->localeDefault() . '/' . CubeIT_Navigation::MAIN);\r
-               $res = $this->navigation()->menu()->renderMenu($mainMenu, array('maxDepth' => 0));\r
+               $res = $this->navigation()->menu()->renderMenu($mainMenu, array('maxDepth' => 1));\r
                return $this->htmlElement($res, 'nav', array('id' => 'menu', 'role' => 'navigation'));\r
        }\r
 }
\ No newline at end of file

diff --git a/js/101-header.js b/js/101-header.js
index f88931db41bad4f3cf05c868765dd05ac38e85c9..3d01db4cca1081d552a3fb892a555cba4a4acb8f 100644 (file)
--- a/js/101-header.js
+++ b/js/101-header.js
@@ -12,7 +12,7 @@ function load_header() {
 \r
     htl = new TimelineMax();\r
     // Background-color & height\r
-    htl.add(TweenMax.fromTo(h, 1.5, {height: 90}, {height: 56}), 0);\r
+    htl.add(TweenMax.fromTo(h, 1.5, {height: 90}, {height: 75}), 0);\r
     htl.add(TweenMax.fromTo($(h).find('#header'), 1.5, {height: 90}, {height: 56}), 0);\r
     // Logo\r
     var logo = $(h).find('.logo');\r
@@ -24,6 +24,7 @@ function load_header() {
     htl.add(TweenMax.fromTo($(logo).find('.text'), 1, {opacity: 1}, {opacity: 0}), 1.5);\r
     // Menu position\r
     htl.add(TweenMax.fromTo(nav, 1, {left: '50%'}, {left: 312}), 2);\r
+    htl.add(TweenMax.fromTo(h, 1, {backgroundColor: 'transparent'}, {backgroundColor: "rgba(255, 255, 255, 0.75)"}), 2);\r
     htl.stop();\r
 \r
     $(window).on('cubeitresize', resizeHeader);\r
@@ -35,8 +36,6 @@ function load_header() {
 }\r
 \r
 function resizeHeader() {\r
-\r
-\r
     headerScroll();\r
 }\r
 \r
@@ -54,7 +53,7 @@ function headerScroll() {
     if (formerScroll < s) {\r
         goingUp = false;\r
     }\r
-\r
+    var adminHeight = $("#adminBar").outerHeight();\r
     var headerHeight = $("header").outerHeight();\r
     if (scrollUp != goingUp) {\r
         lastDirChange = s;\r
@@ -79,11 +78,12 @@ function headerScroll() {
             htop = -scrolledDistance + headerPos;\r
         } else {\r
             // We retract the header when user scrolled down of 400px\r
-            htop = (400 - scrolledDistance) - headerHeight;\r
+            htop = (600 - scrolledDistance) - headerHeight;\r
         }\r
+        fb(htop);\r
     }\r
     // Normalize top value\r
-    $("header").css('top', Math.max(-headerHeight, Math.min(0, htop)));\r
+    $("header").css('top', Math.max(-headerHeight, Math.min(adminHeight, htop + adminHeight)));\r
     // Update\r
     formerScroll = s;\r
     scrollUp = goingUp;\r

diff --git a/less/101-header.less b/less/101-header.less
index 783759ce18ae15aeeb3809c5f51c74c6da70bb23..2b7e25a11e477d95bd2ea4d9bdfe1841b8908eb4 100644 (file)
--- a/less/101-header.less
+++ b/less/101-header.less
@@ -5,6 +5,7 @@ header {
        top: 0px;\r
        left: 50%;\r
        transform: translateX(-50%);\r
+       z-index: 10;\r
 \r
        height: 90px;\r
        width: 100%;\r
@@ -36,22 +37,19 @@ header {
                                display: inline-block;\r
                        }\r
                }\r
+\r
        }\r
 \r
        nav#menu {\r
                position: relative;\r
                top: 57px;\r
-               left:50%;\r
+               left: 50%;\r
                width: 800px;\r
                margin-left: -400px;\r
 \r
                display: inline-block;\r
                text-align: center;\r
 \r
-               li {\r
-                       margin: 0 25px;\r
-               }\r
-\r
                a {\r
                        line-height: 9px;\r
                        border: 1px solid transparent;\r
@@ -59,8 +57,49 @@ header {
                        display: inline-block;\r
                }\r
 \r
-               li.active a, a:hover {\r
-                       border-bottom-color: @color-header-grey;\r
+               > ul {\r
+                       > li {\r
+                               &.active > a, a:hover {\r
+                                       border-bottom-color: @color-header-grey;\r
+                               }\r
+                               &:hover {\r
+                                       > ul {\r
+                                               display: block;\r
+                                       }\r
+                               }\r
+                               margin: 0 25px;\r
+                               position: relative;\r
+                               > ul {\r
+                                       position: absolute;\r
+                                       top: 40px;\r
+                                       left: -20px;\r
+                                       background-color: #fff;\r
+                                       box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);\r
+                                       white-space: nowrap;\r
+                                       display: none;\r
+                                       &:before{\r
+                                               content:"";\r
+                                               background-color: transparent;\r
+                                               height:20px;\r
+                                               width: 100%;\r
+                                               top:-20px;\r
+                                               left:0px;\r
+                                               position: absolute;\r
+                                       }\r
+\r
+                                       > li {\r
+                                               display: block;\r
+                                               text-align: left;\r
+\r
+                                               margin: 10px 20px;\r
+\r
+                                               &.active a, a:hover {\r
+                                                       border-bottom-color: transparent;\r
+                                                       color: #e86f68;\r
+                                               }\r
+                                       }\r
+                               }\r
+                       }\r
                }\r
        }\r
 \r