fix: Solved that the secondary menu not display in some cases

liuyib · Jan 13, 2020 · 5f904fc · 5f904fc
1 parent 079e2a5
commit 5f904fc
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 96 deletions.
diff --git a/layout/_mixins/menu-item.pug b/layout/_mixins/menu-item.pug
@@ -1,4 +1,4 @@
-mixin menuItem(menu)
+mixin menuItem(menu, className)
   each value, name in (menu || {})
     if name && value
       - var item = value.split('||')
@@ -10,15 +10,15 @@ mixin menuItem(menu)
       if menuPath.toLowerCase() === 'javascript:;'
         - isSubMenu = true
 
-      div.header-nav-menu-item
-        a.header-nav-menu-item__a(
+      div(class=`header-nav-${className || ""}menu-item`)
+        a(
           href=isSubMenu ? "javascript:;" : menuPath
-          class=isSubMenu ? "nopointer" : ""
+          class=`header-nav-${className || ""}menu-item__a ${isSubMenu ? "nopointer" : ""}`
         )
           if !theme.menu_settings.text_only && !!menuIcon
             i(class=`${fa_prefix} fa-${menuIcon}`)
           if !theme.menu_settings.icon_only
             != __(`menu.${name}`)
         if isSubMenu
           div.header-nav-submenu
-            +menuItem(theme.submenu[name])
+            +menuItem(theme.submenu[name], 'sub')
diff --git a/source/css/_common/components/header/index.styl b/source/css/_common/components/header/index.styl
@@ -23,7 +23,6 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
     width: 100%;
     height: header-nav-height;
     transition: transform .2s ease, background-color .2s ease;
-    will-change: transform;
 
     &.fixed {
       background-color: $header-nav-bg-color;
@@ -53,6 +52,17 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
       padding: 0 .5rem;
       line-height: header-nav-height;
       color: $header-text-color;
+      cursor: pointer;
+    }
+
+    &-menu-item,
+    &-submenu-item {
+      &__a {
+        display: block;
+        padding: 0 .5rem;
+        color: $header-text-color;
+        transition: color .2s ease;
+      }
     }
 
     &-menu {
@@ -71,37 +81,26 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
         &:last-child {
           margin: 0;
         }
-
-        &__a {
-          display: block;
-          padding: 0 .5rem;
-          color: $header-text-color;
-          transition: color .2s ease;
-        }
       }
     }
 
     &-submenu {
       display: none;
       position: absolute;
-      left: 50%;
+      right: -.5rem;
+      left: -.5rem;
       border-radius: 3px;
       width: auto;
       background-color: $header-nav-bg-color;
-      transform: translateX(-50%);
 
-      .header-nav-menu-item {
+      &-item {
         margin: 0;
         width: 100%;
         font-size: $font-size-header;
         line-height: 1;
         line-height: header-nav-height;
         text-align: center;
         white-space: nowrap;
-
-        &__a {
-          padding: 0 .8rem;
-        }
       }
     }
 

diff --git a/source/css/_common/responsive.styl b/source/css/_common/responsive.styl
@@ -6,7 +6,7 @@
       width: $main-width;
     }
   }
-  
+
   .main-inner {
     width: $main-width;
   }
@@ -56,12 +56,21 @@
     float: left;
   }
 
