feat: Add secondary menu support

layout/_common/header.pug

@@ -1,3 +1,5 @@
+include ../_mixins/multi-menu.pug
+
 header#header(
   style=`background-image: url(${
     page.top_image ? page.top_image :
@@ -17,18 +19,7 @@ header#header(
             span!= _p("nav.search")
 
       div.header-nav-menu
-        each value, name in (theme.menu || [])
-          if name && value
-            - var menuItem = value.split("||")
-            - var menuItemPath = _.trim(_.get(menuItem, "[0]"))
-            - var menuItemIcon = _.trim(_.get(menuItem, "[1]"))
-            span
-              a(href=menuItemPath ? menuItemPath : "/")
-                if !theme.menu_settings.text_only
-                  i(class=`fa fa-${menuItemIcon ?
-                    menuItemIcon : "question-circle-o"}`)
-                if !theme.menu_settings.icon_only
-                  != _p(`nav.${name}`)
+        +multiMenu(theme.menu)
 
   div.header-info
     div.header-info-inner

layout/_common/sidebar.pug

@@ -22,7 +22,7 @@ aside#sidebar
 
       if theme.social_setting.enable
         div.sidebar-social
-          for value, name in (theme.social || [])
+          for value, name in (theme.social || {})
             if name && value
               - var socialItem = value.split("||")
               - var socialLinkPath = _.trim(_.get(socialItem, "[0]"))

layout/_mixins/multi-menu.pug

@@ -0,0 +1,18 @@
+mixin multiMenu(menu)
+  each value, name in (menu || {})
+    if name && value
+      - var item = value.split("||")
+      - var menuPath = _.trim(_.get(item, "[0]"))
+      - var menuIcon = _.trim(_.get(item, "[1]"))
+      - var isSubMenu = false
+      if menuPath.toLowerCase() === 'javascript:;'
+        - isSubMenu = true
+      div.menu-item
+        a(href=menuPath ? menuPath : "/").menu-item-inner
+          if !theme.menu_settings.text_only && !!menuIcon
+            i(class=`fa fa-${menuIcon}`)
+          if !theme.menu_settings.icon_only
+            != _p(`nav.${name}`)
+        if isSubMenu
+          div.header-nav-submenu
+            +multiMenu(theme.submenu[name])

source/css/_common/header.styl

@@ -14,18 +14,6 @@ else
   background-size: cover
   transition: height .5s
 
-$header-nav-color
-  .header-nav-menu a,
-  .header-nav-search
-    color: $header-nav-link-color
-
-    &:hover
-      color: $header-nav-link-hover-color
-
-      &::before,
-      &::after
-        color: $header-nav-link-hover-color
-
 if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_height')))
   $header-nav-height = unit(convert(hexo-config('header.nav_height')), 'vh')
 else
@@ -43,21 +31,32 @@ else
   animation-fill-mode: both
 
   &.fixed
-    background-color: alpha($header-nav-bg-color, .5)
-    @extend $header-nav-color
+    background-color: $header-nav-bg-color
 
   &.slider-down
     animation-name: header-sliderDown
 
   &.slider-up
     animation-name: header-sliderUp
 
+$header-nav-link-color
+  color: $header-nav-link-color
+
+  &:hover
+    color: $header-nav-link-hover-color
+
+    &::before,
+    &::after
+      color: $header-nav-link-hover-color
+
 .header-nav-inner
   position: relative
   margin: 0 auto
   padding: 0 1rem
   height: 100%
-  @extend $header-nav-color
+
+  .header-nav-search
+    @extend $header-nav-link-color
 
   i
     margin-right: .3rem
@@ -67,36 +66,62 @@ $header-nav-item
   height: 100%
   line-height: $header-nav-height
 
+$header-menu-item-inner
+  clearAStyle()
+  display: block
+  text-decoration: none
+  @extend $header-nav-link-color
+
 .header-nav-menu
   display: inline-block
   height: 100%
-  transition: opacity .5s
+  transition: opacity .3s
 
   &-icon
     display: none
     color: $header-nav-link-color
     @extend $header-nav-item
 
-  span
+  & > .menu-item
     float: left
+    position: relative
     margin: 0 1rem 0 0
 
     &:last-child
       margin: 0
 
-  a
-    clearAStyle()
-    display: block
-    text-decoration: none
-    transition: color .2s ease
-    @extend $header-nav-item
+    & > .menu-item-inner
+      text-align: center
+      @extend $header-menu-item-inner
+      @extend $header-nav-item
 
   &.show
     visibility: visible
     opacity: 1
 
+.header-nav-submenu
+  display: none
+  position: absolute
+  right: -.4rem
+  left: -.4rem
+  border-radius: 3px
+  background-color: $header-nav-bg-color
+
+  .menu-item
+    width: 100%
+    font-size: $font-header-base - 2px
+    line-height: 1
+    text-align: center
+    word-break: break-all
+
+    &-inner
+      @extend $header-menu-item-inner
+      padding: .4rem .6rem
+      line-height: 1.8em
+
 .header-nav-search
-  float: right
+  position: absolute
+  right: 0
   transition: color .2s ease
   @extend $header-nav-item
 

source/css/_common/responsive.styl

@@ -46,11 +46,11 @@
     visibility: hidden
     border-radius: 3px
     height: auto
-    background-color: alpha($header-nav-bg-color, .7)
+    background-color: $header-nav-bg-color
     opacity: 0
     transform: translate(-1.5rem, 2.5rem)
 
-    span
+    .menu-item
       float: none
       margin: 0
 
@@ -67,6 +67,12 @@
     display: block
     float: left
 
+  .header-nav-submenu
+    top: 0
+    right: 0
+    left: 100%
+    width: 100%
+
   .friends-plugin
     .friends-item
       width: calc(50% - 10px)

source/css/var.styl

@@ -65,7 +65,7 @@ $img-border-color              = #dadefb
 // Module`s color
 // -------------------------------------------
 // Header
