refactor menu and add the delay before collapse

ot_templating/Resources/Private/Partials/Menu.html

@@ -10,13 +10,12 @@
            Si les items ont des sous-pages, on leur donne la classe dropdown--></f:comment>
 <v:menu as="mainMenu"
         classHasSubpages="dropdown"
-        classCurrent="current"
         pageUid="{ot:rootPage.getId()}">
 
     <ul id="menu">
         <f:for each="{mainMenu}" as="mainMenuItem">
 
-            <li class="{mainMenuItem.class}">
+            <li class="{mainMenuItem.class} delayed-collapsing">
 
                 <f:link.page pageUid="{mainMenuItem.uid}" title="{mainMenuItem.linktext}">
                     {mainMenuItem.linktext}
@@ -30,12 +29,11 @@
                     <ul class="dropdown-menu">
                         <v:menu as="subMenu"
                                 pageUid="{mainMenuItem.uid}"
-                                classHasSubpages="dropdown"
-                                classCurrent="current">
+                                classHasSubpages="dropdown">
 
                             <f:for each="{subMenu}" as="subMenuItem">
 
-                                <li class="{subMenuItem.class}">
+                                <li class="{subMenuItem.class} delayed-collapsing">
                                     <f:link.page pageUid="{subMenuItem.uid}" title="{subMenuItem.linktext}">
                                         {subMenuItem.title}
 
@@ -49,7 +47,6 @@
 
                                         <v:menu as="thirdmenu"
                                                 class="dropdown-menu"
-                                                classCurrent="current"
                                                 pageUid="{subMenuItem.uid}" >
 
                                             <f:for each="{thirdLevelMenu}" as="thirdLevelMenuItem">

ot_templating/Resources/Public/assets/script/main.js

@@ -1,18 +1,38 @@
 $(document).ready(function(){
 
     // ******* Navbars & dropdowns *******
+    var hideDropdownsFor = function(elt, delay=0) {
+        if (delay === 0) {
+            elt.children('ul.dropdown-menu').removeClass('dropdown-displayed');
+            elt.removeClass('dropdown-displayed');
+            elt.children('ul.dropdown-menu').hide();
+        } else {
+            elt.delay(delay).queue(function(next) {
+                elt.children('ul.dropdown-menu').removeClass('dropdown-displayed');
+                elt.removeClass('dropdown-displayed');
+                next();
+            });
+            elt.children('ul.dropdown-menu').delay(delay).hide(1);
+        }
+    }
 
-    var hideDropdownsFor = function(elt) {
-        elt.children('ul.dropdown-menu').removeClass('dropdown-displayed');
+    var stopDelayedHidingFor = function(elt) {
+        elt.stop(true);
+        elt.children('ul.dropdown-menu').stop(true);
     }
 
     $('.dropdown').on('mouseenter', function(e) {
 
-        hideDropdownsFor($(this));
+        stopDelayedHidingFor($(this));
+        $('.dropdown.dropdown-displayed').not($(this).parents()).each(function() {
+            hideDropdownsFor($(this));
+        });
 
         dropdown = $(this).find('ul.dropdown-menu:first');
         if (dropdown.length !== 0) {
+            $(this).addClass('dropdown-displayed');
             dropdown.addClass('dropdown-displayed');
+            dropdown.show();
 
             if ($(this).parents('.dropdown').length !== 0) {
                 // second level dropdown
@@ -25,7 +45,11 @@ $(document).ready(function(){
             }
         }
     }).on('mouseleave', function(e) {
-        hideDropdownsFor($(this));
+        if ($(this).hasClass('delayed-collapsing')) {
+            hideDropdownsFor($(this), 800);
+        } else {
+            hideDropdownsFor($(this));
+        }
     });
 
     // **** Login Pop-Up and Auth

ot_templating/Resources/Public/assets/style/common/module/_dropdown.scss

@@ -18,7 +18,7 @@ ul.dropdown-menu li {
 }
 
 ul.dropdown-displayed {
-  display:block;
+  //display: inline-block;
 }
 
 ul.dropdown-right {

ot_templating/Resources/Public/assets/style/common/module/menu.scss

@@ -1,4 +1,21 @@
 
+$menu-background-color: $menu-background-color;
+$menu-background-color-hovered: $menu-background-color-hovered;
+$menu-font-color: $menu-font-color;
+$menu-font-color-hovered: $menu-font-color-hovered;
+$menu-dropdown-background-color: $menu-dropdown-background-color;
+$menu-dropdown-background-color-hovered: $menu-dropdown-background-color-hovered;
+$menu-dropdown-background-color-current: $menu-dropdown-background-color-current;
+$menu-dropdown-font-color: $menu-dropdown-font-color;
+$menu-dropdown-font-color-hovered: $menu-dropdown-font-color-hovered;
+$menu-dropdown-font-color-current: $menu-dropdown-font-color-current;
+
+$menu-font-size: 14px;
+
+$menu-item-height: 50px;
+$submenu-item-height: 30px;
+
+
 #menu {
   @include flex;
   flex-direction: row;
@@ -19,59 +36,66 @@
   flex-direction: row;
   align-items: center;
 
-  height: 100%;
-  min-height: 26px;
   padding: 12px;
+  height: $menu-item-height - 24px;
 
   color: $menu-font-color;
-  font-size: 14px;
+  font-size: $menu-font-size;
   text-align: center;
   text-decoration: none;
 }
 
-#menu li:hover {
-  height: 100%;
-  background-color: $menu-background-color-hovered;
-  text-decoration: none;
+#menu li.dropdown-displayed a {
+  color: $menu-font-color-hovered;
 }
 
-#menu li:hover a {
-  color: $menu-font-color-hovered;
+#menu li a:hover {
+  text-decoration: none;
 }
 
 #menu .caret {
   margin-left: 5px;
 }
 
+#menu .dropdown.dropdown-displayed {
+  background-color: $menu-background-color-hovered;
+  color: $menu-font-color-hovered;
+}
+
 #menu .dropdown-menu {
   min-width: 180px;
+  white-space: nowrap;
+
   background-color: $menu-dropdown-background-color;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }
 