+  menuItemHover(txtColor, bgColor) {
+    transition: color .2s ease, background-color .2s ease;
+
+    &:hover {
+      color: txtColor;
+      background-color: bgColor;
+    }
+  }
+
   .header-nav-menu {
     overflow: hidden;
     position: absolute;
     top: header-nav-height;
-    right: 0 - $main-side-gap;
-    left: 0 - $main-side-gap;
+    right: 0;
+    left: 0;
     width: auto;
     height: auto;
     background-color: $header-nav-bg-color;
@@ -70,17 +79,14 @@
       float: none;
       overflow: hidden;
       margin: 0;
+      menuItemHover(#f4f5f5, $blue-light);
 
       &__a {
         padding: 0 1.5rem;
         text-align: left;
-        color: $white-light;
+        color: #f4f5f5;
         user-select: none;
-
-        &:hover {
-          color: $white-light;
-          background-color: $blue-lighter;
-        }
+        menuItemHover(#f4f5f5, $blue-light);
       }
     }
   }
@@ -89,13 +95,13 @@
     display: block;
     position: initial;
     width: 100%;
-    transform: translateX(0);
 
-    .header-nav-menu {
-      &-item {
-        &__a {
-          padding: 0 1rem 0 3rem;
-        }
+    &-item {
+      text-align: left;
+
+      &__a {
+        padding: 0 1rem 0 3rem;
+        menuItemHover(#f4f5f5, #7ccbff);
       }
     }
   }

diff --git a/source/js/header.js b/source/js/header.js
@@ -1,37 +1,41 @@
 $(document).ready(function () {
   var $menu = $('.header-nav-menu');
-  var $menuItem = $('.header-nav-menu > .header-nav-menu-item');
-  var $allSubmenu = $('.header-nav-submenu');
+  var $submenu = $('.header-nav-submenu');
+  var $menuItem = $('.header-nav-menu-item');
+  var $menuBtn = $('.header-nav-btn');
+  var isMobile = $menuBtn.is(':visible');
 
-  function closeMenuItem () {
+  function resetMenuHeight () {
     $menuItem.velocity({
       height: $menuItem.height()
-    });
-  }
-
-  function resetMenuStatus () {
-    $menuItem.velocity('stop').velocity({
-      height: $menuItem.height()
     }, {
       complete: function () {
-        $allSubmenu.css({ display: 'none', opacity: 0 });
+        $submenu.css({ display: 'none', opacity: 0 });
       }
     });
   }
 
   var isMenuShow = false;
   var isSubmenuShow = false;
 
-  $(window).on('resize', function () {
-    if (isSubmenuShow) {
-      resetMenuStatus();
+  $(window).on('resize', Stun.utils.throttle(function () {
+    isMobile = $menuBtn.is(':visible');
+
+    if (isMobile && isSubmenuShow) {
+      resetMenuHeight();
       isSubmenuShow = false;
+    } else {
+      $submenu.css({ display: 'none', opacity: 0 });
     }
-  });
+  }, 200));
 
   $(document).on('click', function () {
     if ($menu.is(':visible')) {
-      closeMenuItem();
+      if (isMobile && isSubmenuShow) {
+        resetMenuHeight();
+        isSubmenuShow = false;
+      }
+
       $menu.css({ display: 'none' });
       isMenuShow = false;
     }
@@ -82,9 +86,13 @@ $(document).ready(function () {
     });
   }
 
-  $('.header-nav-btn').on('click', function (e) {
+  $menuBtn.on('click', function (e) {
     e.stopPropagation();
 
+    if (isMobile && isMenuShow && isSubmenuShow) {
+      resetMenuHeight();
+      isSubmenuShow = false;
+    }
     if (!isMenuShow) {
       isMenuShow = true;
     } else {
@@ -97,72 +105,76 @@ $(document).ready(function () {
       duration: isMenuShow ? 200 : 0,
       display: isMenuShow ? 'block' : 'none'
     });
+  });
 
-    if (!isMenuShow) {
-      closeMenuItem();
-    }
+  // Whether to allow events to bubble in the menu.
+  var isBubbleInMenu = false;
+  var $submenuItem = $('.header-nav-submenu-item');
+
+  $submenuItem.on('click', function () {
+    isBubbleInMenu = true;
   });
 
   $menuItem.on('click', function (e) {
+    if (!isMobile) {
+      return;
+    }
+
     var $submenu = $(this).find('.header-nav-submenu');
+    if (!$submenu.length) {
+      return;
+    }
+    if (!isBubbleInMenu) {
+      e.stopPropagation();
+    } else {
+      isBubbleInMenu = false;
+    }
+
     var menuItemHeight = $menuItem.height();
     var submenuHeight = menuItemHeight + $submenu.height() * $submenu.length;
     var menuShowHeight = 0;
 
-    if ($submenu.length) {
-      e.stopPropagation();
-
-      if ($(this).height() > menuItemHeight) {
-        isSubmenuShow = false;
-        menuShowHeight = menuItemHeight;
-      } else {
-        isSubmenuShow = true;
-        menuShowHeight = submenuHeight;
-      }
-
-      // 手风琴效果
-      $(this)
-        .velocity('stop')
-        .velocity({
-          height: menuShowHeight
-        }, {
-          duration: 300
-        })
-        .siblings()
-        .velocity({
-          height: menuItemHeight
-        }, {
-          duration: 300
-        });
+    if ($(this).height() > menuItemHeight) {
+      isSubmenuShow = false;
+      menuShowHeight = menuItemHeight;
+    } else {
+      isSubmenuShow = true;
+      menuShowHeight = submenuHeight;
     }
+
+    $submenu.css({ display: 'block', opacity: 1 });
+    // Accordion effect.
+    $(this)
+      .velocity('stop')
+      .velocity({ height: menuShowHeight }, { duration: 300 })
+      .siblings()
+      .velocity({ height: menuItemHeight }, { duration: 300 });
   });
 
   $menuItem.on('mouseenter', function () {
-    if (isSubmenuShow) {
+    var $submenu = $(this).find('.header-nav-submenu');
+    if (!$submenu.length) {
       return;
     }
-
-    var $submenu = $(this).find('.header-nav-submenu');
-
-    if ($submenu.length) {
-      $submenu.velocity('stop').velocity({
-        opacity: 1
-      }, {
-        duration: 200,
-        display: 'block'
-      });
+    if (!$submenu.is(':visible')) {
+      if (isMobile) {
+        $submenu.css({ display: 'block', opacity: 1 });
+      } else {
+        $submenu
+          .velocity('stop')
+          .velocity('transition.slideUpIn', { duration: 200 });
+      }
     }
   });
 
   $menuItem.on('mouseleave', function () {
-    if (isSubmenuShow) {
+    var $submenu = $(this).find('.header-nav-submenu');
+    if (!$submenu.length) {
       return;
     }
-
-    var $submenu = $(this).find('.header-nav-submenu');
-
-    if ($submenu.length) {
-      $submenu.css('display', 'none');
+    if ($submenu.is(':visible') && !isMobile) {
+      $submenu.css({ display: 'none', opacity: 0 });
+      isSubmenuShow = false;
     }
   });