dropmenu

scripts/tags/dropmenu.js

@@ -0,0 +1,88 @@
+'use strict';
+
+function postMenu(args, content) {
+  args = args.join(' ').split(',')
+  let text = args[0] || ''
+  let icon = args[1] || ''
+  if (icon.length > 0) {
+    return `<div class='dropmenu'>
+              <i class='${icon} fa-fw'></i>
+              <span>${text}</span>
+              <i class='fas fa-caret-down'></i>
+              <ul class='list-v'>
+                ${content}
+              </ul>
+            </div>`
+  } else {
+    return `<div class='dropmenu'>
+              <span>${text}</span>
+              <i class='fas fa-caret-down'></i>
+              <ul class='list-v'>
+                ${content}
+              </ul>
+            </div>`
+  }
+}
+function postSubmenu(args, content) {
+  args = args.join(' ').split(',')
+  let text = args[0] || ''
+  let icon = args[1] || ''
+  if (icon.length > 0) {
+    return `<li>
+              <a>
+                <i class='${icon} fa-fw'></i>
+                ${text}
+              </a>
+              <ul class='list-v'>
+                ${content}
+              </ul>
+            </li>`
+  } else {
+    return `<li>
+              <a>${text}</a>
+              <ul class='list-v'>
+                ${content}
+              </ul>
+            </li>`
+  }
+}
+
+function postMenuItem(args) {
+  args = args.join(' ').split(',')
+  let text = args[0] || ''
+  let url = args[1] || ''
+  text = text.trim()
+  url = url.trim()
+  if (url.length > 0) {
+    url = "href='" + url + "'"
+  }
+  let icon = ''
+  if (args.length > 2) {
+    icon = args[2].trim()
+  }
+  if (url.length > 0) {
+    if (icon.length > 0) {
+      return `<li>
+                <a ${url} title='${text}'>
+                  <i class='${icon} fa-fw'></i>
+                  ${text}
+                </a>
+              </li>`
+    } else {
+      return `<li>
+                <a ${url} title='${text}'>
+                  ${text}
+                </a>
+              </li>`
+    }
+  } else {
+    if (text == 'hr') {
+      return `<hr>`
+    }
+  }
+
+}
+
+hexo.extend.tag.register('menu', postMenu, {ends: true});
+hexo.extend.tag.register('submenu', postSubmenu, {ends: true});
+hexo.extend.tag.register('menuitem', postMenuItem);

source/css/_layout/navbar.styl

@@ -242,6 +242,9 @@ ul.list-v
       margin-top: 0 - 32px - $gap * 0.5
 
   >li>a
+    trans()
+    display: block
+    color: alpha($color-text, 85%)
     font-size: $fontsize-meta
     font-weight: bold
     line-height: 33px
@@ -255,6 +258,19 @@ ul.list-v
       border-bottom: none
     >i
       margin-right: 4px
+    &.current
+      border-left-color: alpha($color-theme, 80%)
+      border-bottom-color: alpha($color-theme, 80%)
+    &:hover
+      color: $color-theme
+      border-left-color: $color-theme
+      border-bottom-color: $color-theme
+      background: bgcolor($color-theme)
+
+    &:active,&.active
+      color: $color-theme
+      border-left-color: $color-theme
+      border-bottom-color: $color-theme
 
 .l_header
   .menu
@@ -262,9 +278,19 @@ ul.list-v
       padding: 0 8px
 
 .l_header ul>li>a
-  trans()
-  display: block
   color: alpha($color-text, 85%)
+  &.current
+    border-left-color: alpha($color-theme, 80%)
+    border-bottom-color: alpha($color-theme, 80%)
+  &:hover
+    color: $color-theme
+    border-left-color: $color-theme
+    border-bottom-color: $color-theme
+    background: bgcolor($color-theme)
+  &:active,&.active
+    color: $color-theme
+    border-left-color: $color-theme
+    border-bottom-color: $color-theme
   i.music
     animation: rotate-effect 1.5s linear infinite
     @keyframes rotate-effect
@@ -278,20 +304,7 @@ ul.list-v
         transform: rotate(270deg)
       100%
         transform: rotate(360deg)
-  &.current
-    border-left-color: alpha($color-theme, 80%)
-    border-bottom-color: alpha($color-theme, 80%)
 
-  &:hover
-    color: $color-theme
-    border-left-color: $color-theme
-    border-bottom-color: $color-theme
-    background: bgcolor($color-theme)
-
-  &:active,&.active
-    color: $color-theme
-    border-left-color: $color-theme
-    border-bottom-color: $color-theme
 
 .menu-phone li ul.list-v
   right: "calc(100% - 0.5 * %s)" % $gap

source/css/_tag-plugins/dropmenu.styl

@@ -0,0 +1,25 @@
+div.dropmenu
+  display: inline-block
+  position: relative
+  line-height: 2.4
+  cursor: default
+  trans()
+  color: alpha($color-text, 85%)
+  background: $color-card
+  border-radius: $border-codeblock
+  border: 1px solid darken($color-codeblock, 6)
+  padding: 0 $gap
+  padding-top: 1px
+  &:hover
+    background: $color-codeblock
+    >ul
+      display: block
+      margin-left: 0 - $gap * 0.5
+      margin-top: 0 - $border-codeblock
+  ul>li
+    list-style: none
+    >a
+      &:hover
+        text-decoration: none !important
+  .list-v .list-v
+    left: "calc(100% - 0.5 * %s)" % $gap

source/css/_tag-plugins/folding.styl

@@ -2,7 +2,7 @@ details
   display: block
   padding: $gap
   margin: $gap-block 0
-  overflow: hidden
+  // overflow: hidden
   border-radius: $border-codeblock
   border: 1px solid darken($color-block, 4)
   background: $color-card