「水坑」Z-Blog 簡易二級導航菜單 CSS

2021年12月9日#GesF-Force #折腾 #CSS #Z-Blog89

AI 翻譯

這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文

AI 生成的摘要

这篇文章介绍了一个简易的二级导航菜单CSS代码，适用于Z-Blog的default主题。文章还推荐了一个链接模块管理插件，并提到该插件已支持二级导航，但前台效果需要主题自行适配。对于响应式主题和使用前端框架构建的主题，也有相应的考虑和解决方案。

歷史原因，Z-Blog 的導航、友情鏈接管理都比較複雜，雖說將來預定會在系統層面進行修改，眼下作為過渡，推薦使用插件：

鏈接模塊管理 - Z-Blog 應用中心：

https://app.zblogcn.com/?id=1873

插件目前已支持二級導航，只是前臺效果需要主題自行適配。

下邊代碼適用於default主題，本文發出不久後預計將直接內置。

#divNavBar li {
  position: relative;
}
#divNavBar li ul {
  display: none;
  position: absolute;
  left: 0;
  white-space: nowrap;
  /* ↓↓ 一般設置為和#divNavBar高度相同 */
  top: 36px;
  /* ↓↓ 背景色同樣以實際為準 */
  background-color: #297bc4;
}
#divNavBar li:hover ul {
  display: block;
}

對於響應式主題需要考慮手機站效果，不一而足。

使用 Bootstrap 等前端框架構建的主題也可使用其導航組件，鏈接管理插件支持自定義模板，可直接生成需要的 html 結構，並不局限於 ul->li>(a+ul>li>a) 這種形式。