-$header-nav-bg-color             = $black-dark
+$header-nav-bg-color             = alpha($black-dark, .8)
 $header-nav-text-color           = $white-light
 $header-nav-text-hover-color     = $blue-light
 $header-nav-link-color           = $white-light
@@ -223,4 +223,4 @@ $side-main-gap         = 20px
 $content-width         = $md-width
 $main-aside-gap        = $font-size-rem * 2
 $main-width            = $sidebar-width + $content-width + $side-main-gap
-$main-responsive-width = $main-width + $main-aside-gap
+$main-responsive-width = $main-width

source/js/header.js

@@ -1,16 +1,33 @@
 $(document).ready(function () {
   var $menu = $('.header-nav-menu');
+  var $menuItem = $('.header-nav-menu .menu-item');
 
   $(document).on('click', function () {
     $menu.removeClass('show');
   });
 
-  $('.header-nav-menu a').on('click', function (e) {
+  $('.header-nav-menu-icon').on('click', function (e) {
     e.stopPropagation();
+    $menu.toggleClass('show');
   });
 
-  $('.header-nav-menu-icon').on('click', function () {
-    $menu.toggleClass('show');
-    return false;
+  $menuItem.on('click', function (e) {
+    e.stopPropagation();
+  });
+
+  $menuItem.on('mouseenter', function () {
+    var $submenu = $(this).find('.header-nav-submenu');
+    var isDesktop = Stun.utils.isDesktop();
+    var menuAnimation =
+      'transition.' + (isDesktop ? 'slideUpIn' : 'slideRightIn');
+
+    if ($submenu[0]) {
+      $submenu.velocity('stop').velocity(menuAnimation, { duration: 240 });
+    }
+  });
+
+  $menuItem.on('mouseleave', function () {
+    var $submenu = $(this).find('.header-nav-submenu');
+    $submenu[0] && $submenu.css('display', 'none');
   });
 });

source/js/utils.js

@@ -388,5 +388,21 @@ Stun.utils = Stun.$u = {
       imgDefereds.push(dfd);
     });
     $.when.apply(null, imgDefereds).then(callback);
+  },
+  hasMobileUA: function () {
+    var nav = window.navigator;
+    var ua = nav.userAgent;
+    var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g;
+
+    return pa.test(ua);
+  },
+  isTablet: function () {
+    return window.screen.width > 767 && window.screen.width < 992 && this.hasMobileUA();
+  },
+  isMobile: function () {
+    return window.screen.width < 767 && this.hasMobileUA();
+  },
+  isDesktop: function () {
+    return !this.isTablet() && !this.isMobile();
   }
 };