💄 Add secondary menu in Pisces & Gemini schemes.

assets/css/_common/outline/header/menu.scss

@@ -1,12 +1,26 @@
 // Menu
 // --------------------------------------------------
-.menu {
+.menu, .menu-children {
   margin: 0;
   padding: 1em 0;
   text-align: center;
 }
 
-.menu-item {
+.menu-children {
+  max-height: 0;
+  padding: 0; 
+  overflow: hidden;
+  transition: max-height 1.5s ease-out;
+}
+
+ .menu-children {
+  &.expand {
+    max-height: 400px; 
+    transition: max-height 1.5s ease-in;
+  }
+}
+
+.menu-item, .menu-child-item {
   display: inline-block;
   list-style: none;
   margin: 0 10px;
@@ -51,6 +65,15 @@
       margin-left: 0;
     }
   }
+
+  .menu-item-shrink-icon {
+    float: right;
+  }
+}
+
+.menu-child-item {
+  display: block;
+  margin: 0;
 }
 
 .use-motion .menu-item {

assets/js/next-boot.js

@@ -17,6 +17,7 @@
 
 NexT.boot.registerEvents = function() {
 
+  NexT.utils.registerMenuClick();
   NexT.utils.registerImageLoadEvent();
   NexT.utils.registerScrollPercent();
   // NexT.utils.registerCanIUseTag();

assets/js/utils.js

@@ -7,6 +7,29 @@ HTMLElement.prototype.wrap = function (wrapper) {
 };
 
 NexT.utils = {
+  registerMenuClick: function() {
+    const pMenus = document.querySelectorAll('.main-menu > li > a.menus-parent');
+    pMenus.forEach(function(item) {
+      const icon = item.querySelector('span > i');
+      var ul = item.nextElementSibling;  
+      
+      item.addEventListener('click', function(e) {
+        e.preventDefault();
+        
+        ul.classList.toggle('expand');
+        if (ul.classList.contains('expand')) {
+          icon.className = 'fa fa-angle-down';
+        } else {
+          icon.className = 'fa fa-angle-right';
+        }
+      });
+
+      var cCls = ul.querySelectorAll('.menu-item-active');
+      if (cCls != null && cCls.length > 0) {
+        item.click();
+      }
+    });
+  },
   registerImageLoadEvent: function() {
     const images = document.querySelectorAll('.sidebar img, .post-block img, .vendors-list img');
 			

exampleSite/config.yaml

@@ -135,20 +135,40 @@ menus:
       pre: user
       weight: 2
     - identifier: flinks
-      name: 站点示例
+      name: 友情链接
       pageref: /flinks.html
       pre: thumbs-up
       weight: 3
+    - identifier: example
+      name: 语法示例
+      pre: angles-down
+      weight: 4
+    - identifier: flow-charts
+      name: 流程图
+      pageref: /post/mermaid-charts.html
+      weight: 1
+      parent: example
+    - identifier: math
+      name: 数学公式
+      pageref: /post/math-formula.html
+      weight: 2   
+      parent: example
+      parent: example
+    - identifier: syntax
+      name: 语法高亮
+      pageref: /post/syntax-highlighting.html
+      weight: 3   
+      parent: example
     - identifier: archives
       name: 归档
       pageref: /archives
       pre: archive
-      weight: 4
+      weight: 5
     - identifier: commonweal
       name: 公益 404
       url: /404.html
       pre: heartbeat
-      weight: 5
+      weight: 6
 
 #-----------------------------------------
 # Hugo NexT 主题参数配置

layouts/partials/header/menus.html

@@ -5,12 +5,25 @@
   {{ range .Site.Menus.main }}
     {{ $active := $curP.IsMenuCurrent "main" . }}
     <li class="menu-item menu-item-{{ .Identifier }}">
-      <a href="{{ .URL | relLangURL }}" class="hvr-icon-pulse {{if $active }} menu-item-active{{ end }}" rel="section">
+      <a href="{{ .URL | relLangURL }}" class="{{ if .HasChildren }}menus-parent{{ end }} hvr-icon-pulse {{if $active }} menu-item-active{{ end }}" rel="section">
         {{ if $ms.icons }}<i class="fa fa-{{ .Pre }} hvr-icon"></i>{{ end }}{{ .Name }}
+        {{ if .HasChildren }}<span class="menu-item-shrink-icon"><i class="fa fa-angle-right"></i></span>{{ end }}
         {{ if and $ms.badges (eq .Identifier "archives") }}
           <span class="badge">{{ $.Scratch.Get "postsCount" }}</span>
         {{ end }}
       </a>
+      {{ if .HasChildren }}
+      <ul class="menu-children">
+      {{ range .Children }}
+      {{ $active = $curP.IsMenuCurrent "main" . }}
+        <li class="menu-child-item">
+          <a href="{{ .URL | relLangURL }}" class="hvr-icon-pulse {{if $active }}menu-item-active{{ end }}" rel="section">
+            <i class="fa hvr-icon"></i>{{ .Name }}
+          </a>
+        </li>
+      {{ end }}
+      </ul>
+      {{ end }}
     </li>
   {{ end }}