-#menu .dropdown-menu:hover {
-  background-color: $menu-dropdown-background-color-hovered;
-}
-
-
 #menu .dropdown-menu li {
   width: 100%;
   padding: 0;
 }
 
-#menu .dropdown-menu.current {
-  background-color: $menu-dropdown-background-color-current;
-}
-#menu .dropdown-menu a {
-  color: $menu-dropdown-font-color;
-  font-size: 14px;
+#menu .dropdown-menu li:hover {
+  background-color: $menu-dropdown-background-color-hovered;
 }
 
-#menu .dropdown-menu a:hover {
+#menu .dropdown-menu li:hover a {
   color: $menu-dropdown-font-color-hovered;
 }
 
-#menu .dropside-menu {
-  background-color: #f2f2f2;
-  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+#menu .dropdown-menu li.active {
+  background-color: $menu-dropdown-background-color-current;
+}
+
+#menu .dropdown-menu li.active a {
+  color: $menu-dropdown-font-color-current;
+}
+
+#menu .dropdown-menu a {
+  height: $menu-font-size;
+  padding: (($submenu-item-height - $menu-font-size) / 2) 12px;
+  width: auto;
+
+  color: $menu-dropdown-font-color;
+  font-size: $menu-font-size;
 }

ot_templating/Resources/Public/assets/style/theme-base.scss

@@ -11,6 +11,7 @@ $menu-dropdown-background-color-hovered: #e6e6e6;
 $menu-dropdown-background-color-current: #4facc6;
 $menu-dropdown-font-color: #555;
 $menu-dropdown-font-color-hovered: #555;
+$menu-dropdown-font-color-current: #ffffff;
 
 $user-toolbar-color: #666666;
 $user-toolbar-dropdown-background-color: #ffffff;

