1. 效果预览
2. 教程
如何自定义CSS请看
在路径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. 参考链接
