💄 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/css/_schemes/Pisces/_menu.scss

@@ -43,4 +43,4 @@
     top: 50%;
     width: 6px;
   }
-}
+}

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');