ot_templating/Resources/Public/assets/style/theme-blue.css

@@ -67,10 +67,6 @@ ul.dropdown-menu li {
   padding: 12px 16px;
 }
 
-ul.dropdown-displayed {
-  display: block;
-}
-
 ul.dropdown-right {
   top: 0;
   left: 100%;
@@ -136,69 +132,65 @@ ul.dropdown-left {
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: 100%;
-  min-height: 26px;
   padding: 12px;
+  height: 26px;
   color: #ffffff;
   font-size: 14px;
   text-align: center;
   text-decoration: none;
 }
 
-#menu li:hover {
-  height: 100%;
-  background-color: #e6e6e6;
-  text-decoration: none;
+#menu li.dropdown-displayed a {
+  color: #555;
 }
 
-#menu li:hover a {
-  color: #555;
+#menu li a:hover {
+  text-decoration: none;
 }
 
 #menu .caret {
   margin-left: 5px;
 }
 
+#menu .dropdown.dropdown-displayed {
+  background-color: #e6e6e6;
+  color: #555;
+}
+
 #menu .dropdown-menu {
   min-width: 180px;
+  white-space: nowrap;
   background-color: #ffffff;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
-#menu .dropdown-menu:hover {
-  background-color: #e6e6e6;
-}
-
 #menu .dropdown-menu li {
   width: 100%;
   padding: 0;
 }
 
-#menu .dropdown-menu li.current {
-  background-color: #4facc6;
+#menu .dropdown-menu li:hover {
+  background-color: #e6e6e6;
 }
 
-#menu .dropdown-menu a {
+#menu .dropdown-menu li:hover a {
   color: #555;
-  font-size: 14px;
-  height: 14px;
-  padding: 4px 12px;
-  width: auto;
 }
 
-#menu .dropdown-menu a:hover {
-  color: #555;
+#menu .dropdown-menu li.active {
+  background-color: #4facc6;
 }
 
-#menu .dropside-menu {
-  background-color: #f2f2f2;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+#menu .dropdown-menu li.active a {
+  color: #ffffff;
 }
 
-#menu .dropside-menu a {
+#menu .dropdown-menu a {
   height: 14px;
-  padding: 4px 12px;
+  padding: 8px 12px;
   width: auto;
+  color: #555;
+  font-size: 14px;
 }
 
 .content {

ot_templating/Resources/Public/assets/style/theme-green.css

@@ -67,10 +67,6 @@ ul.dropdown-menu li {
   padding: 12px 16px;
 }
 
-ul.dropdown-displayed {
-  display: block;
-}
-
 ul.dropdown-right {
   top: 0;
   left: 100%;
@@ -136,69 +132,65 @@ ul.dropdown-left {
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: 100%;
-  min-height: 26px;
   padding: 12px;
+  height: 26px;
   color: #ffffff;
   font-size: 14px;
   text-align: center;
   text-decoration: none;
 }
 
-#menu li:hover {
-  height: 100%;
-  background-color: #228d00;
-  text-decoration: none;
+#menu li.dropdown-displayed a {
+  color: #555;
 }
 
-#menu li:hover a {
-  color: #555;
+#menu li a:hover {
+  text-decoration: none;
 }
 
 #menu .caret {
   margin-left: 5px;
 }
 
+#menu .dropdown.dropdown-displayed {
+  background-color: #228d00;
+  color: #555;
+}
+
 #menu .dropdown-menu {
   min-width: 180px;
+  white-space: nowrap;
   background-color: #ffffff;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
-#menu .dropdown-menu:hover {
-  background-color: #e6e6e6;
-}
-
 #menu .dropdown-menu li {
   width: 100%;
   padding: 0;
 }
 
-#menu .dropdown-menu li.current {
-  background-color: #228d00;
+#menu .dropdown-menu li:hover {
+  background-color: #e6e6e6;
 }
 
-#menu .dropdown-menu a {
+#menu .dropdown-menu li:hover a {
   color: #555;
