1. 效果预览

2. 教程

如何自定义CSS请看

🪧引用站外地址，不保证站点的可用性和安全性！
hexo 魔改：js 和 css 文件的添加
Dasi's Blog

在路径BlogRoot\source\css下添加文件nav.css，输入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 导航居中 */
#nav .menus_items {
  position: absolute;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
}

/* 子菜单横向 */
.menus_item_child li:not(#sidebar-menus li){
  float: left;
  border-radius: 6px!important;
  -webkit-border-radius: 6px!important;
  -moz-border-radius: 6px!important;
  -ms-border-radius: 6px!important;
  -o-border-radius: 6px!important;
}
.menus_item_child:not(#sidebar-menus ul){
  left:50%;
  translate:-50%;
}

/* 导航常驻 */
.nav-fixed #nav{
  transform: translateY(58px)!important;
  -webkit-transform: translateY(58px)!important;
  -moz-transform: translateY(58px)!important;
  -ms-transform: translateY(58px)!important;
  -o-transform: translateY(58px)!important;
}
#nav{
  transition: none!important;
  -webkit-transition: none!important;
  -moz-transition: none!important;
  -ms-transition: none!important;
  -o-transition: none!important;
}

3. 分析

居中：将.menus_items元素的定位设置为绝对定位，并使用left: 50%和transform: translateX(-50%)来水平居中

横向：将.menus_item_child下的所有li元素横向排列，并设置圆角border-radius；将子菜单的左边距设置为50%并使用translate来居中

常驻：将#nav元素向下移动58px，通常用于固定位置的导航栏；禁用所有过渡效果transition，确保导航栏的变化不带动画。

4. 参考链接

🪧引用站外地址，不保证站点的可用性和安全性！
buterfly博客导航栏居中
Leonus