From 8d74083d2b88be1b1c32fa168638ab9a21616916 Mon Sep 17 00:00:00 2001
From: bisnsh <bishsh2006@outlook.com>
Date: Sun, 8 Feb 2026 16:04:06 +0800
Subject: [PATCH] add nav.css for navigation panel background opacity
 adjustment

---
 .../butterfly/layout/includes/header/nav.pug  |  27 +++-
 themes/butterfly/source/css/nav.css           | 115 ++++++++++++++++++
 2 files changed, 137 insertions(+), 5 deletions(-)
 create mode 100644 themes/butterfly/source/css/nav.css

diff --git a/themes/butterfly/layout/includes/header/nav.pug b/themes/butterfly/layout/includes/header/nav.pug
index 6a8d7d6..0180a26 100644
--- a/themes/butterfly/layout/includes/header/nav.pug
+++ b/themes/butterfly/layout/includes/header/nav.pug
@@ -1,5 +1,26 @@
 nav#nav
   span#blog-info
+    #ls-menu-container
+      i.fas.fa-fingerprint
+      #ls-menu-panel
+        .ls-section
+          .ls-title 😀 个人网站
+          .ls-grid
+            a(href="/") #[i.fas.fa-rss] 个人博客
+            a(href="https://github.com/bishshi") #[i.fab.fa-github] Github
+        .ls-section
+          .ls-title 😎 常用服务
+          .ls-grid
+            a(href="https://git.biss.click/biss") #[i.fas.fa-code] 代码仓库
+            a(href="https://mm.biss.click") #[i.fas.fa-pen-nib] 日常yy
+            a(href="https://statstic.biss.click") #[i.fas.fa-users] 访客统计
+            a(href="https://pic.biss.click") #[i.fas.fa-image] 图床
+            a(href="https://chat.biss.click") #[i.fas.fa-robot] AI网站
+        .ls-section
+          .ls-title 🛸 实用工具
+          .ls-grid
+            a(href="https://cover.biss.click") #[i.fas.fa-palette] 封面设计
+
     a.nav-site-title(href=url_for('/'))
       if theme.nav.logo
         img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
@@ -13,13 +34,9 @@ nav#nav
           span= '  ' + _p('post.back_to_home')
 
   #menus
-    //- if theme.search.use
-    //-   #search-button
-    //-     span.site-page.social-icon.search
-    //-       i.fas.fa-search.fa-fw
-    //-       span= ' ' + _p('search.title')
     if theme.menu
       != partial('includes/header/menu_item', {}, {cache: true})
+      
   #nav-right
     if theme.search.use || true
       #random-post-button
diff --git a/themes/butterfly/source/css/nav.css b/themes/butterfly/source/css/nav.css
new file mode 100644
index 0000000..e9b5b93
--- /dev/null
+++ b/themes/butterfly/source/css/nav.css
@@ -0,0 +1,115 @@
+/* 1. 容器溢出穿透 */
+#nav, #blog-info, #nav-group {
+  overflow: visible !important;
+}
+
+#ls-menu-container {
+  position: relative !important;
+  display: inline-flex !important;
+  align-items: center;
+  height: 100%;
+  padding: 0 15px;
+  cursor: pointer !important;
+  z-index: 2000 !important;
+}
+
+/* 2. 悬浮面板：宽大且高不透明度 */
+#ls-menu-panel {
+  position: absolute !important;
+  top: 100% !important;
+  left: 0 !important;
+  margin-top: 15px !important;
+  width: 420px; 
+  padding: 24px;
+  border-radius: 18px;
+  
+  /* 高不透明度磨砂玻璃 (0.9) */
+  background: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(20px) saturate(180%) !important;
+  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
+  
+  border: 1px solid rgba(255, 255, 255, 0.5) !important;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
+
+  opacity: 0 !important;
+  visibility: hidden !important;
+  transform: translateY(12px) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  z-index: 999999 !important;
+  cursor: default;
+}
+
+/* 3. 透明感应桥梁 */
+#ls-menu-panel::before {
+  content: "";
+  position: absolute;
+  top: -20px;
+  left: 0;
+  right: 0;
+  height: 25px;
+  background: transparent !important;
+}
+
+/* 4. 触发效果 */
+#ls-menu-container:hover #ls-menu-panel {
+  opacity: 1 !important;
+  visibility: visible !important;
+  transform: translateY(0) !important;
+}
+
+#ls-menu-container:hover i.fa-fingerprint {
+  color: #49b1f5;
+  transform: scale(1.1);
+}
+
+/* 5. 内部网格：保持两列 */
+.ls-section { margin-bottom: 22px; }
+.ls-section:last-child { margin-bottom: 0; }
+.ls-title { 
+  color: #333; 
+  font-weight: 800; 
+  font-size: 15px; 
+  margin-bottom: 12px; 
+  opacity: 0.9;
+}
+
+.ls-grid { 
+  display: grid !important; 
+  grid-template-columns: repeat(2, 1fr); /* 恢复为两列 */
+  gap: 10px; 
+}
+
+.ls-grid a { 
+  color: #444 !important; 
+  font-size: 14px !important; 
+  padding: 10px 12px; 
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s ease;
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.ls-grid a:hover { 
+  background: #49b1f5 !important; 
+  color: #fff !important; 
+  transform: translateX(4px); /* 悬停时轻微右移，增加动感 */
+}
+
+.ls-grid a i { 
+  margin-right: 12px; 
+  width: 20px; 
+  text-align: center; 
+  font-size: 15px;
+}
+
+/* 6. 深色模式适配 */
+[data-theme='dark'] #ls-menu-panel {
+  background: rgba(30, 30, 30, 0.95) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+[data-theme='dark'] .ls-title { color: #eee; }
+[data-theme='dark'] .ls-grid a { 
+  color: #ccc !important; 
+  background: rgba(255, 255, 255, 0.05); 
+}
\ No newline at end of file