-  font-size: 14px;
-  height: 14px;
-  padding: 4px 12px;
-  width: auto;
 }
 
-#menu .dropdown-menu a:hover {
-  color: #555;
+#menu .dropdown-menu li.active {
+  background-color: #228d00;
 }
 
-#menu .dropside-menu {
-  background-color: #f2f2f2;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+#menu .dropdown-menu li.active a {
+  color: #ffffff;
 }
 
-#menu .dropside-menu a {
+#menu .dropdown-menu a {
   height: 14px;
-  padding: 4px 12px;
+  padding: 8px 12px;
   width: auto;
+  color: #555;
+  font-size: 14px;
 }
 
 .content {

ot_templating/Resources/Public/assets/style/theme-green.scss

@@ -11,6 +11,7 @@ $menu-dropdown-background-color-hovered: #e6e6e6;
 $menu-dropdown-background-color-current: #228d00;
 $menu-dropdown-font-color: #555;
 $menu-dropdown-font-color-hovered: #555;
+$menu-dropdown-font-color-current: #ffffff;
 
 $user-toolbar-color: #666666;
 $user-toolbar-dropdown-background-color: #ffffff;

ot_templating/Resources/Public/assets/style/theme-orange.css

@@ -67,10 +67,6 @@ ul.dropdown-menu li {
   padding: 12px 16px;
 }
 
-ul.dropdown-displayed {
-  display: block;
-}
-
 ul.dropdown-right {
   top: 0;
   left: 100%;
@@ -136,69 +132,65 @@ ul.dropdown-left {
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: 100%;
-  min-height: 26px;
   padding: 12px;
+  height: 26px;
   color: #ffffff;
   font-size: 14px;
   text-align: center;
   text-decoration: none;
 }
 
-#menu li:hover {
-  height: 100%;
-  background-color: #ff6200;
-  text-decoration: none;
+#menu li.dropdown-displayed a {
+  color: #555;
 }
 
-#menu li:hover a {
-  color: #555;
+#menu li a:hover {
+  text-decoration: none;
 }
 
 #menu .caret {
   margin-left: 5px;
 }
 
+#menu .dropdown.dropdown-displayed {
+  background-color: #ff6200;
+  color: #555;
+}
+
 #menu .dropdown-menu {
   min-width: 180px;
+  white-space: nowrap;
   background-color: #ffffff;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
-#menu .dropdown-menu:hover {
-  background-color: #e6e6e6;
-}
-
 #menu .dropdown-menu li {
   width: 100%;
   padding: 0;
 }
 
-#menu .dropdown-menu li.current {
-  background-color: #ff6200;
+#menu .dropdown-menu li:hover {
+  background-color: #e6e6e6;
 }
 
-#menu .dropdown-menu a {
+#menu .dropdown-menu li:hover a {
   color: #555;
-  font-size: 14px;
-  height: 14px;
-  padding: 4px 12px;
-  width: auto;
 }
 
-#menu .dropdown-menu a:hover {
-  color: #555;
+#menu .dropdown-menu li.active {
+  background-color: #ff6200;
 }
 
-#menu .dropside-menu {
-  background-color: #f2f2f2;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+#menu .dropdown-menu li.active a {
+  color: #ffffff;
 }
 
-#menu .dropside-menu a {
+#menu .dropdown-menu a {
   height: 14px;
-  padding: 4px 12px;
+  padding: 8px 12px;
   width: auto;
+  color: #555;
+  font-size: 14px;
 }
 
 .content {

ot_templating/Resources/Public/assets/style/theme-orange.scss

@@ -11,6 +11,7 @@ $menu-dropdown-background-color-hovered: #e6e6e6;
 $menu-dropdown-background-color-current: #ff6200;
 $menu-dropdown-font-color: #555;
 $menu-dropdown-font-color-hovered: #555;
+$menu-dropdown-font-color-current: #ffffff;
 
 $user-toolbar-color: #666666;
 $user-toolbar-dropdown-background-color: #ffffff;